Serve images in next gen formats что это

Serve Images in Next-Gen Formats

My ranking from Google Page Speed insights is being severely penalised because of:

«Serve Images in Next-Gen Formats» more info on Google’s help page here.

However, according to this, this and this those formats are supported very few browsers.

What do you do in this scenario? What

7 Answers 7

element to deliver a WebP image to users with browsers that support it, falling back to a JPEG or PNG for those that don’t. The advantage of using the

element rather than other fallback methods is that browsers that don’t support the element will fallback to whatever source is defined in the tag.

If you’re using WordPress there are plugins that will automatically generate WebP images from your media library and include fallback functionality. The only one I’ve used is WebP Express but it served me reasonably well when a client was alarmed that their 100/100 PageSpeed Insight score took a nosedive to 30 overnight with the Lighthouse roll-out.

This does feel like another way for Google to push another propriety technology but then WebP compression is quite impressive compared to other ‘next-gen’ formats.

WebP is the one that currently has broader support, pretty much all major browser except Safari support it.

As colossalyouth mentioned on one of the answers you can use the picture tag to load webp images and in the case is not supported it will fallback to any other format you choose.

And if you are using background-image you can use something like modernizr to detect feature support by the browser and end up with CSS like the following:

I have actually done both things on my website and successfully implemented webp formats, I have created a detailed post on how I did it and the performance gains I had you can check it out here: Improve your website speed performance using next-gen formats

Until major browsers support those next-gen formats, it’s probably best to continue using JPG/PNG, as they have wide-spread support. Most websites do indeed use JPG & PNG and it will take some time till browsers are in-line with next-gen tech.

You could always use an image CDN like ImageEngine. Full disclosure I work for the company behind ImageEngine.

It acts as a pull based CDN and will automatically transform your images to WebP or JPEG-2000 if the end users device supports that format. It will also automatically apply compression and resizing to further optimize your image content, but it will definitely help with your page speed.

You can sign up for a free trial and see how that improves your Google Page Speed score.

You can use a tool like https://www.imagecompress.org/ to convert your current image formats, and follow the example to update your old tags https://www.imagecompress.org/examples.

I recommend you to use «Enhanced Media Library» plugin if you’re a wordpress user. It will simply allow you to directly upload Webp images without configuring anything manually.

WebP format will load faster and consume less cellular data. Anyone can work with the format and suggest improvements in WebP open source.

attribute can be used to load alternative image file formats that might not be supported in all browsers. For example, you can serve an image in WebP format to browsers that support it, while falling back to a JPEG on other browsers:

Note: The element is currently available Chrome 38. Try it out with screen emulation in the Chrome DevTools. As per Google, WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web. WebP does not support all browsers. For other browsers, You’ll need to serve a fallback PNG or JPEG image.

If your website is in WordPress. Use plugins that will automatically convert your uploaded images to the optimal formats.

Источник

PageSpeed Insights: Рекомендации по оптимизации веб-страниц

В прошлой статье мы разобрались, что такое PageSpeed и какие метрики он оценивает. Теперь давайте разберем аудиты, которые проводит PageSpeed, оценивая скорость загрузки нашей страницы. Помним, что они несут рекомендательный характер и могут нарушаться в угоду другим требованиям, например, необходимости использования тяжелых сторонних ресурсов.

Eliminate Render-Blocking Resource

Устраните ресурсы, блокирующие отображение. Это относится к JavaScript’у и CSS, которые препятствуют быстрой загрузке страницы. Встречая такие файлы браузер пользователя блокирует поток до тех пор, пока скачивает и обрабатывает файл. Пути решения:

Avoid Chaining Critical Requests

Старайтесь не допускать создания цепочек критических запросов. Концепция Chaining Critical Requests связана с критическим путем отрисовки страницы (Critical Rendering Path) и тем, как браузер загружает страницу. Некоторые элементы, например js и css, должны быть полностью загружены до того, как страница станет видимой.

