10 Must Known Image Optimization Tips for SEO and Website Performance

Images are the expensive assets next to videos, which contribute to the page size and page speed of the website. Larger an image takes longer than it takes to download by the browser to display the page. The image takes up the majority of your page and carries weight. Let us see in detail about what are the types of image format and where to use the image and how to optimize image for SEO and to improve website performance.

There are two types of images: Raster images and Vector images. Raster images (Jpg, Jpeg, Png, WebP) are the result of images taken from the camera or scanner. Vector images(SVG) are images made up of lines and curves.

1) Choose Right Image Format:

Depending upon the need for the website choose the right image format. 

1. WebP – next-gen image format is the best format alternative for JPJ and PNG. And it supports both lossy and lossless compression. But WebP image format is supported only by the modern web browser. Still, you can use them by using another image format as fallback via img src attribute.

Example:

<picture> 

<source type=”image/svg+xml” srcset=”Puppy.svg”> 

<source type=”image/webp” srcset=”Puppy.webp”> 

<img src=”Puppy.png” alt=”Little Brown Puppy”> 

</picture>

1. If your website is about photography and needs a high-resolution image. You can choose PNG. But be judicious. Because PNG Images are larger in file size and do not apply lossy compression. It results in the highest quality image.
2.  Use the JPEG image format for optimal use. It consists of both lossy and lossless compression and you can find the right balance which meets the right quality and file size.
3. Use SVG image    
4. Use Video format instead of animated GIF formats. GIF creates a larger file size than videos.

2) Choose Image CDN to host images: 

Whenever an image is requested from the browser instead of getting from the server, it can get the cached version of the image from the nearest Image CDN. So it takes the load off from the server and decreases the loading time. Also, one of the biggest advantages of Image CDN is, it provides optimized and responsive images depending upon the requesting device. An image CDN URL not only provides the information on which image to be loaded but also generates dynamic size, format, and quality depending upon the browser. For modern browsers, it automatically serves WebP format and for others, it serves other optimal image formats.

3) Choose Image Sprites to reduce HTTP Request:

Websites with multiple images take a long time to load from the server and generate multiple HTTP requests. Image sprites help to put all the images into one single image and show only part of the image which is needed.

Practically not all images can be loaded as image sprites. But some of the images used on websites like social sharing icons are loaded using image sprites.

4) Choose Lazy-loading Images:

Lazy loading is the process of loading the resources on demand. Critical resources are the elements that are necessary to load the page. Whereas non-critical resources are loaded only at the moment of need. So lazy-loading images help to lower the initial loading time and page payloads of the website. 

5) Choose the right quality photo and right compression technique:

Create your own image and have some personal touch for your brand. The high quality fresh images always attract the user on your website. You can also opt for stock photos. But if it is a custom image you probably get a chance for getting backlinks, when someone is looking to use your image. At the same time with high quality images, the file size will be high. You need to choose the right compression method to balance image quality and file size.

6) Use Image sitemap: 

If you are using several products on your website, adding it in a separate image sitemap helps the search engine to crawl and index all the product images. It improves the chances of being listed on image search results. Be sure to include a unique title and description for the image page to be included in the image sitemap.

7) Use Descriptive and Relevant Title, Meta Tags and Alt text:

Always use the image relevant to the content of the website. It is always good practice to use a unique title, description and descriptive alt tag for the image. Google takes information from these sources and automatically generates the title and description for the image relating to the user query. 

8) Choose image host page into AMP:

Images are important assets of the website, if rightly used you can drive quality traffic from Google image search results. Users directly visit image search when they look for products, recipes and compare instead of visiting web pages. Google has brought up Amp pages in mobile image search to help the user to load images quickly and smoothly. To take the full advantage of image search, add the image pages into AMP.

9) Use Appropriate structure data: (prominent badges)

Google image supports structure data for recipes, products and videos. You could see prominent badges for the images depending upon the content of the website. This helps the user to know about the page without clicking on it. Adding images with appropriate structure data increases the chances of getting displayed in the search result and brings in more targeted traffic to the website.

10) Adding Images in markup and CSS:

Search engines can crawl and index when the images are used in markup-HTML. But you can take advantage of CSS background property to load complex and multiple images. It is powerful in making responsive backgrounds.

The Bottom Line:

Choose the right image that is relevant to your content and right image format and right optimization technique that suits your website needs. By carefully handling images on the website it helps to improve website performance and page loading time.