In Photoshop, the Save for Web dialogue does not give an accurate size for the file. For instance: The original file size is 2.6MB (checked with Cmd + I on a Mac). When I open it in Photoshop and use File → Save for Web, it tells me that the file size (Original) is 6.73MB.
It happens in all my photos. Why does Cmd + I on a Mac 2.6MB and Photoshop's Save for Web 6.7MB. In a PRACTICAL way, what number should I trust for web design? It seems that if I upload the file to a server the important number is Cmd + I.
Is that right? If so, does the number that gives Photoshop have any PRACTICAL utility? Keep in mind that if your operating system supports file and drive compression, then it will show a slightly different file size to you than a software that has loaded that file and is looking at its raw loaded size. The discrepancy is mostly due to how the operating system handles size calculations. For example, on Windows when you look at the properties of a file, you will see something to the effect of size of the file, and then size on disk. The difference is a number of things, for example cluster size, type of formatting be it NTFS, exFat, FAT, FAT32, so on can lead to difference size measurements for the same file.
Dec 27, 2017 - Why the 'Save for Web/Devices' feature in Adobe Photoshop is a crucial feature - and a nine-step tutorial on how to use it.
Hope that helps. The difference comes from having two common understandings of the word 'kilobyte'. The SI prefixes kilo, mega, giga all refer to powers of ten.
A kilometer is 1000 meters. However, in computing it has been common for people to say kilo when referring to 2^10 (1024). Mega is used for 2^20 (1048576).
For KB, that's close, but the higher prefixes things get further and further from the non-computing meaning. For a long time this has caused confusion.
Hard drive manufacturers have long used the base-10 values to describe the size of their drives, which can upset someone when their '500GB' hard drive shows up looking smaller on their computer, if it reports the base-2 values. ISO to use when discussing base-2 numbers, in ISO/IEC IEC 800. Instead of kilo, mega, and giga, we have kibi, mebi, and gibi. The standard abbreviations are KiB, MiB, etc. Why does this matter? Photoshop is reporting values using the base-2 values. OS X switched to base-10 sizes in Snow Leopard.
So 2KB in Photoshop means 2048 bytes, which is 2.048KB in the Finder. There's still a very small discrepancy between the value that PS reports that I believe is due to the extra metadata and header flags that PS adds during save.
Save, Export, Generate Photoshop gives you so many ways to save files. How do you deliver your work in the most effective and efficient way? The options for saving and exporting files in Photoshop represent almost three decades of changing requirements, so there’s some duplication that can be confusing. Let’s untangle the options based on the requirements of your jobs.
Do You Need to Preserve Layers? If you must preserve Photoshop layers in a file you’re delivering, choose File Save As, and choose Photoshop from the Format pop-up menu. Preserving layers maintains the ability to edit the components of a Photoshop document, such as an adjustment layer, the characters in a text layer, or the effects applied to a layer. This is also important for applications that can manipulate Photoshop layers. For example, you can use Adobe InDesign to control which layers of a Photoshop document are visible in a page layout, and you can use Adobe After Effects to animate Photoshop layers independently in a video composition.
Format options in the Save As dialog box in Photoshop Even though the TIFF and Photoshop PDF formats can also preserve layers and Photoshop features, applications that can manipulate Photoshop layers can usually require a document in Photoshop format. Is the Document Going to a Press? If you’re preparing your Photoshop document for a press, you’ll probably find the format you need in the Save As dialog box. The Format pop-up menu in the Save As dialog provides the Photoshop and TIFF file formats commonly used for prepress, along with the less commonly used Photoshop EPS and Photoshop DCS file formats.
The in the Save As dialog provides PDF/X presets that you can select if you need to make a Photoshop document comply with a PDF/X standard. Is the Document for a Web Page or Mobile Device? Many users learn only one or two of the many ways to get web and mobile graphics out of Photoshop.
Knowing the full range of options can help you solve more web graphics challenges. Comparing Export As and Save for Web (Legacy) Adobe recommends the Export As dialog box (choose File Export As) as the first option for most web graphics. You can use Export As to create a copy of a Photoshop document in the PNG, JPEG, GIF, or SVG format.
Save for Web (Legacy) is the older way to save web graphics, but it’s still useful. Export As and Save for Web (Legacy) have a lot in common.
Export As is built on newer code that can handle larger documents. It can export multiple resolutions if you need to provide a web developer with standard and HiDPI/Retina device resolutions (for example, 1x, 2x, and 3x scale factors).
But Save for Web (Legacy) gives you more control over compression, previewing, and metadata. And Save for Web (Legacy) can export a Photoshop video timeline as an animated GIF file. The Quick Export command (select layers and choose File Export Quick Export) is like an express version of the Export As command, because you don’t have to stop at a dialog box each time you use it. Instead, you set up Quick Export by choosing File Export Export Preferences. When you choose Quick Export, it instantly exports using the preferences you set.
Quick Export is great when you repeatedly export using the same settings. Understanding the Two Kinds of Export As Export As is also available on the Layer menu, and it’s different than Export As on the File menu. The key to telling the difference is where each command is available:. Choose File Export Export As to save a copy of the entire document as a single file. Choose Layer Export As to save selected layers or layer groups as separate files. It’s common to design Web and mobile graphics with buttons, images, and other components on their own layers, so Web/mobile developers may request those layers as separate files.
Quick Export is also available on the Layer menu for exporting selected layers or layer groups. The Layer Export As command is also available on the Layers panel menu. Automating Web Export with Generator If you’re a Web or app developer or working closely with one, you can automate the export of web graphics from Photoshop layers using Generator. How you name layer groups and layers determines how those layers export. For example, if you named a layer 728 x 90 banner.jpg80% it will export as a 728 x 90 px file, named banner.jpg, in JPEG format, at a quality level of 80%. Where Generator saves time is that you never have to select layers or manually export them. Each time you edit the document, all layers and layer groups named using Generator syntax will automatically export.
That way, exports are always up to date. Generator syntax is powerful. For example, if you name a layer or layer group 100 x 100 logo1.png,200 x 200 logo2.png,300 x 300 logo3.png Generator will export three files at different sizes.
The highlighted layer group is named so that it will export three files using Generator. If you want to use Generator, open the Photoshop Preferences dialog box, and in the Plug-ins panel, make sure Enable Generator is selected. Then choose File Generate Image Assets and make sure that command is enabled. For details about usage and syntax, see the Adobe help topic.
GIF and JPEG Options You Might Not Need You may see the following Photoshop commands that sound like ways to export Web graphics, but they’re older or have specialized uses today:. (Save As) CompuServe GIF. Another way to export as GIF is choosing File Save As and choosing CompuServe GIF from the Format pop-up menu. But this is an older method that you might never need to use if the options in the Export As or Save for Web (Legacy) dialog boxes cover your requirements. (Save As) JPEG. The JPEG format option in the Save As dialog box can be useful when you want to save a JPEG format file intended only for print, or that won’t be uploaded to a Web page. The JPEG option in the Save As dialog box generally creates larger file sizes than the JPEG option in the Export As or Save for Web (Legacy) dialog boxes, because the Save As version includes more metadata such as resolution (ppi). If you shop online, you’ve seen similar techniques: Zoomify lets you magnify an image within a rectangle of a specific size, so that enlarging it doesn’t take over the entire web page.
This requires not just an image, but accompanying HTML code. That’s fine if you’re coding your own web page. However, Zoomify may not be practical if you’re posting an image through social media or on a template-based web site builder.
Do you need a PDF file? You might be surprised at how many ways you can convert a Photoshop document into a PDF file. To create:. A one-page PDF file.
Choose File Save As, and choose Photoshop PDF. When you click the Save button, the Save Adobe PDF dialog box appears. You can choose from the same Adobe PDF Presets that other Adobe applications use.
Selecting Photoshop PDF format opens the Save Adobe PDF dialog box also found in other Adobe applications. Artboards in a multiple-page PDF file. Choose File Export Artboards to PDF, so that anyone can review artboards you created, such as a web site design. Layer comps in a multiple-page PDF file. Choose File Export Layer Comps to PDF, so that anyone can review document variations you created using the Layer Comps panel. A slide show of multiple images.
Choose File Automate PDF Presentation to create a multiple-page PDF file from files you select. You can then choose from Multi-Page Document, or Presentation (a self-running, full screen slide show when opened in Acrobat). Knowing your choices for delivering Photoshop files can help you cut through confusing options, meet deadlines more easily, and more effectively satisfy the requirements of your clients and service providers. Categories:, Tags.