Эта диаграмма покажет вам ряд зависимых запросов, которые должны быть выполнены до того, как ваша страница станет видимой. Он также сообщит вам размер каждого ресурса. В идеале нужно минимизировать количество зависимых запросов, а также их размеры.

Несколько методов, помогающих улучшить данный показатель, рассмотрены в этой статье:

Важно отметить, что не существует некоего магического числа запросов в цепочке, которого вам нужно достичь. PageSpeed не считает этот аудит «успешным» или «неудачным», в отличие от многих других рекомендаций. Эта информация просто доступна, чтобы помочь вам улучшить время загрузки.

Keep Request Counts Low and Transfer Sizes Small

Постарайтесь уменьшить количество запросов и размеры передаваемых данных. Чем больше запросов браузеры должны сделать, чтобы загрузить страницы, и чем больше ресурсов сервер возвращает в ответ, тем дольше ваш сайт загружается. Поэтому вполне логично, что PageSpeed рекомендует вам минимизировать количество необходимых запросов и уменьшить размер ваших ресурсов.

Так же как и Avoid chaining critical requests этот аудит не может быть «успешным» или «неудачным». Его результаты показываются всегда.

Источник

Serve Images in Next-Gen Formats Easily (WordPress, OpenCart & Magento)

Last updated on Sep 20th, 2021 | 9 min

One of Google PageSpeed Insights’ most common suggestions is to “Serve images in next-gen formats”.

This is also a great opportunity for improving site speed in general.

However, the explanation on why these formats are better isn’t great. Not to mention, there’s no short guide on how to work with them.

And there’s a good reason for that.

Deploying next-gen images formats is complicated. Even Google suggests that WordPress users try a plugin to make their lives easier.

So, if you want to learn more about:

On the other hand, if you just want an easy way to convert and serve WebP images, skip to the end of the article. Not everyone has to be an expert on next-gen images to use them on their website.

What are next-gen image formats?

Most people are familiar with the classic image formats.

JPEG, GIF and PNG have been widely used for years now. We take them for granted, but the truth is that they all have their downsides.

For example, JPEG images are light, but their quality typically isn’t great. PNGs are high-quality but are also larger in size.

This is the classic tradeoff that all of us make when working with images:

Do we want high-quality images that slow down our website’s load speed?

Or do we want lower-quality visuals in exchange for better site speed?

Truth is, there’s no right answer here. It all depends on the situation.

At the same time, most people don’t have all day to test image formats on their site. They simply want good-quality images that don’t add seconds to their load time.

That’s why the web needs a standard or a go-to image format that combines the best of both worlds. And for a long time, that format was JPEG.

Through the years, people have built upon the older image formats by applying modern compression techniques. As a result, next-gen image formats like JPEG 2000, JPEG XR and WebP emerged.

There’s a long technical explanation of why these formats are better, but the gist of it is this:

They have better compression and quality characteristics.

Using modern formats lets us reduce file size significantly while keeping the same quality. And from these new formats, WebP is the closest to becoming the new default for the web.

Why WebP?

Second, WebP is developed by Google. Not saying that anything Google touches turns to gold, but you know the search engine will be happy to see you using this format.

Third, WebP can be used for both images and animated images.

Also, other next-gen formats like JPEG 2000 and JPEG XR don’t have nearly enough browser support to be viable. For example, AVIF may beat out WebP in some categories, but it’s still not supported by Firefox, Edge, Chrome on mobile and lots of other browsers.

In short, WebP is your best bet. That’s the format I’ll focus on for the rest of this article.

For a deep dive on the compression techniques that make WebP special, check out this article by Google.

The Browser Compatibility Problem

So, if WebP is so much better, why don’t we all use it by default?

Well, the big issue with WebP (and most other trends on the web) is browser compatibility. Not all browsers support the same image formats.

Depending on your user base, WebP images might look good for 80% of your audience. However, the other 20% might get a broken image.

