4 ms·

> Vanilla `<img>` will ship the same image to every device, regardless of viewport size. You can have responsive images with vanilla <img>[0]. You can even laz

by henlo 6y ago

> Vanilla `<img>` will ship the same image to every device, regardless of viewport size. You can have responsive images with vanilla <img>[0]. You can even lazy load images with just `loading="lazy"` attribute[1]. I'm pretty sure I can optimize more things. I'm mostly agree with this blog post. Plain HTML+CSS is really good for simple webpages, like landing page or portfolio that requires less update. But for a blog with pagination? I don't think so. Imagine updating each page in plain HTML. SSG can help my life easier. [0] https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimed... [1] https://web.dev/browser-level-image-lazy-loading/ https://web.dev/browser-level-image-lazy-loading/

Rauchg 6y ago
The point is that "just HTML+CSS" is not the recipe for performance. You get into the same nuance as any other technology: how you use HTML+CSS is the recipe for performance. In fact, his image in this blog post doesn't have `width` and `height` set, so had it been higher up on the page and part of the "Largest Contentful Paint", not sure we'd have a 100 here. This is where frameworks can be really helpful, and I wouldn't dismiss them. It gets quite tedious to keep up with the new attributes, cross-browser and cross-platform differences, image optimization CDNs and so on :)
- lhorie 6y ago
  At the same time though, in my experience, performance optimizations follow paretto's law: try to get 80% of the way with 20% effort. There are pitfalls both with and without frameworks (e.g. it's equally easy to accidentally plop a hi-res image into a Next.js app), but generally speaking, limiting the tech stack means there's less potential stack-specific pitfalls. If "I'm gonna restrict myself to HTML and CSS only" gets them 80% of the way to their performance goals then IMHO, that's a perfectly valid approach. As far as images go, the reality is that most mainstream sites with image/video content are heavy sites with multi-second page load times, despite literal millions of dollars being spent on engineer salaries. In that context, does it really matter if a random blog decides to just use pngcrush and a dumb img tag for the occasional eye candy imagery, instead of whatever is the state of art multi-resolution technology?
- apolymath 6y ago
  JS frameworks are for noobs. HTML+CSS is the way. https://saber.datasilk.io https://saber.datasilk.io
deleted 6y ago
[deleted]
z3t4 6y ago
Also sending binary images and rendering them is very light-weight. They are also cache friendly (doesn't change often).

by henlo 6y ago

Rauchg 6y ago

The point is that "just HTML+CSS" is not the recipe for performance. You get into the same nuance as any other technology: how you use HTML+CSS is the recipe for performance. In fact, his image in this blog post doesn't have `width` and `height` set, so had it been higher up on the page and part of the "Largest Contentful Paint", not sure we'd have a 100 here. This is where frameworks can be really helpful, and I wouldn't dismiss them. It gets quite tedious to keep up with the new attributes, cross-browser and cross-platform differences, image optimization CDNs and so on :)

lhorie 6y ago
At the same time though, in my experience, performance optimizations follow paretto's law: try to get 80% of the way with 20% effort. There are pitfalls both with and without frameworks (e.g. it's equally easy to accidentally plop a hi-res image into a Next.js app), but generally speaking, limiting the tech stack means there's less potential stack-specific pitfalls. If "I'm gonna restrict myself to HTML and CSS only" gets them 80% of the way to their performance goals then IMHO, that's a perfectly valid approach. As far as images go, the reality is that most mainstream sites with image/video content are heavy sites with multi-second page load times, despite literal millions of dollars being spent on engineer salaries. In that context, does it really matter if a random blog decides to just use pngcrush and a dumb img tag for the occasional eye candy imagery, instead of whatever is the state of art multi-resolution technology?
apolymath 6y ago
JS frameworks are for noobs. HTML+CSS is the way. https://saber.datasilk.io https://saber.datasilk.io

deleted 6y ago

[deleted]

z3t4 6y ago

Also sending binary images and rendering them is very light-weight. They are also cache friendly (doesn't change often).