I want to display .webp images on my website to cut down on download size and make my content appear faster. But I also want people to be able to right-click my images and download them to their computers.
But people downloading my images would prefer PNG files because those can be edited, loaded into Word etc.
Can I somehow display the .webp image by default, but have the users download a .png when they download the image?
So far I have:
<picture>
<source type="image/webp" srcset="img/ImageToBeDisplayed.webp" />
<source srcset="img/IfYouDoNotSupportWebp.png" />
<img src="img/IfYouDoNotSupportWebp.png" />
</picture>
But that still only downloads the .webp file if the browser supports it.
Related
I'm trying to incorporate some webp images into our website after following some google page speed insights guidelines. However, for some reason, it's not displaying the webp image - what am I doing wrong?
I've created a test page to show the issue. I'm sure it's something dumb I'm doing. Link here:
https://personalised.clothing/page/default2
The image should be showing here:
Before you ask, the file is definitely on the server, proof below:
the code I am using is below:
<picture>
<source srcset="/images/banners/Homepage-Banner-1-1920.webp" type="image/webp" />
<source srcset="/images/banners/Homepage-Banner-1-1920.jpg" type="image/jpeg" />
<img class="banner-image" src="/images/banners/Homepage-Banner-1-1920.jpg" alt="yazzoo homepage banner" />
</picture>
It's just showing the alt tag - it's not even getting to the img tag, so I'm very confused, as everywhere seems to say that if one images doesn't load, it will go to the next image. The source domain for the images is https://personalised.clothing
I have a picture element that was working on Safari 14 on Catalina.
It uses two sources in a picture element. The first one is webp and the 2nd one is jpg.
Safari, as it doesn't support webp, used to fallback to the jpg.
In the new Big Sur OS it doesn't fallback and displays an error instead.
The network tab shows its downloading the webp(failed to load).
I have a codepen with my code.
https://codepen.io/yhattav/pen/YzNgBeV
webp(pink) first, jpg(green) 2nd
<picture>
<source srcset="https://static.wixstatic.com/media/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.webp" type="image/webp">
<source srcset="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpeg" type="image/jpeg">
<img alt="Lt_Olive.jpg" class="gallery-item-visible gallery-item gallery-item-preloaded" data-hook="gallery-item-image-img" data-idx="0" src="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.webp" style="width: 317px; height: 317px;">
</picture>
jpg(green) first, webp(pink) 2nd
<picture>
<source srcset="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpeg" type="image/jpeg">
<source srcset="https://static.wixstatic.com/media/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.webp" type="image/webp">
<img alt="Lt_Olive.jpg" class="gallery-item-visible gallery-item gallery-item-preloaded" data-hook="gallery-item-image-img" data-idx="0" src="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.webp" style="width: 317px; height: 317px;">
</picture>
It is composed of two picture elements:
webp source, jpg source, img tag.
jpg source, webp source, img tag.
To make it more visible the webp is pink and the jpg green.
In chrome, it displays pink and green as it supports webp.
In safari on Catalina, it displays green and green as it doesn't support webp.
I have read that webp support should have been added to the new version.
https://www.macrumors.com/2020/06/22/webp-safari-14/
Could it be that the browser "thinks" that it supports webp when it actually doesn't?
Thanks for your help.
On Safari 14.0.3 and OS X Mojave, fallback to jpg fails when type="image/webp" is not specified. It tries to show an image, but shows only an error icon instead. As soon as I add type, it falls back to Jpeg correctly. Hence, it is exactly as You described it. Without Type specified, it tries to show the webp, thinking it can hadle it, but when You tell it it's type is webp, than it knows it will fail and falls back.
<picture>
<source type="image/webp" srcset="images/me.webp">
<img id="avatar" src="images/me.webp" alt="Me">
</picture>
When I use the picture element, the browser(chrome) doesn't load the image with the other resources. However, when I replace <picture> with only <img> element it works fine:
<img id="avatar" src="images/me.webp" alt="Me">
Why is that happening?
Your code will load the me.webp image if the browser supports its. If not, the jpg image will be shown (which works). Chrome 67 supports webp format, so the only issue I can figure out is that me.webp is not in the images folder.
AFAIK, <picture> is used when you want multiple possible images to use in a responsive design. The <img> at the end is the fallback. It sounds like images/me.webp isn;'t working.
Unless you are really making use of <picture>, use <img>.
I'm facing a problem, I just can't seem to find out what the problem is, I have:
<picture>
<source type="image/webp" srcset="/images/meh_logo.webp">
<img src="/images/meh_logo.png" type="image/png">
</picture>
On chrome, it's just defaulting to the png logo.
If I hover over the link in inspector, it shows the webp image.
If I open the webp image link in a new tab, it loads file.
My headers return:
image/webp,image/apng,image/,/*;q=0.8
If I change source srcset to img srcset - that will display the webp file.
Chrome: 70.0.3538.110
Tested locally on MAMP Pro and doesn't display.
The WEBP is a tree. The PNG is a rose. You used the code below...
<picture>
<source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/4.sm.webp">
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
</picture>
According to this source you should repeat the source, like this:
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
<source srcset="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>
When I run these scripts in FF and Chrome they show a tree, thus show the WEBP image. What do you see?
After reading through this question and answer, I was still a little confused, so I'd like to add this clarification: When you use the Chrome inspect tool on your image, it will still highlight the line with your <img> in it, which makes it seem that the larger file is loading. But, as you can see with the example given, the WEBP is actually what is loading and showing on the screen, because neither snippet shows the photograph of a rose found here.
I'm trying to migrate to using WebP images on our website.
We have quite a few images in our S3 buckets, so it would take a while to convert all of them to webp. Instead, I'd like to show webp only if the webp version is available (it'll have a deterministic URL structure); and if not, show the original JPG/PNG.
When I try the following, it doesn't work (don't worry the icons on the top right. also webpImageUrl and originalImageUrl have the correct values):
<picture>
<source srcSet={`${webpImageUrl}`} type="image/webp" />
<img src={`${originalImageUrl}`} />
</picture>
Thanks in advance!