1 / 9

Optimize Your WordPress Website by Serving the Next-Gen WebP Images

In this digital age and the times of uber-speed, we tend to despise everything that is slow. This applies to websites too. How many times have you experienced that you leave the websites that take longer to load? Thereu2019s a report by Google which stated that around 70% of webpages take more than 10 sec to appear on the screen.

luishmahida
Download Presentation

Optimize Your WordPress Website by Serving the Next-Gen WebP Images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Optimize Your WordPress Website by Serving the Next-Gen WebP Images Created By : Global Vincitore

  2. In this digital age and the times of uber-speed, we tend to despise everything that is slow. This applies to websites too. How many times have you experienced that you leave the websites that take longer to load? There’s a report by Googlewhich stated that around 70% of webpages take more than 10 sec to appear on the screen. If you have a website, you have a short window of 15 sec to entice your visitors.

  3. What is WebP Image? Introduced in the year 2010, WebP is an image format which provides lossless and lossy image compressions. It uses predictive encoding to compress the images on the internet. WebP is supported and used by the tech giants including Google, Facebook, YouTube and Pinterest among others. It has been found that the WebP lossless version of an image is 26% smaller than its PNG counterpart and the WebP lossy image is 25-34% smaller than its JPG version. Lossless WebP also has the feature of transparency with a few extra bytes added.

  4. The Challenge: Despite making the web faster, there are a few drawbacks of using WebP. All the web browsers do not support this format yet. WebP is currently supported in Google Chrome, Firefox, Opera, and Edge and is yet to set forth in Safari and Internet Explorer. But with the internet giant Google, having its back, those days are not far when WebP will be found everywhere on the internet. Google displays the message “Serve images in the next-gen format” if you have used Google Page Speed Insights and this is how Google is supporting the use of WebP formats.

  5. How to Add WebP Images in Web Application: If you fall into the category of the innovators, implementing the next-gen images into your website should be your next step towards getting ahead. Now when you head to your WordPress media library to add images in this format, you will notice that the library won’t support this format. But it does allow you to add WebP images. This can be done by using WebP converter to transform your existing media into WebP format. You can also check if the visitors’ browser allows loading this image format and alternately serve its equivalent JPG or PNG in case it does not support.

  6. How to Provide WebP Images for WordPress Website: • Using JavaScript to Check for WebP Image Support: • A JavaScript code can be written and added to your website which will decode a WebP image format. If this runs successfully, that means, you can keep adding WebP images. Alternately, you can make the use of JavaScript library Modernizer to check the support for WebP images. • Adding such a JavaScript code comes with a futuristic benefit. If the browsers which don’t support this format now become compatible in the future, you don’t have to rewrite your existing code to include them.

  7. 2. Using “Accept” Header: • In this method, the browser of the visitor will send a header containing the information of the image format that it supports. If the “accept” header reverts with this information, you can send the WebP images to your visitors. • 3. Modifying the Hypertext Access File: • The hypertext access file is present in the root directory of your website. It is hidden unless if made available explicitly. It doesn’t have any file extension and unless you don’t know how to use it, don’t even try as it may result in severe consequences for your website. • You can rewrite this file in WordPress to change the URL of the image by adding a webp extension. By doing so, if the visitor’s browser has WebP support, the images will be loaded in WebP format else it will show the JPEG or PNG version of the image when not supported.

  8. 4. Making the Best Use of HTML5: • You can use the picture tag available in HTML5 to the best of your advantage. It lets the browser choose from a variety of formats to serve from. Using this tag, you can also serve different sizes for different devices like mobiles, tablets or desktop.

  9. Connect With Us • Global Vincitore • Address: 407/408 SCARLET GATEWAY, Corporate Rd, Opp. Rivera Antilia, Prahlad Nagar, Ahmedabad, Gujarat • Website: https://www.globalvincitore.com/ • Email: info@globalvincitore.com • Content Source: Global Vincitore

More Related