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
You could use the <picture> 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 <picture> element rather than other fallback methods is that browsers that don't support the element will fallback to whatever source is defined in the <img> tag.
<picture>
<source srcset="img/yourImage.webp" type="image/webp">
<source srcset="img/yourImage.jpg" type="image/jpeg">
<img src="img/yourImage.jpg" alt="Your image">
</picture>
Here's a method for converting source images to WebP.
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:
my-selector {
background: url('../images/home-bg.webp') no-repeat scroll center center
}
.no-webp my-selector {
background: url('../images/home-bg.jpg') no-repeat scroll center center
}
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.
In <picture> attribute <source> 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:
<picture>
<source type="image/webp" srcset="images/verz.webp">
<img src="images/banner.jpg" alt="Banner Image" width="100" height="100">
</picture>
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.
Related
I want to know the benefits of using Picture tag vs the CSS media query in-terms of pure performance (website load time).
I am developing a website and clients are forcing me to use picture tag but I think both are same. Let me know your input.
<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.png">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.png">
<img
src="images/kitten-curled.png"
alt="a cute kitten">
</picture>
or
using media query and targeting separate image tags.
Media query works this way:
Even when you are viewing a website in Desktop, it still downloads the styles of mobile.
Example: If you are hiding a small image in desktop, in a desktop still small image will be downloaded but won't be shown (if it is hidden).
Picture tag: If you have 3 different images for mobile, tablet and desktop.
Picture tag will download only mobile device image when a page loads (when on mobile), it will neglect other 2.
If you want to test:
1. Write HTML code as you have above for 3 different images.
2. Once you are in desktop, load the page. Now you have a desktop image which you can see.
3. Disconnect the internet from your laptop.
4. In your browser responsive mode, keep reducing the screen
5. When it hits the tablet width, you will see the image won't be visible and it will be broken.
6. That means the image for tablet was not downloaded earlier when page load.
I think the accepted answer/question is lacking some real world contextual details. When talking about performance, we're usually talking about performance on slower devices such as mobile devices, not desktops.
Example: If you are hiding a small image in desktop, in a desktop still small image will be downloaded but won't be shown (if it is hidden).
This is usually not a problem as desktops have faster processing and they don't run on data (larger bandwidth) unlike mobile devices.
The accepted answer never mentioned how CSS media queries behave on mobile devices - this method actually only applies the styles that satisfy the smallest media query. The reason why this method 'downloads' all styles on desktop is because of how media queries are usually written with mobile-first design, by setting a min-width criteria. So when loading the page in desktop, all your media queries would be satisfied thus they are all applied and the last one in the source order wins.
So in terms of performance on mobile devices, both methods are the same. Ultimately, the <picture> tag is still the most robust solution due to additional configuration options with the srcset attribute. However, sometimes you need to use CSS media queries instead of <picture> tags such as when dealing with background images.
Here's a recent guide from Google recommending CSS media queries for optimizing background images: https://web.dev/optimize-css-background-images-with-media-queries/
The subject pretty much says it all. What is the best and most compatible format for attaching or embedding images in an e-mail? GIF, JPG, PNG, SVG, BMP, (etc.)? Are these read by all modern e-mail clients or are there some gotchas we need to watch out for? What about mobile clients (not browser-based)? How about formats that support alpha channels?
PNGs are not supported by older Lotus Notes (6.5, 7). Using alpha transparency and true color might cause problems (e.g. in older Outlook versions). Stay with the good old GIF and JPG and you are safe. And remember that GIF animations may (a.) play slow on mobiles and that they may (b.) show only the first frame in some email environments (e.g. Outlook 2007+). I would not rely on vector graphics. However, here's an interesting example that includes a fallback image.
Is there an image format that supports alpha-transparency and animation. While being supported by most browsers? I have found only one image format, but it was not supported by any web browsers.
No.
There is .mng (Multi-image Network Graphics), which is partially supported by GIMP - enough support to create
GIF like animations with alpha transparency - but far from .mng's full capabilities, and I know of no browser which implements MNG animation support (haven't tried either)
And, as people say in the comments, there is "APNG", which is supported by Firefox alone,
but not supported natively in GIMP.
If you really need this, I'd say the better way to go is to use some Javascript to compose a .png slideshow.
What web browsers do not support the png image type, and what is a better alternative for those browsers?
Essentially all browsers. PNG support has been in Internet Explorer since version 4, and Mozilla Firefox, Chrome, and Safari have supported it since their initial releases.
24-bit transparency is the one issue, it doesn't work in IE6 or lower. There are workarounds you can use that fix it, though. The other common image types, GIF and JPEG, don't support 24-bit transparency at all, so there's no alternative other than the workarounds.
The only modern browsers it won't work in are screen readers / text browsers for visually impaired folks and command-line enthusiasts. The proper alternative is providing an alt attribute on your img tags.
A good alternative for IE6, to support PNG transparency, is CSS3 PIE (javascript). It has many other interesting features as well of IE support.
As well this SO thread may help: How to get PNG transparency working in browsers that don't natively support it?
All common browsers(Firefox, Internet Explorer, Opera, Safari, Chrome) support the png image format. However, some old versions have problems displaying transparent PNG pictures (e.g. Internet Explorer 6.x and lower).
There are several alternatives depending on what you are trying to do.
The majority of user agents support PNGs. Older versions, and non-graphical browsers e.g. Lynx don't.
I've been playing around with the HTML5 video tag and I'm puzzled as to how best to degrade when you can't support a codec?
For older browsers (or IE) that don't support the video tag at all this quite is straight forward:
<video width="320" height="240">
<source src="vid.ogv" type='video/ogg'>
<source src="vid.mp4" type='video/mp4'>
<object>
<!-- Embed Flash video here to play mp4 -->
<object>
</video>
They will fall through and will receive the Flash version (or other alternate such as an image!)
How about when the browser does support the tag but not the codec - Like FireFox 3.5 for example - and I can't support OGG (possibly because I already have vast archives of H.264):
<video width="320" height="240">
<source src="vid.mp4" type='video/mp4'>
<object>
<!-- Embed Flash video here to play mp4 -->
<object>
</video>
All I get in FireFox 3.5 is a grey box with an x in it. This isn't exactly a great user experience for FireFox users! I can only think of using JavaScript to check for FF3.5 and change the DOM!! is this really the bad old all over again! ...or is there some part of the spec I'm missing out on like a 'novideo' tag?
An important part of graceful degradation is the querying capabilities... Dive into HTML5 is a great read... specifically, look at the video section. Relevant code here:
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
Note: this does require DOM checking, but for capabilities and not browser signature. It's the right thing to do :-)
Once you know if the browser can support, you can show your video tag or pull up a lightbox or redirect as you see fit.
One really good way to tackle this problem is to use modernizer js library.Its really easy to use and quick.It can check HTML5 capabilities in the user's browser . Visit the site here : http://www.modernizr.com/
Video for Everybody's test page indicates that Firefox 3.5 can only play OGG. You might want to add a flash version if you really don't want to add OGG. VfE also does not use JavaScript, so it might be worth looking into.