You can find the current state of browser support for WebP here.

Source: caniuse.com. Note that the information from the screenshot can change over time. Always check the website for up-to-date information.

As of September 2021, we’re still waiting on the Internet Explorer for full WebP implementation. Safari’s support is also partial, as it’s limited to macOS Big Sur 11 and later.

Because support isn’t at 100%, manually serving this format to visitors is much harder than it needs to be.

Manually Fixing the “Serve Images in Next-Gen Formats” Warning (without plugins)

Put simply, you have to do two things when working with WebP:

Convert your images to WebP (the easier part);

Serve them to visitors (the hard part).

I’ll give an overview of both parts and provide links to detailed guides for step-by-step instructions.

Convert Images to WebP

There are probably hundreds of tools you can use to convert image types.

I’ll go over just a few here, but you can easily find others with a simple Google search.

cwebp command-line tool. If you’re comfortable with command-line tools, this is a good option for simple projects. You can specify whether you want to apply lossy or lossless compression, adjust pixel values and other options.

Imagemin for WebP. This plugin by npm is a better choice if you’re using build tools or build scripts. Again, you can choose between compression types, sharpness, quality settings and lots of other options.

Squoosh. Google built this app a few years back. It lets you compress, resize and adjust quality. Most importantly, it has a slider you can use to compare the image in different formats.

Finally, if you edit and export images with Photoshop, get the WebPShop plugin.

Again, converting images to WebP is straightforward. Just pick a tool you’re comfortable with and experiment with different options.

Now for the trickier part.

Serve WebP Images

In essence, this second step consists of two parts:

Serving WebP images to visitors whose browsers support the format;

Keeping the original image as a backup and serving it in all other cases.

Before we begin, note that this isn’t a complete walkthrough. I’m just covering the different options with a few examples.

If you want a detailed guide on creating and serving WebP images using cwebp, check out this tutorial by Digital Ocean. It covers the whole process step by step.

Use the HTML Markup

The most common way to serve WebP images with a backup is through the HTML markup.

Specifically, we can use the picture tag in combination with the img tag.

Here’s a quick example:

Let’s say we have a JPEG image on our site. Once converted to WebP, we can serve the new version, with the old JPEG as a backup through the picture tag. Here’s how:

Each tag and their order is necessary to get the desired effect.

The picture tag acts as a wrapper for an img tag and an optional source tag;

Browsers that support the picture tag start going through tags, choosing the first resource in a format they support;

This is a relatively simple way to serve WebP images, but it’s not the most scalable.

Again, the idea is to automatically detect compatibility and serve WebP or another image.

Even he says that “a more responsible way is to just use the picture element”.

Content Negotiation

Content negotiation is another way to serve different versions of a resource (e.g., WebP or JPEG), depending on the user’s specifications.

In the context of image formats, web clients can use the Accept header when requesting a resource.

This header indicates which content formats they’re willing to accept. Here’s an example of the Accept header in action:

As you can see, the header clearly states that the browser will accept WebP images.

Different variations of this header are also commonly used to specify accepted languages and encoding mechanisms (gzip, brotli).

A few years back, there were concerns about adding more header bytes on the wire with this method. But with HTTP/2.0 having header compression, the overhead is significantly reduced.

This method also has a long history of potential issues with some browsers. If you want more details, I recommend checking out:

This article by Ilya Grigorik for a deeper dive into the history of deploying next-gen images;

Use JavaScript to Detect WebP Support

The final option is to add a small piece of JavaScript code that automatically detects features like WebP support.

Modernizr is a popular library for the job. It acts as a series of tests that detect which native CSS3 and HTML5 features are available. It lets you take advantage of modern features without leaving users on older browsers with a broken site.

As you can see, serving WebP images isn’t that easy. Lots of things can go wrong, especially on your first attempt.

