So every time I run lighthouse evaluation, it keeps telling me to "Defer offscreen images", now, what they recommend is to use their script and to set the images like this :
<img data-src="images/flower3.png" class="lazyload" alt="">
And this is what I have:
<picture>
<source sizes="(min-width:1025px) 25vw,(min-width:0px) 100vw"
srcset="https://thumbor.mypage/YiZprbZxOEdzieJbcj8ZnIKIrE4=/640x0/https%3A%2F%2Fmyimage.jpg 640w,...">
<img alt="" sizes="(min-width:1025px) 25vw,(min-width:0px) 100vw"
data-object-fit="cover"
class=" ls-is-cached lazyloaded"
data-src="https://thumbor.mypage/yoi8S4dSPBIU5ekNg6x7NvFFFPM=/320x0/https%3A%2F%2Fmyimage.jpg"
srcset="https://thumbor.mypage/YiZprbZxOEdzieJbcj8ZnIKIrE4=/640x0/https%3A%2F%2Fmyimage.jpg 640w,https://thumbor.mypage/qoSnHcwy_fuA8C2gJaKnxnCJ00A=/1024x0/https%3A%2F%2Fmyimage.jpg 1024w,...">
</picture>
So as you can see, I check the two things they ask for to match the right code: the lazyload class and the data-src attribute, maybe I'm missing something but for some reason, it only fails with a couple images. please help!
Short Answer
The second an image has a src or srcset attribute set it will load the image. You need to use a lazy load library that supports the <picture> element and make sure you haven't set the src or srcset on your <picture> elements.
Long Answer
You have misunderstood a key aspect here. The class="lazyload" and data-src="images/flower3.png" are part of a lazy load solution using JavaScript. You can't just copy these attributes without the related JavaScript code.
With their example (which I assume is this example of lazy loading as you did not link it in your question) there is a script you must include in order to make lazy loading work.
If you look at their example these <img> elements do not have a src attribute set and so they are invalid and will not load the image.
What the script does is look for <img> elements that have a class of lazyload and then look for the data-src attribute.
It then takes whatever is in the data-src attribute and adds that to the src attribute of the image once the image is within the viewport.
This then makes the image valid (as an <img> element must have a src attribute to be valid and actually load the image) and so it loads.
In your example you already have the src set via the srcset attribute in your HTML so the images are loaded instantly, the data-src does nothing in this case.
I am not sure whether the lazy loading library in that example works with <picture> elements (it appears to want you to use an <img> element with data attributes for media queries) so you may want to research a lazy loading library that works with the <picture> element now that you (hopefully) understand why your implementation is not working.
Related
Based on my reading of this article on Google's developers' site, and my memory of how my site used to work, it seems like lazy loading has become the new default. That's cool! However, I'm running a site that people use to browse a media library, and lazy loading adds a bit of visual jank, so I'd like to disable it in this case.
I understand that I can add loading="eager" as an attribute of the img tag, however, the way my site works is i display a grid of 60x video elements and use the poster attribute to display an image until the user hovers over and then a super-low-res video preview plays.
loading="eager" doesn't seem to work for the posters of video elements. What should I do?
Here's my codeblock:
<video loading="eager" class="hoverToPlay" muted loop
preload="none" src="../media/?clip=1297&q=q"
poster="../media/?clip=1297&q=t"></video>
I uploaded an image to my web server just like all the images are. I created it in Photoshop and exported to a .png. The image resides under The code is src="" But the browser shows that the image does not exist. I've set permissions to 0777, I've changed the image path, tried a different image in the same path to confirm it's reading the path right, and the image will just not show. You can view the link here, it will show nothing
EDIT: This is what the image is suppose to look like
EDIT: Removed links for privacy
You forgot " at the end.
It should be like this:
src="img/SccBridgeLogo.png"
OR
Try adding / at the beginning of the path, that should tell the browser to search from index directory.
src="/img/SccBridgeLogo.png"
Note this only works if you are running on a site, running from index.html in browser will return in
File:////
I had to use the picture tag for fallbacks and came across this issue at that point.
This use to work fine
<img src="images/netgraph-logo.png" alt="NetGraph Logo">
After adding the picture tag
<picture>
<source srcset="images/netbob-logo.webp" type="image/webp">
<source srcset="images/netbob-logo.png" type="image/png">
<img src="./images/netbob-logo.png" alt="NetBob Logo">
</picture>
In my case I was able to go down one folder from the root folder, therefore "./" preceding the rest of the url worked fine. You may need to back up several folders instead though, so be sure you are using the correct type of path.
I usually using an Iframe with src pointing to a HTML file containing an image:
Iframe
<iframe src="/image.html">
Image.html
<img src="/hello.jpg">
However, one time I accidentally used the image path in the Iframe
<iframe src="/hello.jpg">
And it still work perfectly. Is it a normal way to use this method? I am considering if there will be any inconsistent problem on different browsers / or does this method officially allowed in HTML.
Thanks.
I want to defer the loading of images in an HTML file until after all other assets have loaded or for a set amount of time. I would like to do this without JS.
I already use a deferred image loading technique that uses JS in our web app. However, a version of this app runs without JS and I'd like to have the same functionality if possible. I posted this in the hopes there may be some little known HTML5 attribute I can use for this. Any workaround are welcome.
Load priotity
If possible, it would be good to break up the image loading into blocks. I'm ok even if it's all just one block as well.
All HTML / CSS
Image block
Image block
Note : I've already looked into having lazy loading only for the JS app and having the image load right away for my pure HTML version (as described here), that's my fallback.
If you are targeting the Chrome browser, chromium has introduced a native image lazy loading so that means you don't need to install any further 3rd party library for this.
Using native image lazy loading, you should add loading attribute in the img html tag like this :
<img src="..." loading="lazy" width="200" height="200">
Also make sure that you have the latest version of Chrome browser installed.
For further details please go through this reference: https://web.dev/native-lazy-loading#image-loading
Hopefully it could be helpful.
I've got an .svg file with some code in it.
If I just put that code in my HTML with the <svg> tag it works fine.
The problem is is that I've got quite a lot of code in my .svg and I don't want to put all that code in my HTML. So I've made an .svg file and tried to link it, but it didn't seem to link.
Does anyone know how I'm supposed to link an .svg file to a HTML file?
The easiest (and probably most correct) way of doing this is to simply put your SVG file as src in an <img> tag as if it were any other format.
Keep in mind that this might not work in some older browsers (this is the problem is general with SVG, not just with using it in an img tag).
Another option is using it inside an <object> tag, as seen in this article (which also breaks down the two options and the drawbacks of both):
<object type="image/svg+xml" data="kiwi.svg" class="logo">
Kiwi Logo <!-- fallback image in CSS -->
</object>
In this case, your retain the ability to affect the parts of your SVG with CSS - which may or may not be what you want.
I would usually use it inside an using <img src="link to svg file" />
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGNpcmNsZSBpZD0iY2lyY2xlIiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHI9IjE0IiBjeD0iMTUiIGN5PSIxNSIvPjxjaXJjbGUgaWQ9ImRvdCIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiByPSIxIiBjeD0iMTUiIGN5PSI3LjUiLz48cGF0aCBpZD0iaSIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiBkPSJtMTIuNSwxMS41bDMuNSwwbDAsMTFxMCwwLjUgMC41LDAuNWwxLDBsMCwxbC01LDBsMCwtMWwxLDBxMC41LDAgMC41LC0wLjVsMCwtOS41cTAsLTAuNSAtMC41LC0wLjVsLTEsMGwwLC0xeiIvPjwvZz48L3N2Zz4=" />
How to Add Scalable Vector Graphics to Your Web Page
for example you can use :
<object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>