Optimizing Websites for faster load times and higher SEO ranking

WebP is a modern image format that provides superior lossless and lossy compression for images on the web.

Below is an example of a single image rendered in multiple formats to show the benefits of WebP.

File Format – WebP

png ( 645kB ) jpg ( 162kB ) webp ( 47kB – 1270% reduction )
WebP Image comparison photo Image comparison photo Image comparison photo
     
png ( 701kB ) jpg ( 184kB ) webp ( 57kB – 1130% reduction )
Image comparison photo Image comparison photo Image comparison photo

Here’s how to format image presentation using a graceful degrading method. Using the Picture element we set WebP as the first “source type”. If the browser supports WebP then the image will display and no further processing will happen. If the source or WebP fails then the Jpeg source is tried. If that fails then the traditional “img src” method is used: 

<picture>
     <source type=”/image/webp” srcset=”images/Petes_Retreat-webp.webp”>
     <source type=”/image/jpeg” srcset=”images/Petes_Retreat-jpg.jpg”>
     <img src=”/images/Petes_Retreat-png.png”>
</picture>

PNG Image comparison photo

Results:

FireFox Icon
Firefox
Chrome Icon
Chrome
Safari Icon
Safari
WebP Image comparison photo WebP Image comparison photo Jpeg Image comparison photo

How does this help SEO? Trends point to Search Engines providing better ranking for websites that render faster due to using efficient coding and image formatting options. There are many aspects that go into the determination of which websites are shown when people use Search Engines. Content is still very important. Credible links to your site also add to the benefit as does a fast server such as a Dedicated Server over a Shared Server where a website is mixed in with thousands if not millions of other websites.