That’s why you should test the results of your work with a tool like Smartbear’s CrossBrowserTesting. Their “Screenshots” feature lets you easily see how everything looks on different browsers and devices. Plus, it’s really easy to use and part of their free plan.

Other tools (like Browserstack) can also help you get the job done. The important thing is to make this check as easy as possible.

Of course, you can also test by hand, but it takes more time and gets annoying after a while.

An Easy Way to Serve WebP Images for WordPress, OpenCart and Magento Sites

Now, if you want to avoid the hassle of converting and serving WebP images manually, check out NitroPack.

Our service automatically converts images to WebP. It also keeps the original image as a backup and serves it when browsers don’t support WebP.

The best part is that all of this happens behind the scenes. You don’t need to spend any time or effort on configurations.

Of course, you can adjust image quality from the “Advanced Settings” menu:

And this is just one part of our image optimization stack. NitroPack also comes with:

Preemptive Image Sizing, which solves the problem of missing width and height attributes without adding them;

Adaptive Images Sizing (in beta), which makes sure images fit their containers perfectly;

Advanced Image Lazy Loading. NitroPack automatically lazy loads all images, including background ones, even those defined in CSS files. On top of that, our service detects declarations in external files multiple levels down an import chain.

NitroPack also comes with everything else you need for a fast website.

If you’re interested, check out NitroPack for:

Of course, we can’t talk about our service without being at least a bit biased. That’s why we have a Free Plan (no credit/debit card required) for websites with up to 5000 monthly pageviews. You can easily test NitroPack out and see the results for yourself.

Evgeni writes about site speed and makes sure everything we publish is awesome.

Источник

How to Serve Next-Gen Formats on WordPress: Everything You Should Know

If you have run a performance audit on Google PageSpeed Insights, you might have seen the “serve images in next-gen formats” opportunity popping up.

Content is king but the format you’ll use to deliver it on your WordPress site also matters. Next-gen (short for next-generation) formats are a way to speed up loading times for images on websites. They can be loaded in modern browsers with embedded compression information, so visitors won’t have to wait forever.

This article will go over the next-gen formats available and how to serve images in these particular formats on WordPress.

What Are Next-Gen Formats and Why You Should Use Them

Next-gen images offer superior compression and quality. They’re perfect for web use as they take up less data while maintaining the same high level of image quality.

There are two main next-gen formats you can use for your images on WordPress, namely:

Same quality perceived by the visitor – Source: multiplemedia.com

Google PageSpeed Insights also recommends you to serve images in next-gen formats like WebP and AVIF rather than PNG or JPEG:

Serving images in WebP or AVIF to help your page load faster – Source: PSI

What Are the Benefits of Serving Images in a Next-Gen Format Like WebP?

WebP images are around 30% smaller in size compared to PNGs or JPEGs. As shown below, the PNG format does a good job at optimizing images, but it’s outperformed by WebP (the last one).

Images having smaller file size in WebP format – Source: ​​Smashing Magazine

Bear in mind that for most websites, images are the main culprits to slow down your site. Large images not only slow down your site but also increase the weight of the page. This will impact your performance on mobile because a heavy page will take longer to load on mobile networks.

Finally, website speed is a major factor taken into account by Google when determining rankings. If you don’t want to appear on page 5, then remember to optimize your images using a next-gen format like WebP.

Let’s see how to convert your images to WebP on WordPress.

How to Serve Images in Next-Gen Formats on WordPress

The easiest and fastest way to convert images into next-gen formats is to use a WordPress plugin. However, you can also optimize and convert your images manually.

Let’s go over both options.

Option 1 – How to Convert Images in Next-Gen Formats With a Plugin

Like always, using a WordPress plugin saves you a precious amount of time. Even Google recommends using a plugin to convert your uploaded images to WebP or Avif.

PSI recommending WordPress plugins

There are six major plugins you can use to optimize your images and serve them into next-gen formats, namely:

How to Convert Images to WebP Using Imagify

