How to Optimize Images for the Web

Image Source: Pixabay

Images make our content more engaging. Rich media forms the core of every modern website. We are so used to add images to our projects that many times we don’t take into consideration the size, format, and quality of the images we add. 80% of marketing professionals use visual assets in their social media marketing. Optimizing the images has a positive impact on our page load speed and our page ranking. In this post, I’ll cover what is image optimization, its importance, and how to do it right.

What Is Image Optimization?

It is the process of delivering high-quality images while keeping the smallest possible size. The goal is to tweak and adapt the images to bring the maximum quality in terms of the format and dimensions while minimizing their weight.

The main methods for image optimization are resizing, caching or compressing. Resizing means to play with the ratio size vs quality to achieve the smallest size with the highest quality.
Caching refers to the process of storing image files within the browser cache, allowing for fast and easy access. This method reduces the page’s load time. Achieving image optimization presents a number of challenges, including finding the right number of images to avoid “overloading” the user.

Why Do You Need To Optimize Your Images?

Almost half of the visitors to a website expect it to load in less than 2 seconds, leaving the site if it takes more than 3 seconds to load. According to the book Usability Engineering, a web page should ideally take one second to load, giving the user the feeling they can navigate it easily.

Image optimization helps improving page load times, therefore helping your website ranking higher in Google searches, since the search engine is penalizing slow websites. Besides, a light, attractive and easily available website improves the user experience, increasing the time spent at your site. In summary, optimizing the images in your site help you improve the following areas:

Page load speed
Many factors contribute to your page load speed, one of them consist in up to 64% of the website’s weight, the images. Therefore, minimizing the weight of the images equals to improve your website load speed. You can use tools such as Google’s PageSpeed Insights to check your page’s speed.

SEO Ranking
It’s been quite a few years since Google made clear to everyone that will prioritize faster websites in the search results. Achieving the golden triangle of the page search is the goal of every digital marketer. Thus, image optimization is a critical tool to improve your SEO ranking.

How To Optimize Your Images For Web

We made it clear that optimizing images is relevant and necessary to achieve customer conversion, permanence on-site and good page rankings. These are the essential steps to achieve image optimization:

#1. Make a baseline
First, you should run a speed test on your site, to benchmark your current site speed. This will help you to see to what extent you need to improve.

#2. Name your images right
It is important to name your image with relevant keywords so you can help your web page rank on search engines. Descriptive and clear names are crucial for image optimization, as it helps crawlers find your image file names, thus finding your website.

Consider the image below, for example. You can leave it with the original filename Image19.jpg or you can name it 4 bedrooms cottage lake.jpg. Using relevant keywords in the filename can help customers find your image if looking to rent a lakeside house for summer. The keywords used in your filename will reflect the search patterns of your customers.

Lakeside Cottage - Image Source: Pixabay

#3. Choose the right image file type
Not all image types are equal, with the most common being JPEGs, PNGs and GIFs. They all have their pros and cons when placed on your website.
JPEG/JPG—used for photographs and complex, colorful images.
GIF—commonly used for animations, as well as for logos and icons, or low-profile images with basic colors.
PNG—best used when you need images with transparency as they are larger than other formats.
SVG—scalable vector graphics can be used in place of PNGs, with a smaller file size.

#4. Resize before exporting
This one of the simplest ways to optimize images for the web. Many websites work with raw images, and neglecting to resize makes you end with images that are larger than necessary. Cropping your images before uploading allows you to decrease the file size. Any image-editing software can help you with this task, such as Photoshop or Canva.

#5. Compress the images
After you have your image saved in the right format and cropped to an appropriate size you can take the opportunity to compress it, reducing its weight even further. There is a catch though, as compressing images usually damages their quality.

There are two main compressing methods:
Lossy—a filter that eliminates some of the data to compress the image. The image can be reduced by a large percentage. However, since the filter degrades the image you need to be careful with the compression percentage.
Lossless—a filter that compresses the data, without reducing the quality. However, it does not allow for large compressions.

#5. Automate image formatting with DAM software
Digital Asset Management (DAM) software not only helps to organize and find an organization rich media easily, but can also format product images according to policies configured by the marketing team. Image formats can be responsive to devices or based on customer profiles. Automating image formatting cuts on time and costs, helping organizations to keep the website updated with the images optimized.
#6. Optimize thumbnails
First you should ensure your thumbnails fit the windows easily. That being said, thumbnails don’t need to be the best quality, so you can go for a GIF, saving a lot of space and weight. This is especially useful for catalogs and eCommerce sites with thousands of thumbnails.

Tips and Tricks for Image Optimization

After you have successfully optimized your images following the above steps, you still can use some tips to up your game further.

#1. Use unique, content-relevant images
An appealing image that connects with the user at an emotional level has more chance of engaging the reader than a standard stock photo. For SEO purposes, it is even better to add your own image, specific to your company or product. A unique image will rank higher than the same old free image present in a thousand other pages.

#2. Export images as “Progressive”
This feature allows the browser to load first a simple version of the image before loading the full resolution onto the site. This is especially useful for mobile sites to avoid “losing” images from the mobile view.

#3. Caption wisely
A concise caption is a valuable tool that can be crawled by search engines. That means that if we captioned the above picture: “4 bedroom house on the lake for rent”, everybody looking for a house for the summer will find your page listed in the search results.

#4. Use “Alt Text” to help users access your images
While often overlooked, the alternative text field helps users with an accessibility description of the content of the image.

The Bottom Line

Getting to the coveted golden triangle of the search results can be difficult but worthy when you see your organic traffic increasing. To achieve this goal, you should ensure your page loads easily, and your images are relevant and engaging. This will help better your user experience. Image optimization is therefore one of the simplest and most effective tools to achieve an attractive and functional website.