How To Optimize Website Images For Speed

So you’ve got your beautiful images all set, you’ve tinkered in Photoshop and Illustrator and InDesign has made them all look amazing. There is one catch: they are HUGE – they are easier to manipulate but putting them on your website at a couple of megabytes per image will make for a painfully slow loading experience.

To get around this you are going to have to optimize website images for speed by saving or compiling your images in a web- friendly format depending on what the image involves.

How Does It Work?

Optimizing your image for speed works by removing all the unnecessary data saved in it, which reduces the file size of the image. Optimizing (or compressing) images for the web can reduce your total page load size by a whopping 80%.

Resizing the image on the webpage itself using CSS could work, but the web browser will still download the entire original file, resize it, then display it. Think of taking a poster size image and using it as a thumbnail. The little 20px by 20px image would still take as long to load as the original poster because the data hasn’t changed.

Why Is It Important?

The main reason it’s so important to optimize your images for speed is that 90% of websites are graphics–heavy and therefore use a lot of images. Leaving your images uncompressed (and in the wrong format) will severely slow down your load times and leave you with frustrated and bored users that click away to another, faster site.

Slow load times can thus lead to lost revenue. According to Strangeloop, a one-second delay can cost you 7% of sales, 11% fewer page views, and 16% decrease in customer satisfaction. Optimizing for speed means compression of images and there are two forms of compression to understand:

Lossy

  •         Looks slightly different from the original image when uncompressed (only visible if you look really closely)
  •         Good for web, because images use a small amount of memory

Lossless

  •         Retains all the information needed to produce the original image
  •         Much larger file size

How To Optimize Your Images

Here are the most common ways to optimize your images for the web.

  •         Reduce the white space around images
  •         Save your images in the proper dimensions
  •         Choose an appropriate image file format
  •         Use JPGs for all photographic-style images
  •         Do not use BMPs or TIFFs
  •         Use GIFs for blocks of repetitive color including logos and line art
  •         Use PNGs to preserve partial transparency and a large amount of colors

Free Image Editing Software

Try one or all of these to optimize your images like a pro.

Final Thoughts On Optimizing Website Images For Speed

Quite simply, if you’re not optimizing your images for the web – then start now. It will speed up your WordPress site and most users won’t notice the barely perceptible loss of image quality on their phones anyhow.

Lastly, you should consider using a CDN (Content Delivery Network) to serve images for your WordPress site. A CDN can significantly speed up your site. Check out this infographic from WordPress Beginner to see how they work.

 


0 Reviews



Be the first to review!


Post a Review

(required)