1. Use the right format.
The right format depends on the type of image. Basically, each format uses different compression methods. Here are some accepted guidelines:
- Choose JPEG for photographs.
- Use PNG for illustrations, graphs, or anything with text.
- Use SVG for icons or logos.
- or, use WebP instead of JPEG and PNG. It uses a superior compression method, but it’s only supported by Chrome and Opera. Refer to Google’s WebP documentation to learn more about it.
- Use GIF for animations
2. Choose the right file name.
Create a descriptive name for the image file.
For example, if your image shows a Boeing 777 seat map, the file name should be boeing-777-seat-map.jpg.
3. Use descriptive alt text for images.
Alt tags describe images when they fail to load and the visitor is using a screen reader.
For example, here’s the HTML syntax of the Boeing 777 seat map image would look like:
<img src=”boeing-777-seat-map.jpg” alt=”Boeing 777 seat map”/>
4. Resize images according to the page dimensions.
Upload images in the maximum width needed rather than in the original full size.
If you upload an image wider than the maximum width of its placement, the browser will still load the image in its full size, which may be detrimental to page speed!
5. Reduce file size.
Make sure that the image is compressed so it is served in the smallest file size possible. Google recommends several open-source tools to help with this:
6. Create an image sitemap.
There is probably an XML sitemap for pages on your site already. Consider creating one for images too!
This is coming straight from Google: Images are an important source of information about the content on your site. You can give Google additional details about your images, and provide the URL of images we might not otherwise discover by adding information to an image sitemap.
Learn more about the technical requirements on Google’s documentation for creating image sitemaps.
7. Implement lazy-loading for images.
Basically, lazy-loading makes images load when they need to be loaded.
In Google’s words: Lazy loading can significantly speed up loading on long pages that include many images below the fold by loading them either as needed or when the primary content has finished loading and rendering.
8. Use a Content Delivery Network (CDN).
Airlines customers are spread all over the world, so it’s a good idea to serve web files from the closest server to them. A CDN can help with that. Here are a few recommended CDNs:
Because CDN URLs typically look like xyz.cdnprovider.com, we recommend using the airline’s domain or subdomain via a new CNAME record. This will host images on the airline’s domain and prevent potential broken URLs when changing CDN provider.