Image Optimization

This example shows the way I use images across my qwik code, you can see the full documentation here to see other features. Why I care about this, number one is that im lazy and wont optimise all my images and number two is that it will mean that for users less bandwidth is consumed, the better the experience for my visitors especially on mobile networks.

Features this give me out the box

1. The image is converted in several webp images, one for each breakpoint (200px, 400px, 600px, 800px, 1200px)
2. The image is processed and optimized to reduce its size
3. Automatic .webp / .avif format optimization
4. Loading lazy and async decoding by default

The first this you do differently is

import Thunder from  '../../media/thunder.png?jsx';

instead of the html img

<img src='../../media/thunder.png'/>

Then you can use the image like a component

<Thunder/>

Then with some basic css to set the high and width correctly

.imageWrapper {
  width: 300px;
  height: 300px;
}

.imageWrapper img {
  width: 100%;
  height: auto;
  display: block;
}

Your image should render like the below