Last updated on January 11, 2018

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. 

But how?
 
Historically, image optimization was a process of resizing your images and compressing them.
 
This could be accomplished by applicaitons such as photoshop or even using a free application such as Resize Image. The concept here is to create two images – one at 900 pixels wide and another at 320 pixels wide. And them compress with a given % image quality (let's say 70 – 90%.)
 

For example

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

Let me introduce two plugins, both are free, but if you have more images to process, you can inexpensively add additional capacity.
 
Now, what I'm proposing are two plugins that take care of resizing, optimizing the size and handling the retina resizing – for free or very inexpensively. Not a bad situation, especially if you have multiple images.
 
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.
 
Together, they completely handle your image resizing, optimization and retina needs.
 

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.
Now a retina image of the 300 px image is 51 kb – remember it's actually 600 pixels. This is as compared to the normal 16 kb 300 px image. Although bigger, the image size is not onerous and the image quality is substantially better, especially on Apple retina screens.
 

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.
 

Thanks

Thad Brown

thad @ resolute blogger
Thad is a former executive with several multibillion-dollar investment advisory firms, who has developed a series of strategies that captivates interest, conveys confidence, and converts alliances for website ventures. For a free PDF on How to Structure Facebook Ads Successfully, download here.

Leave a Comment

Your email address will not be published. Required fields are marked *