How to optimize your images
Optimizing images are critical for websites. Google dings slow loading sites – actually they don't have to, the visitor is already gone.
*84% of communications will be visual by 2018.
Without question, images are important on the Internet. Since we are by nature, visual, their proliferation continues to grow.
Unfortunately, images take up a ton more space than does written content. So much so, that Google penalizes slow sites, usually due to non optimized images. In reality, Google probably doesn't have to do much. If your site loads too slow, you will be penalizing yourself – your visitors won't wait – they're already gone, probably never to return.
A general rule of thumb is that your site needs to load in less then 3 seconds or…you're in trouble. In reality, even 3 seconds seems too long, with 1.5 to 2 seconds being more optimal.
How can you optimize your page load speed?
Generally, you want to use a good hosting service with a reputation for speedy servers and use a minimizer like Autoptimize. The most important element however, is to optimize your images.
Let's take this image as an illustration.
Typically, 35mm images come with a 3 x 2 ratio, and this image, full size is 5,616 x 3744 pixels and comes in at 6.9 mb. Wow! Load time, as you might expect, is extremely slow and you might only be using 1024 or 320 pixel widths. Needless to say, there is just too much overhead here.
We can use Photoshop, or the free resize image application, mentioned above, and resize to 1024 px wide. Using a 90% image quality, we receive a image that is now 123 kb. Fortunately, the image quality is not noticeable different. Another plus.
But what about Retina?
The world has become more complicated. Having to individually resize and compress each image is a bit of a chore. And, with Retina displays, images look a bit pixelated unless optimized for Retina displays. This means the images have to be doubled in size, which creates a self imposed problem. We now have images that are twice as big as before which only compounds our page load problem.
You can search the net to explore the difference in image quality between retina and non retina and here is just one example. The point is, the quality is noticeable and although you don't necessarily want to freak out about this, it would be nice if there were a way to handle all of this automatically.
Well, there is a way
The first plugin is ShortPixel. Now, there are a number of image crunchers but ShortPixel handles so much automatically and integrates with the second retina plugin such that it's truly special (and I've used a lot of other plugins.)The second plugin is WPRetina. This is a remarkable plugin that handles all matters of retina issues. It will probably do much more than you need, but you're free to deactivate any of the unneeded features.
Let's looks at the following examples, which are automatically resized, and optimized using the two plugins on the same image above.
- Original Image – 5,616 x 3744 pixels and 6.9 mb
- Resized to 1024 px – 98 kb (still using a 90% image quality, this is smaller than the 123 kb image size using the Resize Image website.)
- Resized to 300 px – 16 kb.
- Resized to 150 px – 8 kb.
Is it worth it? Only you can decide. If your site is, for example, a photographic portfolio site, the retina images would almost be required. Other sites could get away with standard images.
But, bottom line, here's a concept that does everything automatically and is either free, or almost free. And…it sure beats manually resizing and compressing every image.
* See the Webdam site for statistics on graphics on the Internet.
How about you? Is this worth it for you? What other concepts do you use for image optimization? Let me know in the comments below.