Let’s see an example of WebP conversion using the Imagify plugin. It takes only three steps

Step 1 – Download and install Imagify for free. Activate the plugin and create your API key.

Step 2 – Go to Settings > Imagify and scroll to the Optimization tab.
Select “Create WebP version of images” and “Display images in WebP format on the site” as well as the second option “Use

Step 3 – Click on the Generate missing WebP versions blue button.

Congratulations, you are now serving visitors WebP image formats, as you can see in the WordPress library:

Important note: your newly generated WebP images will not be displayed in the WordPress library. If you want to verify that the conversion was successful, then open the web page showing the image. Then go to the Chrome Developer tab > Inspect element > Network > filter by IMG and look at the Type column.

You should now see the “WebP” format associated with the image.

My WordPress site serving WebP format images thanks to Imagify – Source: Chrome Dev Tools

To learn more next-gen format conversions, we recommend following our detailed guide about serving images to WebP using Imagify.

Option 2 – How to Serve Images in Next-Gen Formats Without a Plugin

If you don’t feel like using a plugin to convert your images to the next-gen format, you can manually add a piece of code. Here are two different options you can follow for your WordPress site.

element in your HTML

tag. In that case, the browser will automatically choose the appropriate file format to display.

The Impact of WebP on Performance

As seen above, you can use the Imagify plugin to convert your WordPress images to WebP, the next-gen format recommended by Google. Imagify also allows you to optimize multiple images by resizing and compressing them automatically (and in bulk).

It would be interesting to run a few performance tests to confirm what we’ve been saying. I’ll run two scenarios:

Performance tools used:

Google PageSpeed Insights and WebPageTest

My test site:

Scenario 1: Performance results with JPEG images (no Imagify)

We start the audit with all my images served in JPEG. On average, their size is 270 KB.

JPEG images and their respective size – Source: Chrome Dev Tools

Now let’s have a look at PSI. I’m getting an orange score on mobile (75/100) and the Largest Contentful Paint score in the red. The LCP score is relevant, especially because the LCP element that affects performance is an image (as it often is). There is room for improvement.

My mobile score (no WebP – no Imagify) – Source: PSI

On top of that, PSI has flagged three images-related issues:

Scenario 2: Performance results with WebP images and “Aggressive” optimization mode (with Imagify)

Now it’s time to convert my 13 JPEG images to WebP and optimize them with Imagify.

To do so, we go to Settings > Imagify > Imagify’em all

That’s it. My images are now optimized and served in WebP. We notice an important drop in the file size. It’s confirmed, WebP makes your images lighter.

Smaller images thanks to the WebP format and Imagify optimization

We can now run another audit on Google PageSpeed Insights to see if my performance has improved with Imagify. The results are great. My score went from 75/100 to 92/100 on mobile!

Improved PSI score on mobile using Imagify

In conclusion, Imagify made our website faster on mobile: the page is lighter, the number of HTTP requests has dropped, and even my load time is much better.

Last but not least, Imagify has also addressed three main issues previously flagged by PSI:

“Serve images in next-gen formats”, “Properly size image” and “Efficiently encode images” are now a passed audit thanks to Imagify.

Wrapping Up

Overall, we’ve seen that serving images in next-gen formats is a great step toward performance improvement. WebP format – along with optimizing and resizing images – is a winning combination to speed up your WordPress site.

The conversion from JPEG or PNG to a next-gen format like WebP is very easy to do with a plugin like Imagify. On top of that, Imagify also compressed and resized our WordPress images, which made us move to a green score on mobile (92/100 on Google PageSpeed Insights). It’s time to optimize your images and to serve them in WebP.

Conduct your audit and try Imagify for free today!

I have six years of experience writing and producing rich SEO content in the WordPress ecosystem. I worked remotely for four years at WPML while traveling the world. Based between France and New Zealand, I love traveling, yoga, sunsets, and world cuisine.

Источник