Home

Website optimization series 1: Images

This is the first part of the Optimization series. In this post, we will talk about optimizing images, file types, resizing, quality, and how to improve your website speed greatly. We will also see how to improve SEO (Search Engine Optimization) through just our images.

cover image

NOTE

Before we start I want you to go to GooglePage Insight by clicking here, type your website domain into the field, and press Analyze. Save that score, as a reference on how much this post helped you improve your website speed.

Let's start

Images are often overlooked when it comes to the web. We all saw those websites that take ages to load, and it's mostly because of huge images that are taking a lot of time and bandwidth. This repels our users, as they want to access all the information as soon as possible without waiting.

Keep in mind that users don't depend on us, we depend on them. If they don't like our website, they can just go to another (better) source of information, and trust me, there is a ridiculous amount of them out there.

What can we do about this

We need a way to keep users on the website by giving them

  1. Quality and updated content
  2. A way to quickly access any information on our website

The first one is your responsibility. For the second one just follow me.

1. Name your images descriptively and make them easy to read

This might not look like a big one, but it actually is, especially when it comes to SEO. Let's take this image for example

image

Your camera probably assigned a name to this image (e.g. 13MGA10KLT.jpg). However, it would be much better to name it ice-cream.jpg.

This helps search engines (like Google) to easier identify our images, and therefore have a much bigger chance of appearing when users search for ice cream.

2. Optimize alt tags for images

This is one of those things that a lot of developers don't care about but it is extremely important, and here's why.

The alt element also helps your website rank higher in search engines. Adding suitable alt attributes to your pictures on your website that include important keywords might help you rank higher in search engines. In fact, improving alt attributes is arguably the most effective technique to ensure that your items appear in Google image and web searches.

Here's what you should do

  • Describe your images in a way that can be easily read and understood
  • Use model or serial numbers in your alt attributes if you offer items with them.
  • Don't overcrowd your alt attributes with keywords, as this can only hurt you and your SEO

Don't forget to check alt attributes from time to time, just to make sure that everything is in the right order.

3. Reduce image size

This is one of the most important parts when it comes to images on the web. Here are few things to think about before we continue

I strongly suggest you read all of these articles as it will help you tremendously to understand why is it important to have a fast website.

Here's what you should do

  1. Don't use high-quality .png images everywhere. Do you really need a 5MB image just to show a preview of your product?
  2. Consider using .jpg or .webp images as they will be smaller in size, but will retain a lot of original image quality.
  3. If you have a small card to show a preview of your product, you don't need to load a 1000x1000 pixels image in there. Resize it down to the size of a card, this will reduce its size, and it will load much faster.
  4. A rule of thumb for e-commerce pictures is to keep image file sizes around 70 kb.

These 4 items will boost your website performance greatly

4. Choose the right file type

There are 16 different image types (according to Wikipedia), and choosing the right one might seem like a trivial task, but it is not.

The problem starts when you use .png images everywhere. I am not saying that you don't need them, because in some cases you most definitely do, but you don't need them everywhere on your website. They are high-quality images and are bigger in file size than other formats.

Let me show you this with an example.

Image is taken from here

image

The image above is a 1 MB PNG image. Doesn't seem like a lot but if you have 10 images on your page that is about 10MB of images on a single page, which is a lot.

image

The image above is a 352 KB JPG image. Almost 3 times smaller than the PNG and the difference in quality is unnoticeable. Let's see one more example

image

This image is a 100 KB WebP image. 3 times smaller than JPG and 10 times smaller than the PNG image. 10 of these images will have the same size as a 1 PNG image. WebP image is becoming widely supported for browsers and can be safely used now, as it will work on every modern browser without any problems.

image

Just for reference, this is resized WebP image that is only 42 KB in size. That is ridiculously low for a modern web. Imagine how many you can fit in one PNG image, and how much faster your website will be,

WebP images are perfect for showing product previews or thumbnails because you're able to have a lot of images that are really small in size, and won't slow down web pages.

What now?

Hope this blog post helped you and gave you some ideas on what to do with images to make your website faster and overall better.

After you implemented everything navigates to GooglePage Insight by clicking here and run the audit. Compare results with the one that you've run before. I am sure that your website will feel much smoother to use.