"72 DPI is the highest resolution that monitors can show, so make all your images for web 72 DPI and it will reduce file size!” Sound familiar? It does to use, because for years we were instructed, asked, and even begged for clients to save their images at 72 DPI. Recently we read something about web graphics, something that we should have already known, something that makes sense once you internalize it… image resolution is for print, not web. It blew our damn minds.
So with apologies to all the friends, colleagues, and clients that we have spread this misinformation to, here is some new, reliable knowledge… Saving images "for web" has nothing to do with saving them at 72 DPI (or ppi, pixels per inch) resolution. An image's resolution will have no effect on how it appears on your screen.
Here is why.
In the 1980's, computer screens did have resolutions of 72 DPI, it was because dot matrix printers printed at 144 DPI, so what you saw on the screen was going to be roughly equal to what was printed on a 2 to 1 scale. As screens and printers have improved, the 72 DPI rule for web resolution is now completely irrelevant. Literally no one uses 72 ppi resolution monitors anymore. Monitors these days, especially Apple's retina displays, have much greater resolutions, commonly 227 DPI. Some smartphones even display at up to 500 dpi. So the computer monitor you're currently staring at, unless it was made before yours truly was born, has a resolution that is much higher than 72 DPI. SO, the idea that you should set your images' resolutions to 72 DPI in this day and age is just silly, and completely unnecessary. Who ever told you to do that is an idiot!
Raise your hand if you have you been using Photoshop's "Save For Web" feature all these years thinking it was dropping the resolution to 72 DPI. It's ok, we were too.
And while you weren't doing any harm, you were probably unaware of what exactly "saving for web” was actually doing, and what makes an image optimized for web.
There's a big difference between resolution needed to PRINT an image, and the resolution needed for an image to display properly on screen. Image resolution is for for PRINT, telling a printer how many dots per inch the ink needs to touch down. A digital image is simply made up of pixels taking up a certain amount of space on your screen.For instance, 800 pixels wide x 600 high. An image will display on screen at whatever pixel dimensions it is set at.
Instead of worrying about changing your image's resolution, you should instead focus on the image's compression quality, and overall dimensions so that you end up with an image that looks good, but at the smallest possible file size.
Here are a few quick tips:
- Unless you're uploading an image for a huge slider or background image, keep your images below 1,000 pixels wide.
- Lowering the compression quality of an image won't be noticeable until you get close to 50%. Keeping your images around 60-70% will not only lower the file size, but it will keep your images looking sharp on the web.
- If your image files are several MB's, they are too big. Aim for something smaller, there really isn’t any reason why most images can’t be under 200KB.
In the game of SEO, having a fast loading site is a no-brainer, and if your site is especially image heavy, it will be worth your time to adjust your images, decreasing their overall file sizes.
If you'd like for us to take a look at your website and discuss your current images or overall site speed, fill out our Get Started form today.