now avif has landed.
thanks to Squoosh it's quite easy to optimize all images and convert to multiple formats for using into a picture element or as a background with the help of Modernizr .no-avif and .no-webp classes
ATM I'm using all three (avif/webp/jpg) for production websites, at least in the hot path.
Those with SVG icons are my actual image strategies. What are yours?
I'm not at all impressed with the loss in quality vs the original.
My current image strategy is quality over file size and page load speed because...
1) Virtually all my clients are served by either 4G or high-speed internet (100 mbps is actually considered kinda slow in homes here), and the difference between loading a 200k, 100k, or 20k image with such high speed service is almost imperceptible (unless there are dozens of images on the page.) 2) lazy loading 3) 5G will be here sooner than these new compressed image formats gain universal adoption in browsers and widespread interest among developers, rendering the entire issue of image size moot.
Since Google released their Page Speed Insights tool, and announced that loading speed would be a ranking metric, everyone has gotten all hot and bothered over getting good mobile scores. The thing is, Page Speed Insight's mobile score is based on an emulated 3G network mobile network, while most of the developed world is on already on 4G. Furthermore, their tool often makes no logical sense. You can do a test where a page loads in say, 5.5 seconds and they'll advise you that you could save 9 seconds by loading images in next-gen formats. HUH??? So the site would time travel to load before you visit it? And, you can test the same site four times in an hour and get four different scores.
Lastly, I have never had a problem getting my client's websites to outrank my competitors regardless of what images I've used, so page load, if it really does factor into SERP ranking, is pretty minor. Most of my sites rank on Page Speed Insights in the 50-75 range on mobile, and 90 and above on desktop. I have RARELY found a Wordpress site that loads faster than 40, and Wix sites are usually in the 10-20 range. And this is what the web is FILLED with.
The main concern is, does your site load fast enough to not cause people to bounce? It is getting traffic, and converting visitors to customers? That's it. If my site's are getting the job done, why should I care about saving a half second to load three different images to accommodate three different screen resolutions, or connection speeds. It's all overkill and it won't even matter in a few years.
Decades ago, when a 20 meg hard drive cost $1000, I used to have a program installed on my Amiga that literally compressed and decompressed every single file written to the drive simply to maximize the storage space. Does ANYONE care about storage space anymore? You can get a five TERRABYTE drive for a hundred bucks!
It's only a matter of time before the issues of image compression, accelerated mobile pages (AMP), website page size, bandwidth and data rate will be just as irrelevant as storage. This stuff matters to Google because it costs them money, so they want to make us believe it's crucial that we have the smallest, most compressed, most efficient, fastest loading websites, or we're all going to lose page rank, and traffic and clients, and it's all bullcrap.
I’m not at all impressed with the loss in quality vs the original.
Wepb and avif give much better quality than jpeg, Even when MozJPEG coded.
'original' images (uncompressed) are huge, often many megabytes large. For me reducing a 4 MB image to a 200kbytes file means a faster loading site.
.
5G will be here sooner than these new compressed image formats gain universal adoption in browsers
Webp is already widely supported (usage relative) and AVIF has gone live in chrome, so in the next few weeks will be supported by the majority of users. And jpeg is a standard. Better use a serious compressor (MozJPEG) than a lousy one. You can see the difference with squoosh
for me, the picture tag is the actual best choice for critical images. And the quickest way to make a fast site even faster. Or if you prefer you can offer a much better visual quality at the same size.
Even with 4g / LTE real speed, a few megabytes mean seconds. Why don't offer a higher visual quality and faster site at the expense of a picture tag and offering 3 images instead of one?
.
2) lazy loading
ok, that's a good point.
@marcco
I think you misunderstood. I'm not suggesting serving totally uncompressed files. If I can get a 2mb jpg down to 200k in Photoshop with med-compression and no real visible loss in quality, of course I'm doing it. But I'm not going to go to 100k with lo-compression if it means artifacts, blurry spots and pixelation.
Here's an example. A local barber. He's not getting visitors from some rural town in Kansas that's still stuck with 56k dial up. He's in L.I., NY which is ALL high speed internet.
http://aceofcuts.com/
This page has a lot of images, including a slideshow. Google Page Speed insights scores it 67 mobile and 90 desktop (not terrible, but could be improved by their standards.) Before I put the Covid notice with the slideshow on the page, it was about 83 mobile, which Google considers good.
Google says, "time to interactive" is 6 seconds on mobile. This is on a simulated 3G network (which again, nobody I know is using.)
When I cleared the cache on my 5 year old Droid turbo and loaded this in Chrome on Verizon's 4G network, the page was up in less than a second. Same exact thing on my desktop, which is 200mbps cable ISP.
Less than a second.
So what's the point in my going to all the trouble of creating different sized images, adding extra code to detect screen size, etc when its not going to make one bit of difference in the user's experience?
@printininja said: If I can get a 2mb jpg down to 200k in Photoshop with med-compression
I was talking about that. Photoshop is part of the problem with its under par compression standard. And no modern image format support
the same image that you compress into a 200k jpeg in photoshop can be compressed to 150k in MozJPEG (it's a 'regular' jpg just created with a better encoder) or to a 100k Webp or to a 40k AVIF
same quality, much better compression.
. But I’m not going to go to 100k with lo-compression if it means artifacts, blurry spots and pixelation.
obviously starting from your already photoshop-compressed image is not a good choice. But please check this: https://bold-flower-2605.bss.design/ there's no problem reducing the size just using a modern jpeg compressor or a better, modern, image format.
That said, with small (200kbytes) images there's no real gain in using a modern format, unless you have many images on the page. But with larger images the gain in terms of loading speed is evident.
So what’s the point in my going to all the trouble of creating different sized images, adding extra code to detect screen size, etc when its not going to make one bit of difference in the user’s experience?
no real trouble, for large images in the hotpath i just save those uncompressed, open squoosh.app and save the 3 images (MozJPEG .jpg, Webp and avif) and use a picture tag instead of an img src. That's all you need. (for background images a micro modernizr snippet is needed ATM. But soon all browser will chose the correct format)
caveats:
img source tags, today only latest Goggle Chrome is able to show avif, and old browser can't even show webp