Imagine having to build a tag like that every time you want to add a WebP image to a blog post or page. To effectively use WebP, you should provide fallback images. … but if the user’s browser doesn’t support the format, they’ll see the familiar broken image icon instead.
I mean, you technically can use a piece of code like this: What this means in practice is that adding a WebP image isn’t as straightforward as adding a JPG or PNG. Of course, the older versions don’t support the format. In fact, you may not even see the WebP image I’ve used above. At the time of writing, WebP works in Google Chrome, Firefox, Edge, and Opera.
The trick is that not all browsers support WebP. Check out these two example images from our article covering Sketch alternatives for Windows:: The format is great, and in most cases, it does indeed save a lot of disk space just as promised. In most scenarios, SVGs are not a format you’ll use very often. This is not always something you want – especially when dealing with your brand’s logo or other crucial graphics. Basically, use SVG only if (a) the image can be saved as SVG efficiently, and (b) if you don’t mind people taking that SVG and modifying it.Īs I said, SVG is XML-based, which means that modifying SVG graphics is really easy to do. So what’s the catch? Can you optimize images by turning them all into SVGs and WebPs?įirst, SVG. They brag that WebP is 25-34% smaller in size than comparable JPEGs, and 26% smaller than comparable PNGs. This makes SVG a good format, as long as you’re dealing with a simple vector image. The contents of the image can be defined in a simple XML file – the same XML file you’d use for other basic data processing purposes. SVG is an XML-based vector image format.SVG and WebP are a bit less common image types on the web, but they are both great as long as you’re using them as they should be used. Now for a bit more timely question: SVG? WebP? SVG and WebP Predict how big the image is going to be based on its contents, and then use the correct image type.
0 kommentar(er)
