Image Optimization | Qwik | Page 1

dark tiger Nov 25, 2024, 8:46 AM

#

Is there a way to generate the srcset & format optimization of an image using ?jsx without the width and height ?
It's harder to style image width/height in the CSS if width & height are already set on the HTML. For example :

.parent{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* dynamic width */
}
/* If width & height are set */
.child-img {
  width: 100%;
  height: auto;
}
/* Normal behavior */
.child-img {
  aspect-ratio: 1/1; /* <- Let the browser knows it's a square to keep space */
}

vague beacon Nov 25, 2024, 2:22 PM

#

I think there is an example in the docs for this: https://qwik.dev/docs/integrations/image-optimization/#customize-image-width--and-height

Qwik

Image Optimization | Integrations 📚 Qwik Documentation

No hydration, auto lazy-loading, edge-optimized, and fun 🎉!

#

I've been using this approach for a while without too much trouble, except when dealing with flex boxes 😅 which is always tricky anyway

dark tiger Nov 25, 2024, 3:29 PM

#

Right, so I need to override width/height for each image.

vague beacon Nov 25, 2024, 4:08 PM

#

hmm you could go with dynamic sizes, but just be aware of content reflowing

Though I just read this about the issue with content reflow:

Update! Times changed fast here, and to avoid lazy-load jank, all you have to do is put the correct natural width and height attributes on images and they will load nicely, even if CSS makes the image fluid width. So do it like: <img src="image.jpg" width="800" height="600">

#Image Optimization