Hi dev.to!
We’re building an image optimization tool called PageDetox. Its purpose is helping to win the Google PageSpeed game.
I want to ask you for URLs to analyze and provide you with optimization instructions to raise your image score up to a 💯.
How does the tool work?
- You analyze a page on autopilot, request a report
- We provide the report together with a personalized workflow for optimizing images
The analyzer is there and ready, while the step-by-step optimization part is work in progress.
Here’s the instruction design we want to start with:
- Upload files to an Image CDN (since we're with Uploadcare, we stick with using that service; if you're a fan of other solutions, pick your favorite. Uploadcare provides a CDN URL that allows applying Image Transformations on the fly, we make use of it)
- Get those CDN URLs
- Replace the
src
attribute in<img>
withsrcset
- Make each version of a source image with on-the-fly transformations taking analyses results into consideration
Check an example below ⬇️
Let's have a webpage that shows two full-width square images. Their originals are:
- https://ucarecdn.com/a120cd8b-4744-4ac6-962c-7b6ee72c3f64/1.jpg — 1 MB
- https://ucarecdn.com/5c27e309-74ef-4a12-8df7-c888c1a468ce/2.jpg — 1.2 MB
If we run Google PageSpeed report, it estimates 9.45s savings on mobile and 1.28s on desktop.
We can manually tinify them with tools like TinyPNG:
- https://ucarecdn.com/c9910252-d656-4b76-b983-aa206ef79af1/1t.jpg — 451 KB
- https://ucarecdn.com/570d5644-bcd8-437f-99b5-14b0e24c748f/2t.jpg — 581 KB
Looks almost the same, but Google still sees room for the improvement: 4.35s on mobile and 0.6s on desktop. Main issue — pictures ae not responsive.
What can we do to serve images better?
- Apply responsiveness:
375
(for width up to479
),980
, and1280
- Change format for
webp
for browsers that support it - Reduce file size even more (we're trying to achieve a size not bigger than
webp(quality=75%) * 1.1
)
Let's use smart processing feature from Uploadcare to those transformations. For 375
breakpoint it will be:
/-/scale_crop/375x375/center/-/quality/normal/-/format/auto/-/progressive/yes/
for x1/-/scale_crop/750x750/center/-/quality/lightest/-/format/auto/-/progressive/yes/
for x2 (Retina)
<picture>
<source srcset="https://ucarecdn.com/a120cd8b-4744-4ac6-962c-7b6ee72c3f64/-/scale_crop/375x375/center/-/quality/normal/-/format/auto/-/progressive/yes/ 1x,
https://ucarecdn.com/a120cd8b-4744-4ac6-962c-7b6ee72c3f64/-/scale_crop/750x750/center/-/quality/lightest/-/format/auto/-/progressive/yes/ 2x" media="(max-width: 479px)">
<source srcset="https://ucarecdn.com/a120cd8b-4744-4ac6-962c-7b6ee72c3f64/-/scale_crop/980x980/center/-/quality/normal/-/format/auto/-/progressive/yes/ 1x,
https://ucarecdn.com/a120cd8b-4744-4ac6-962c-7b6ee72c3f64/-/scale_crop/1960x1960/center/-/quality/lightest/-/format/auto/-/progressive/yes/ 2x" media="(max-width: 980px)">
<source srcset="https://ucarecdn.com/a120cd8b-4744-4ac6-962c-7b6ee72c3f64/-/scale_crop/1280x1280/center/-/quality/normal/-/format/auto/-/progressive/yes/ 1x,
https://ucarecdn.com/a120cd8b-4744-4ac6-962c-7b6ee72c3f64/-/scale_crop/2560x2560/center/-/quality/lightest/-/format/auto/-/progressive/yes/ 2x" media="(max-width: 1280px)">
<img style="width: 100vw;" src="https://ucarecdn.com/a120cd8b-4744-4ac6-962c-7b6ee72c3f64/-/scale_crop/1280x1280/center/-/quality/normal/-/format/auto/-/progressive/yes/"
srcset="https://ucarecdn.com/a120cd8b-4744-4ac6-962c-7b6ee72c3f64/-/scale_crop/2560x2560/center/-/quality/lightest/-/format/auto/-/progressive/yes/ 2x">
</picture>
<picture>
<source srcset="https://ucarecdn.com/5c27e309-74ef-4a12-8df7-c888c1a468ce/-/scale_crop/375x375/center/-/quality/normal/-/format/auto/-/progressive/yes/ 1x,
https://ucarecdn.com/5c27e309-74ef-4a12-8df7-c888c1a468ce/-/scale_crop/750x750/center/-/quality/lightest/-/format/auto/-/progressive/yes/ 2x" media="(max-width: 479px)">
<source srcset="https://ucarecdn.com/5c27e309-74ef-4a12-8df7-c888c1a468ce/-/scale_crop/980x980/center/-/quality/normal/-/format/auto/-/progressive/yes/ 1x,
https://ucarecdn.com/5c27e309-74ef-4a12-8df7-c888c1a468ce/-/scale_crop/1960x1960/center/-/quality/lightest/-/format/auto/-/progressive/yes/ 2x" media="(max-width: 980px)">
<source srcset="https://ucarecdn.com/5c27e309-74ef-4a12-8df7-c888c1a468ce/-/scale_crop/1280x1280/center/-/quality/normal/-/format/auto/-/progressive/yes/ 1x,
https://ucarecdn.com/5c27e309-74ef-4a12-8df7-c888c1a468ce/-/scale_crop/2560x2560/center/-/quality/lightest/-/format/auto/-/progressive/yes/ 2x" media="(max-width: 1280px)">
<img style="width: 100vw;" src="https://ucarecdn.com/5c27e309-74ef-4a12-8df7-c888c1a468ce/-/scale_crop/1280x1280/center/-/quality/lightest/-/format/auto/-/progressive/yes/"
srcset="https://ucarecdn.com/5c27e309-74ef-4a12-8df7-c888c1a468ce/-/scale_crop/2560x2560/center/-/quality/lightest/-/format/auto/-/progressive/yes/ 2x">
</picture>
The result is here:
#1 | x1 | x2 | #2 | x1 | x2 | |
---|---|---|---|---|---|---|
375 | 10 | 35 | 12 | 43 | ||
980 | 59 | 209 | 70 | 232 | ||
1280 | 99 | 320 | 110 | 357 |
Load time is also faster: 24% on desktop and 86% on mobile.
Google is happy now. Technically, 1280 images can be improved even more, lowering the resolution, but we probably don't want to lose any more quality, and Google already shows 100/100 for the desktop.
Important P.S.:
HTML code seems to be huge, but it's very easy to automate, and there are few big advantages to this particular method:
- It renders faster because you don't need to wait for JavaScript to be downloaded, parsed and executed.
- It's much more accessible, SEO friendly and meaningful for apps like Pocket. That's because you use native HTML elements instead of relying on
<div>
s or something like that plus custom JavaScript.
So, shoot me your page URL in the comments. I’ll be supervising each set of instructions and ask what was unclear/going wrong, a custdev kind of thing.
If you’ll have any feedback regarding the app’s flow, I’d appreciate you sharing it.
Thanks!
Top comments (2)
tinkoff.ru/
Here is a comparison of tinkoff.ru to the top 500 financial services sites — (I've run tinkoff.ru 10 times to get the average because Lighthouse report is highly fluctuating).
What stands-out:
That leads to the 72% desktop Performance Score, which is 53% better compared to the niche average! But the mobile score is only 25%.
To fix mobile performance, Lighthouse suggests optimizing offscreen images, converting all images to webP, and making them more responsive. It's also interesting that it doesn't suggest quality optimization.
Our model predicts that this will improve mobile Performance Score by 8, up to 33%.
Just in case, here is a checklist with key image optimization techniques.