Optimizing Images for the Web

We use our devices every day. We go online to websites or social media, and we look at images and videos and all other types of visuals. Do you ever wonder how those images look so clean and crisp? These designers use image optimization to make their pictures fit their needs on the web.

What is Image Optimization?

Image optimization is the process of delivering high-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size. Image optimization can be achieved in a variety of ways; it could be through resizing the image, caching, or by compressing the size.

Why is it Important?

If your images or website takes more than three seconds to load, users are more likely to move on to the next site. Image optimization is crucial because it improves the page load speed. This gives the user a better experience because they are less likely to abandon a page that is fully loaded. This also creates more traffic on your site. It improves your site’s SEO ranking; the faster your page loads, the higher up it will rank when being searched.

A graph showing the correlation between page speed and google search position. Source: https://backlinko.com

Once your search rank improves, you will then also capture the attention of many more users, which will, in turn, create more conversations and word-of-mouth advertising. Image optimization also enhances user engagement. Users and customers are more likely to return to your site if your site loaded promptly, which is in less than 2 seconds, and if it doesn’t, they are not going to be loyal to the site.

How do you Optimize an Image?

Like I said earlier, there are many ways to optimize an image, and below I will demonstrate how I optimized an image for the web using Photoshop. However, first I want to give a super short explanation of the difference in sizes because when I first started doing this, I had no idea what the sizes meant and what was bigger or what was smaller. So, KB= Kilobytes and MB (sometimes known as M)= Megabytes. Kilobytes are lower than megabytes. In this instance, the smaller the file size, the better. 

Original

I started with the image above. This image is currently 983KB in file size, and 900px by 1200 px, and is a JPG (also known as JPEG) file. I uploaded it into Photoshop, so it looks like this: 

I didn’t need to crop or resize because I didn’t have a background that I needed the image to fit onto. I wanted to handle the image without having any size restraints. To optimize the image after it’s in Photoshop, I went to File –> Export –> Save for Web (Legacy). This is what you should see. 

If you look at the lower right-hand corner of the top window, you should see that the size is the same, 900px by 1200px, but on the lower left-hand corner, you should see that the file is now 172.9KB in size. I saved the image, and below is the optimized image. 

Optimized Image

I know that it’s hard to compare the two because they are far apart, so below, I added both of them so you could see them side by side. 

Left=Original, Right=Optimized Image

Trust me; I know exactly what you are thinking right now. The images look identical, and that’s because they are, or rather they are incredibly similar that they look the same. I can’t even tell the difference. But what I do know is that the optimized image uploaded faster to this post than the original. 

Overall, it is in your best interest to optimize your image if you are going to post them on a website because the loading speed will be faster, and your customers are more likely to continue to use your site.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s