6 ways to optimize images for better web performance

Humans are visual creatures, and research supports that fact. After only three days, retention rates for text are within the range of only 10%–20%. But for images, retention rates can be as high as 65%.

The brain receives 90% of visual information and processes it 60,000 times faster. Without a doubt, visuals play a critical role in website engagement.

However, it takes a lot more than just picking out some images and placing them around your site. Heavy images consume a lot of bandwidth, slowing down page-loading speeds. Search engines will notice the slow performance and penalize you with a low ranking.

Image optimization tips for better web performance

Let's say you design websites for non-profit organizations and you like to use a lot of images to showcase your work. Donors, sponsors, and other stakeholders use such information as a basis for continued support.

However, if you do not optimize the images, the user experience and engagement will suffer. The biggest issue will be the slow loading of pages and timeout responses.

Image optimization refers to any steps you take to reduce the files' size, format, or resolution. You can do this without compromising the quality of the images.

Let's check out some of your options.

Marketing Campaign Illustration by Deemak Daksina

1. Start with an image optimization audit

An image optimization audit will provide relevant information for where you need to improve.

For example, the audit may show that you have too many images. It will also show your image formatting and allow you to determine the next course of action. For instance, removing or changing the file formats may significantly improve page loading speeds.

2. Choose the right format for the images

Image files come in different formats. These are the three most common types of image formats for web applications that you need to know:

• .png has the advantage of being a very high-quality image. Unfortunately, to achieve this, the file size is very large. They work well for simple images and logos and allow for lossless compression.
• .jpg are the most common across most websites. They are excellent for complex, colorful images. However, you’ll need to be careful when compressing .jpg images as loss of clarity can result, the smaller the image becomes. Some people refer to this as lossy.
• .gif works for animations, small icons, and low res images. It allows for lossless compression, but you can only use up to 256 colors.

Save Icons by Andreas Storm

3. Resize and compress the images

You may have noticed that the images seem to load bit by bit. Some time will pass before you get to see the full image; a sign that the pictures are probably too heavy. Resizing or compressing will take care of the problem.

Use the cropping tool to resize the images. It helps reduce the file size, resulting in a better page-loading speed. You have tons of tools available for your use.

Compressing images helps reduce the file size. But you can distort the image if you compress it too much. Low compression may be ideal if you want to retain the picture quality; however, it does not significantly reduce the size. :

Types of compressions

There are two concepts we have already mentioned above, lossless vs. lossy compression.

• Lossless compression maintains picture quality while removing unnecessary metadata.
• Lossy compression reduces the file size by getting rid of some of the elements. It may compromise the picture quality. You may, however, not notice the difference. So, it can still be an excellent way to compress images.

The right picture editor will help you determine which compression works best for you.

4. Mobile-first image optimization

Any steps you take must follow a mobile-first SEO strategy, since Google switched to mobile first rankings. The images should look the same on any mobile device as on any desktop device. A tremendous amount of internet traffic comes through such devices.

If the users are not engaged with a good UX when using mobile devices, you will lose them.

ASO Optimization by Abbi_Kerimov

5. File names and their impact on SEO

Image optimization also requires you to pay attention to how you name the files. All the actions you take should have the aim of improving visibility on the search engines.

When you upload or take a picture, the device will automatically give it a filename. This name typically comprises random code or numbers. It may look something like 2224444.jpg.

Uploading the picture as-is on your website will not help the search engines at all.

6. Consider using lazy loading

The lazy loading of images is exactly as the name suggests. Instead of the whole image loading at once, it kind of unfolds. The image continues to load the more the online visitor scrolls down the page.

Lazy loading reveals only what is relevant at that point. You’ll end up saving on bandwidth because you won’t be using any unnecessary resources.

Loading... by Dona

Final thoughts

Web performance is a critical ranking factor that search engines use. Google will penalize your site if the page loading speeds are low.

Many factors determine page speeds, and image use commands one of the top positions. If you do not optimize images, your web performance will suffer. The pages will load slowly, and the user experience and engagement will not be good.

Choose the right image format. Next, use techniques like resizing and compressing to reduce the file size. Schedule regular page tests and site audits to check the performance of the site.

Linearity Curve (formerly Vectornator) can handle .png, .jpg, .gif, .svg, and more image formats. You can also use Linearity Curve to create your own illustrations from scratch using vector drawing tools.