A picture is worth a thousand words…especially when it comes to file weight! While images spruce up the World Wide Web, they are also the No. 1 deterrent to webpage loading speed. A page clogged with un-optimized pictures leads to poor user experience and tanks the site’s SEO rankings (yes, search engines hate slow sites, too).
So how do you optimize your files for people’s viewing pleasure? Let me count the ways.
1. Choose the best file type.
Raster images tend to come in JPGs, PNGs and GIFs. Here is some information to help you make your pick:
JPEG/JPG is the golden standard for the Internet, allowing to showcase complex colours at a smaller file size. Unless your file needs transparency or animation, this file type should work for the majority of your images.
PNGs: Initially created as a lossless file type, PNG is more versatile than JPG — but also heavier. It supports way more colours (over 16 million!) and transparent backgrounds, and overall allows for a higher quality image at the cost of a bigger file size.
GIF supports both transparency and animation, and its size is directly linked to the number of colours used: the fewer colours, the grainier the image and the smaller the file size. (Your limit? 256 colours.)
2. Check that you’re using the correct colour space.
This one is easy: RGB is the preferred colour mode for the web (although a GIF will use Indexed Color), so simply verify that you’re exporting in RGB and you’re good to go.
3. Settle on a DPI.
Up until recently, the standard web resolution had been 72 dpi…then the smartphones came. Believe it or not, mobile devices typically have higher resolution screens than your average desktop computer, and a 72 dpi image just won’t cut it anymore. If you want your picture to look crisp on a Retina screen, you should really save it at 200 dpi — or stick to the golden middle and opt for 100-150 dpi.
4. Size things down.
Your full-size file will normally have much bigger dimensions than the webpage needs, so all of those extra pixels will increase the file size without providing any viewing benefit. And here’s another issue: bigger images are at a higher risk of art theft! Unless you want to see randos selling your poster off Etsy, keep your full-size image for yourself and only share the resized version. Of course, some platforms have built-in resizing tools, but it’s best to take care of the process on your own. That way you have more control over the end result. We recommend a file size no larger than 1500px on the longest size. i.e 1000×1500. 1500×780 etc.
5. Experiment with compression settings.
Lossless compression will maintain the pre-compression level of quality, whereas lossy compression will discard some elements of the image (albeit in a way that should be invisible to the human eye). Compression happens on a sliding scale, which lets you achieve a balance between image size and image quality.
6. Saving for web – the necessary step.
Although this is now a legacy feature in Adobe Photoshop, we recommend using Save for Web (Legacy) when exporting your files for web. Why? Because of all the reasons stated above.
To save for web in Photoshop, go to File > Export > Save for Web (Legacy). A window will pop up:
From here you can customise a number of settings. A good starting preset is JPEG HIGH.
You can see the file size at the bottom left of the image viewer. Play around with the quality, profiles etc until you achieve a low file size without overly compressing your image.
Anything in the 100-500kb region is good for web viewing (the lower the better). Our original file was 2.46MB and Save for Web helped us get it down to 165kB. Good stuff!
And that’s it! As a rule, a web image should weigh under 1 MB, and if you’ve followed all of these steps, you should have no problem achieving that. Good luck with your creations — and your publications :)
- Featured artwork in this article © Anthony Galatis.