To save bandwidth, there are certain components (like a large photo album) that I don’t want to be downloaded when someone visits my site from their phone. Is there a way to create a condition in Jekyll, that would make the photo album available only if the viewing device is a laptop or desktop? I know I can use ‘display:hidden’ in css but that will still download the content even when it’s viewed on a phone
Display hidden might not even work. It might be invisible but load anyway.
display: none is what I use
But it might not be safe. You might want to avoid rendering the element altogether using Jekyll.
Going from a high level…
Avoiding loading large images on mobile is a good idea. There are a ton of articles I’m sure on image loading. Including some of csstricks sites.
One option is to not break the experience with missing images but rather create small and medium size versions of images. Then based on device size the browser will load the right image.
Look up srcset attribute for img tag. It’s a modern html thing. If you inspect element on Instagram when on a particular image page, you’ll see about 6 urls squeezed into that one attribute, covering various screen sizes.
I think you should use a Jekyll plugin which handles both the creation of downsized images for you and small sizes as well as the creating of srcset in html
Alternatively for a simpler approach, you can say you want one size (say 400px) for your image width and given percent compression, and use that on desktop and mobile.
That plugin will resize the image and give you appropriate html to load it. See Usage in the docs.
For that repo, i have a fork for Jekyll 4 or you can use the original which has no movement for a long time
I also linked to some similar plugins there in docs.
Another comment on your original question
Remember that Jekyll makes static output. There is only one my-page.html and that is seen by all devices. Jekyll can’t give different versions of the same page, like if you used php or Python or Node (which would be overkill if all you need is some image handling on a static site).
So… that leaves using JS or HTML or CSS. What you could do on the frontend is have images disabled by default e.g. use some hack to make images render as <img src-data="..." and use JS to change that to sec. You’d have to check the screen size. Or check if the user agent contains the word “mobile” which is about 95% accurate.
By having an img with initially no src element, it effectively doesn’t load
I would not bother with css because css controls display rather than behavior. An invisible image might still load.
Another tip is move your site to netlify hosting and tick the box to enable image compression. No plugins needed.
The “lazy” attribute to images also helps.
Indeed.
It won’t reduce the image size
But it will make the initial page load faster as images are only loaded on the network once they are scrolled into view.
<img src="..." lazy />
How nice that we agree!
I always thought the syntax is <img src="/assets/xyz.jpg" loading="lazy">.
One more thing: the width/height attributes should be set, otherwise the layout may shift when the image is loaded with delay.
1 Like
Oops yes you are right.
I made a cheatsheet which covers srcset and loading attributes
And if know the width of the image then set that as suggested above. In pixels
<img src="" width="800"/>
Then that space will be reserved so text will appear after it.
You can set width and let height be auto
If you set height but not width then the image will look warped when the screen width is small
Nice! Here https://caniuse.com/?search=lazy I note that Safari does not implement lazy yet, though it looked like it worked to me. It can be allowed in the Develop menu in the long list of Experimental features, which is –luckily– alphabetically sorted. Here’s to hoping it will be standard soon, like in FireFox, Chrome etc. I use lazy quite extensively and did notice a substantial LightHouse speed-up.
1 Like
A question: If I close the img tag with > rather than with />, is there a difference? Probably yes, but the browsers don’t seem to care.
It might depend on which version of safari.
No, in my testing you can use <img> or <br> as self closing tags without / but I usually add it anyway.
It does matter in React when writing JSX. Only the slash format is valid and the other format without gives a compilation error.
Ah, thank you. So I’ll make sure to add the slash.