The recently renamed ‘Export As’ dialog (previously known as Save for Web) in Photoshop is a tool for compressing and resizing images for the web. It outputs to one of four file formats, gif, png and jpg, plus, most recently, svg. Let’s start with the most commonly used format, jpg. This is the best format for continuous tone images for the web. They can be heavily compressed, while still retaining a lot of their detail. As noted before, there are two main things that determine file size – the number of pixels in the image and the compression applied when saving as a jpg. ‘Export As’ is designed to be used on images that are already resized, as it is primarily a compression tool, but even if you load a full size image into it, it will load anyway after warning you it wasn’t designed to do so. You can then resize the image as well, but I prefer to resize the image first using the image size dialog and then compress for web using ‘Export As’.
The basic compression choice comes in the form a slider that you set anywhere from 0 to 100. In the example above, it took a 410.7kb image and reduced itÂ to only 74.1kb at 50% quality. How much you compress is up to you, but I find the best balance for size and quality to be around the 50 mark. The compression will also depend on the amount of detail in the image (the more detail, the less redundancy is possible). Gif used to be the traditional format for graphics, like logos and such, as they support transparency and a smaller colour palette, but these days png is the default format for those type of files. Png files support transparency, which is very useful in web design, but pngs are a bit large, even out of the ‘Export As’ dialog. That said, there are ways to further reduce the size of pngs, including a great little online toolÂ https://tinypng.com/Â which compresses the png file while retaining transparancy. As a basic rule of thumb, use jpgs for photographs on the web and png for graphics. For a much more in-depth look at these formats, check out this excellent Â article on sixrevisions.com