https:\/\/developers.google.com\/speed\/webp\/<\/a><\/p>\nIf we are using webp format of images on our websites we would also need to have a fallback option for browsers which do not support this format yet.<\/p>\n
First\u00a0option to use onerror event to change webp image with alternate image as following<\/p>\n
<img src=\"assets\/images\/logo.webp\" onerror=\"this.onerror=null; this.src='assets\/images\/logo.png'\">\r\n<\/pre>\nIf your website\u00a0is using HTML5, then easier method is to use <picture> tag which is added in HTML5<\/p>\n
<picture>\r\n <source srcset=\"assets\/images\/logo.webp\" type=\"image\/webp\">\r\n <img src=\"assets\/images\/logo.png\" alt=\"\">\r\n<\/picture><\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
WebP is a relatively new image format which provides lossless and lossy compression for web images. It was developed and released by Google in 2010. Accroding to Google\u00a0WebP format saves around 25-30% of image size which is a big saving for image-heavy sites. Even for normal sites, it saves a lot of network bandwidth and results in overall performance improvement of a web site (in turn a better ranking by search engines). Even though this format has been there since 2010, it is still not supported by all browsers.The good thing is that it is natively supported in\u00a0Google Chrome and the Opera browsers which\u00a0cover for\u00a0bigger chunk of browser market share. For mobile sites this format has become a necessity to optimize load time of websites on mobile. Google provides tools to convert images from one format(png, jpg etc) to webp and viceversa https:\/\/developers.google.com\/speed\/webp\/ If we are using webp format of[…]<\/p>\n","protected":false},"author":5,"featured_media":1539,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,3,24,22,8],"tags":[],"class_list":["post-1003","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-html5","category-javascript","category-quick-tip","category-seo"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=1003"}],"version-history":[{"count":2,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1003\/revisions"}],"predecessor-version":[{"id":1017,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1003\/revisions\/1017"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/1539"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=1003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=1003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=1003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}