Managing images on an image-intensive website
I am replacing an old website and making a new one which is responsive, mobile-first. It is an online newspaper, and as such, will have a lot of images.
It sounds like you have to be really mindful of webpage sizes and bandwidth to give a good user experience.
So I am looking for advice of how to AVOID having images choke my website and thus frustrate end-users...
39 Replies
Start with https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
You can serve different sized and supported images this way
for different devices screen sizes
Then tap into https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
Which you can have on any <img> below the fold (viewport landing) that will load when you get closer to them in the view pane.
Does that BLOCK other sizes from loading?
So "lazy loading" is Javascript?
no
Read before you reply please both those questions would be answered if you bothered to open the links and read š¦
o wait thats mb I linked wrong lazy load
oh no its there scroll down a bit š
I see this image greyed out
https://d40e147267aef964911da1f63caf1052c3c90206.mdnplay.dev/en-US/docs/Web/API/HTMLImageElement/src
These are Web API's built into the browser
Can I paste screenshots here?
yes?
Just no pdf* uploads š
just paste is fine ofc
You would like to think MDN would program webpages that work.....
it works
just not for you apparently xD
Not in Firefox
The new IE ofc
try it in chromium then
Does adblocker break things?
worth a try
š¤·āāļø
You are a developer though you should make sure you have both installed
I have Edge/Chrome/FF and if I could I would have Safari but they are aholes
wont release Safari for windows >.>;; (I'm sure it would be complicated but w/e)
I have Chrome on my laptop, but Google is evil
So I use Playwright and Webkit to test Safari
Yea dood FF just sux sorry not sorry #newIEisFF
Try Brave or something then
That is after clicking on </> Play in the first screenshot and also allows ads
That's news to me. You saying FF sucks?
Yes its the new Internet Explorer >.>;; and Mozilla is not peach of a company either anymore
If you really wanna get into my opinion on it
use Edge (but then yes MS is Evil...)
So use what you want just know that FF might have issues
its behind and draggin support at the cost of 2% of all browser users (hence the new IE comments)
Others here don't agree with me and love FF
And this happened when? And why?
4 years ago?
When they laid off their whole FF dev team
What d you mean?
and gave their CEO a big fat millions of $$$ bonus in the same breath
Wow, news to me.
Interesting
now you konw
Jen Simmons lucky for us is over at Safari now with others and making it better so not a total loss
Who is Jen Simmons?
So ya when ever she got laid of from FF is when it started..
look her up š
Any way this went way WAY off topic
You can search for other resources to find what you need if MDN does not work for you
<srcset> and <img loading="lazy">
I was just trying to get that link to work because you want me to read it
You didn't need the code block to read it
So idk what the issue is
Was that a video?
Or some interactive code?
interactive example?
Then I'll just read what I can
you can always searx for another resource too
big part of being a developer is being able to lookup stuff once someone as pointed you on the path with good keywords or methods
plenty of articles out there on both these things
or videos ( I prefer to watch/listen)
ok
Why did they use Javascript? Isn't that solution just purely HTML?
Chris Coyier
CSS-Tricks
HTML Responsive Images Guide | CSS-Tricks
This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). We'll go over srcset and , plus a whole bunch of things to consider to help you get the best performance and design control from your images.
Is this really just a matter of planning out image sizes and some simple HTML, CSS and maybe JS and that's it? (I thought this would be really hard and require enterprise solutuons..)
You don't need enterprise solutions for most things.. xD also modern web is powerful.
HTML is becoming even more powerful too along with CSS
Enterprise solutions are for two things: collaborating as huge teams, and serving tens or hundreds of thousands of concurrent users. Neither are a worry if you are working solo