Image Optimization – How to increase your website speed while maintaining quality.

Are your images loading too slow? Is is the internet speed or did you upload a 1GB image photo to your website? Does it matter?

Let’s talk about speed. If you’re image is too large, it will take longer to load to your site unless it has an automatic quality/size reduction setting.  There’s some free optimization tools on the web but a premium photo editing software like Photoshop that will do the job better.  I don’t think anyone deals with extremely slow 14.4Kbps internet speed but if they did, the image could take up to an hour to load depending on the size.  An image that is about 40Kb means that it loads 14 kilobytes per second. If you’re internet speed was 1Mbps then it will take less than a second for a 42kb image.  The average internet speed can vary but we always want to make sure that the images are optimized for the slowest speeds but best quality available.

(Higher Quality image)

 

(Lower Quality Image)

 

Our modern and awesome new camera phones might take photos sizes ranging from 1mb to 5mb images and that’s great but what happens when you upload 100 photos or 10gb of HD photos online? How long will it take to optimize them to a lower size while maintaining quality.  You will lose some quality but the images will load faster. So how much quality does the image lose in order to gain speed? That depends.

You’ll need Photoshop or you can look for other image editing software online. First you need to do is find where your image is located and open it in Photoshop.

  1. Now grab that image and Go to FILE -> Save for Web and Devices.
  2. Choose “Low” in the preset, and look for the low quality on the right of it.

If you take a closer look at the images, one is lower quality than the other.  Don’t believe me? right click and view the properties on a desktop and see for yourself. The high full size quality image above is about 1mb, the full size low quality images is about 71.9kb but it’s harder to notice at the beginning.

HQ close up.

As you can tell the image quality dropped when we zoom in on the same photo. From far away, things look fine but the closer we look, the more pixelated the images become.  You’ll notice the pixelation around the edge of the glass, almost like small pixelated squares.

LQ close up

In Photoshop, it will give you the options of low, medium, and high during the save as web option. The optimized photo looks a lot more pixelated but it will load a lot faster and is hardest to tell when you look at the entire photo. Now its up to you to decide if page speed is more important the quality.