Learn about optimizing images for your website to increase your page speed and SEO.

 

The images on your website can and should be just as important as the text. In fact, if you’re a photographer or a designer, those images may be the most important element on your site. That’s why you need to come to optimize images that help your website load faster and increase its overall SEO. It’s actually easy to do and should be built into your website builder workflow.

 


Optimizing images makes your website load faster while preserving the quality of the images. You may be thinking that page loading speed can’t be that big of a deal. Well, you’d be wrong. A study from Akamai has some startling results:

 

“A one-second delay in website load time can cost you 7% of sales, 11% fewer pageviews, and 16% decrease in customer satisfaction.” Over time, that becomes significant and can have a huge effect on your business."


One of the keys to optimizing images for the web is to do the work before uploading them to your website builder. There are a number of excellent image optimizers that help prep your images before they get uploaded and published live on your website.

 

Why Optimize Your Website Images


There are 4 reasons to optimize the images you put on your website:

  • Your website will load MUCH faster if you optimize your images correctly. Your users and Google will LOVE you for it!
  • Optimized images rank faster and better, and increase your visibility.
  • You’ll use less storage for smaller images, cutting down on your website storage costs.
  • Backing up your website is much quicker to do when you don’t have thousands of large images to worry about.


Check out this blog on tips on making your images visible in Google.

How to Optimize Your Website Images


There are three factors to consider when optimizing your images. The first is file format, the second is compression and the third is the dimensions of your image.

 

  • File Format - the most widely used image formats are PNG, JPEG and GIF. Check out this blog regarding the difference between these file types. PNG files are the best quality of the three, but they are uncompressed, so the file size is still relatively large. JPEGs are compressed and easy to work with. However, they're lossy, and they lose a lot of quality as they undergo processes such as uploading, downloading, etc. GIFs are suited for animated images. These are large files due to the animation protocols of the image.  


WPBeginner sums up the factors that should influence your decision, saying


“To keep things simple, you want to use JPEGs for photos or images with lots of colors, PNGs for simple images or when you need transparent images, and GIFs for animated images only.”

  • Compression - after choosing the file format, you should start the process of compressing your image. The goal is to minimize the size of the data in a file (measured in KB, ‘kiloByte’, or MB, ‘megabyte’) without sacrificing too much image quality. Most photo editing tools, like Photoshop or Lightroom, have good compression software built in, and it’s just a matter of learning how to use it before you upload images to your website.


Check out this step-by-step guide to compressing using Photoshop.

  • Dimensions - lastly, find out the correct dimension of your image, and format it accordingly. There is no one-size-fits-all answer when it comes to dimensions. You should do some research on your website builder, or ask their support team to find out what dimension works best for your website.


As a general rule, an image rarely needs to be bigger than 1250 x 800 pixels. Beyond that, the website starts to strain, and the image starts to load slowly. 

 

Choosing the Best Image Optimizer


There are many image optimizers out there, so which to use is really a matter of preference and what tools you’re used to using. Below is a list of the most common image optimization tools out there:

  • Photoshop is the godfather of image editing software, and there’s almost nothing that it can’t do when it comes to image manipulation and enhancement. But there is a learning curve, and it can take a while if you are new to the software. It’s also relatively expensive because of how versatile it is.

  • Gimp is very similar to Photoshop, but it’s free software that you can download onto your computer. Gimp is reliable, and the look and feel is very similar to Photoshop. However, it lacks the support and robust infrastructure of Adobe’s paid software.

  • If you’re not looking to do extensive editing but you’re just in the market for an Image Optimizer, then TinyPNG is a really good option. When you visit their website, all you need to do is drag your .PNG or .JPG files into the browser, and the website will deliver back smaller files using smart lossy compression. The quality is great, and you will be hard-pressed to tell the difference when you are looking at your files online.


Pro Tip - You’re allowed to process up to 20 images for free before it becomes a paid-for service.


Displaying great quality images on your website without affecting its performance is easy to do once you know what to do and how to do it. Just spare some time to make sure that the images are optimized before they’re uploaded.


Sign up for a free trial with Folio Websites and see how great your images look when they are optimized and displayed on a simple website builder like Folio.