Optimizing images in a website is critical for performance and speed, and it’s well established to be a ranking factor for SERPs. Image optimization should always be done as images are being imported into a website.
Measuring an Image's Size
When referring to an image's “size” there are actually two different types of image size that we are concerned with in web development:
Image Size
This measurement pertains to the physical dimensions of an image. For example, an image can be 4 x 4 inches. An image can also be 1500 x 1500 pixels. Regardless of the unit of measure (pixels, inches, feet), image size is the physical space that an image takes up on screen.
Image File Size
This is the measurement we are concerned with when it comes to optimizing images. The file size of an image is the amount of hard drive space the image takes up on a storage device (like a server, or a USB thumb drive). For example, an image can require 50KB or storage space, whereas a very large image might require 12MB.
Why is Image Optimization Important?
When an image is large in file size, there are many negative effects this can have on a website’s performance. Whenever a web user opens their browser and goes to a website address, their browser looks up the server that the website is hosted on and connects to it to download all the files and resources required to display the website.
All of the website’s resources must be downloaded in order for the website to load, display nicely, and function. These resources consist of images, fonts, HTML, CSS, and JS to name a few.
For an example, here’s a page speed analysis of the Americaneagle.com website.
Each line of the pictured waterfall graph is a “resource” of some kind that the Americaneagle.com site needs to load properly.
The larger an image is, the longer it takes the browser to download from the server. If a website has many large images packed into it, the load time exponentially gets longer.
Therefore, for a website to load quickly and perform efficiently, we want to compress our image’s file size as much as possible so they download faster when a user visits.
This is especially true in today’s mobile age. Users may not always be connecting to a website with a terrific signal. Think of the last time you tried loading a website at a crowded sporting event or concert, or when you were in a bad reception area. Did you get frustrated because it took forever? Compressing images can help visitors access websites even under less-than-ideal circumstances.
How to Optimize an Image
The following steps can be used for compressing any image. For this step through, we are going to optimize an image from the Envato Elements account.
The above image, like most stock imagery, is massive. It is 5701 x 3801 pixels, and its file size is 10.4MB.
Uploading such a large image to a website’s homepage could realistically cause the website to take up 8 or 9 seconds to load.
So, let’s compress it without losing quality:
Step 1: Manually Adjust the Size
The first step is to make the image size smaller. We definitely don’t need to have an image that is 5701 pixels wide.
- Open a browser and go to PhotoPea: https://www.photopea.com/
- File > Open
- Load the image you want to compress
- Image > Image Size
- Change the width of the image to something smaller and more realistic
In our sample above, we sized the image down to 1200 pixels wide. Notice how the height automatically scaled down appropriately as well so that the image retains its shape and does not become distorted.
- Hit “Ok”
- Save your image with a new name
- File > Export As
Step 2: Compress the Image’s File Size
Now we need to bring the file size of the image down. Scaling it down in size to 1200 pixels wide helped significantly – the newly sized down image is 105KB. That is 100X smaller than before. Let’s make it even better:
- Open a browser and go to TinyPNG: https://tinypng.com/
- Drag and drop your file into the box to the right of the Panda’s head
- Download the newly compressed image
Final Image
You can see that the image compressed further down to 97KB without losing any image quality, and it is now in great shape to be imported into the page layout of a website.
Compressing and resizing images are just one way to ensure your site has faster page load speeds and it’s important to take a comprehensive approach when optimizing your website. For a full look at your site’s performance, contact one of our experts here.
