It's natural for webmasters or blog owners to expect a perfect score of 100 on the Lighthouse audit in each category, whenever that's achievable. The fact is that a perfect score in each category is achievable, although it may take a lot of effort in the process.
As long as I remember, the appearance of the Serves Images With Low Resolution flag had never appeared before. Mainly after I use srcset on images or photos on the blog. The srcset function is for the browser to download the image with the lowest resolution, according to the screen size of the gadget or computer being used.
This is of course intended to provide a good experience to visitors. Because the sooner the blog is loaded after clicking the hyperlink, the happier the visitors will be because they don't have to wait long. There is a higher probability that a visitor will close a page if it doesn't show up after more than 3-4 seconds.
The sample code on the image with srcset that I have used so far is as follows,
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s1600/legenda-1b.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s3/legenda-1b.jpg" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s320/legenda-1b.jpg" data-srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s1600/legenda-1b.jpg 728w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s400/legenda-1b.jpg 400w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s320/legenda-1b.jpg 320w" data-sizes="100vw" class="lazyload" alt="taman legenda keong emas tmii jakarta" width="100%" height="auto" /></a>
Pay attention to the srcset code, which is no longer satisfactory for Lighthouse audits so that the warning flag was hoisted. It is natural that the audit parameters change from time to time in accordance with web developments, and of course it is intended so that website performance can be even better.
The addition of the "data-" attribute to srcset is done because this blog uses lazyloaded script from lazysizes, which is intended to speed up the loading of blog pages.
What I then did to solve the Serves Images With Low Resolution flag problem was to change the way the srcset was written into scales, with the smallest screen being used as the base scale of 1.
The code in srcset after being changed will be like this,
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s1600/legenda-1b.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s3/legenda-1b.jpg" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s320/legenda-1b.jpg" data-srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s320/legenda-1b.jpg, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s480/legenda-1b.jpg 1.5x, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_xzQU6lUdNwRsMH4U0MH05vCK3kw0zTgqSfOpBq-1FhpVsq5CCrjgg9G7mPuu66Wc5lEOnyYpfv461ZNDXOChMnsO0u_ijNx2SYwbJv4K8wcLLMx4f1rE4TC5Wwvnd0XtQVnaw/s728/legenda-1b.jpg 2x" class="lazyload" alt="taman legenda keong emas tmii jakarta" width="100%" height="66.67%" /></a>
The data-sizes="100vw" atribute is not needed anymore so it's deleted. After changes are saved and performing Lighthouse re-audits, the flags are no longer hoisted and the score is perfect.
The video on how to deal with Serves Images With Low Resolution Lighthouse can be seen below.
Label: Blog Post, Lighthouse, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
