How to Save on Image Size
In today’s world, time is of the essence. With the average attention span lasting only 8 seconds, websites need to ensure they load and engage the user within that time frame, or people will simply log off and go on with their (digital or otherwise) life.
One BIG factor in page weight – and therefore load speed – is imagery. As pictures get bigger, so do file sizes. To keep your pictures looking crisp, while keeping them small enough to make the cut, take a look at these tips and tricks from our team!
DPI is a Irrelevant on the Web
One of the first sticky notes I had plastered to my monitor as a wannabe web kid read “300: print | 72: web.” While that may hold true in the print world, where dots are literally being printed per inch (the deeper meaning behind DPI), when it comes to web, emphasis should be placed on the dimensions of the image, rather than the density of them.
OK. Maybe irrelevant is a little harsh. The higher the DPI, the larger the image file will be, given it’s expecting to retain all the information required to print that larger sized image. In short, when creating new things for web, feel free to use 72 for sake of ease, just know it’s not life threatening.
Want to know more about this? – Check out Steve Patterson’s ‘The 72 PPI Web Resolution Myth” which lays everything out in the perfect amount of pixels for web and print.
Saving Images for Web
An effective way to save for the web is to reduce the quality when saving your image. I know what you’re thinking, “I spent all this time to create the pixel perfect image, why would I want to compromise the quality just so your stupid website can load it faster?!” (Whoa, “stupid website” – that’s hurtful, but you’re just angry.)
The truth is, the general population does not have the ability to see single pixels with their naked eye. Simply setting your image quality between 40% and 70% can save up to half of your file size! Doing so is simple. For example, when saving as a JPEG file in PhotoShop, you are prompted with a “JPEG Options” box with a Quality slider. Making sure the “Preview” box is selected, shift the slider along the scale. Keep an eye on your image as your move from right to left, stopping when you start to notice extreme pixel artifacts – or quality reduced beyond your liking.
Old-Timer Tip: With the release of Adobe’s Creative Cloud, away went my favorite feature – Save for Web. Ok, it didn’t go away, you just have to dig a little deeper or memorize the keyboard shortcut.
Export -> Save for Web (Legacy) – OR –
Command/Control + Opt/Alt + Shift + S, respectively
Using this option, you can further fine tune your quality, with a handy image preview, all conveniently located in your dialogue box.
Optimize to the Max
If you want to take your image game to the highest level possible, we recommend ImageOptim. While currently only available to Mac users, this tool uses lossless compression, which essentially removes blank spaces and otherwise invisible data not required for image display. (Taylor Swift would therefore NOT be able to write your name – but that’s a topic for another day.) The result is a lower file size image that retains the quality of the original.
Not a Mac user? Not a problem, A quick search will give you plenty of results – including web-based options for all users like Smush.It and TinyPNG. Of course each tool does things a little differently. We recommend you try out a couple and see what works best for your particular use case.
See it with Your Own Eyes
Image A: Original – 284KB
Image B: Saved at 40% Quality + Run through ImageOptim – 109KB (62% smaller!)
Can YOU tell a difference between the two images? Or perhaps more appropriate – how much longer would you be willing to wait to view image A?
Reducing the file sizes of your images without sacrificing quality is a quick and effective way to improve your site and shorten load times. And that means users will have more time to do things like click, buy, and well, not leave.
Are there other image optimization tools you prefer that we didn’t cover? Are there any other image optimization techniques/rules you like to abide by? Share your thoughts in the comments below, or send us some love on social!