How to add srcset to vite images : | Qwik | Page 1

teal remnant Nov 5, 2024, 11:10 AM

#

Hello guys I have this Images that I want to optimized for mobile ( I have smaller images ready, I jsut don't know how to apply the srcseet to the vite optimized images :

import ImgHeroMain from "../images/sections/home/hero-desktop.webp?w=1064&h=701&jsx";
import ImgHeroMobile from "../images/sections/home/hero-mobile.webp?w=260&h=518&jsx";
import ImgHeroCart from "../images/sections/home/hero-cart.webp?w=800&h=1482&jsx";

<div class="relative flex w-full max-w-[1260px] items-center justify-center">
              <div class="mx-[7.7568%] max-w-[100%]">
                <ImgHeroMain
                  fetchPriority="high"
                  loading="eager"
                  alt="hero-image"
                  class="mx-auto h-auto w-full rounded-xl shadow-[0_18px_52px_rgba(0,74,136,.1),0_0_0_0.8px_rgba(239,_241,_244,0.5),0_0_0_3px_#0085ff;]"
                />
              </div>
              <div class="absolute left-[77.6%] right-0 top-[32%] flex h-auto w-auto max-w-[260px] drop-shadow-[0_6px_40px_rgba(25,30,36,0.2)]">
                <ImgHeroMobile
                  fetchPriority="high"
                  loading="eager"
                  alt="hero-image-mobile"
                />
              </div>
              <div class="absolute left-0 right-[81.035%] top-[32%] flex h-auto w-auto max-w-[220px] overflow-hidden rounded-md shadow-[0_18px_40px_rgba(0,74,136,0.2),0_0_0_1px_rgba(230,234,239,1),0_0_0_0px_#0085ff]">
                <ImgHeroCart
                  fetchPriority="high"
                  loading="eager"
                  alt="hero image cart"
                />
              </div>
            </div>

lilac chasm Nov 5, 2024, 11:17 AM

#

The ?jsx import is for when you want vite to optimize the images for you, and you can tell it to create multiple sizes. If you want to provide your own optimized images, you should just use <img srcSet=... and either put the images under public/ or import them without ?jsx

#

BTW if you're writing ad-hoc classes like that everywhere it might be easier to use the style attribute

teal remnant Nov 5, 2024, 11:33 AM

#

lilac chasm The `?jsx` import is for when you want vite to optimize the images for you, and ...

ohh I can give it different sizes ? that would be better then , just by adding different param ?

#

if yes how can I define the breakpoints for each image ?
thanks for the help brother ❤️

lilac chasm Nov 5, 2024, 11:34 AM

#

yse see https://qwik.dev/docs/integrations/image-optimization/