Proven Methods to Optimize Images for the Web
Image optimization is one of the easiest ways to improve website loading performance, and yet very few people take the time to do it. Here's what you need to know if you want to minimize image file size, and thus improve your website's speed.
Let's begin with the obvious: large images load slowly. Sometimes you will need to use large images because they include a lot of necessary information. I am thinking at infographics, for example, which will often display plenty of data from various sources. But more often than not, people use large images for the products in their e-commerce stores.
That may sound like a good idea, but it won't help at all. Since many website visitors use their smartphones to browse the web and make purchases, it makes a lot of sense to optimize the images for their screens, right? While the newest flagships have resolutions that can reach 1400x3200 pixels, most people have phones that incorporate screens with typical resolutions of 720×1280 pixels.
Since you are targeting "most" people, your website (and its accompanying images) should be optimized for screen widths of 720 pixels, get it? Therefore, if we consider the fact that your images shouldn't fill the entire screen (we've also got vertical navigation bars, etc.) you should limit the width of your pictures to 600 pixels.
To give you an idea, a jpeg image of 1400x934 pixels that would be displayed perfectly on a top-of-the-line smartphone has a size of about 700 KB, while the same image uses just 160 KB at a proportional 600x400 pixels resolution. This is the main reason why we use images with a width of 500 pixels or less on this site; they look good on desktop PCs and $2K phones, and they are super optimized for standard mobile devices.
Choosing the proper image format is another essential aspect. PNG files provide the best quality, because they use a lossless compression algorithm. However, PNG images can have large file sizes, so they should only be used for pictures which only have only a few color zones - illustrations, for example.
GIF files use 256 colors and aren't too efficient when it comes to file size. They work great if you want to incorporate a small-sized animation on your site, though.
Finally, JPG files are almost always the best solution. You can (and should!) adjust the quality/file size ratio on a per-image basis; our tests show that images look really good when the compression ratio is in the 70-90% interval.
If your website is powered by WordPress, there are many plug-ins that can compress all the images which have been loaded in the media gallery automatically. To get started, you can search the plugin repository for Smush or TinyPNG. With a plugin like these, you can have new images resized automatically, as they are added to the library, and you can even set maximum widths/heights for each picture.
By the way, don't get fooled by the "TinyPNG" name; the plugin uses both the TinyPNG and TinyJPG services. If you utilize one of these WordPress plug-ins, you will get images that are compressed by 50% on average, without seeing a visible quality loss.
People who don't use that CMS for their sites can optimize images using one of the many popular graphics editors, such as Adobe Photoshop or the less featured, but 100% free Gimp.
Alternatively, if the idea of paying a small monthly fee doesn't scare you, cloud-based image compression services such as ShortPixel can do a great job, providing lossless, glossy and lossy image optimization.