evolution #6416
Mis à jour par sophie Tardivel il y a 10 mois
Vérifier aussi l'utilisation de srcset/picture comme proposée par Perplexity ci-dessous
To adapt image size and optimize image loading for different screen sizes, you can use a combination of HTML and CSS techniques. Here's the best approach:
1. Use the `srcset` and `sizes` attributes for responsive images:
```html
```
This code provides multiple image sources and tells the browser which one to use based on the viewport width and device pixel ratio[2][6].
2. Apply CSS for responsive sizing:
```css
img {
max-width: 100%;
height: auto;
}
```
This CSS ensures that the image never exceeds its container's width and maintains its aspect ratio[1][3].
3. For more complex scenarios, use the `` element:
```html
```
This allows you to specify different image sources for different screen sizes[6].
4. Optimize image file sizes:
- Use appropriate image formats (JPEG for photographs, PNG for graphics with transparency)
- Compress images using tools like TinyPNG or ImageMin[6]
By combining these techniques, you can ensure that your images are responsive, load quickly, and look great on all screen sizes[4][5].
Citations:
[1] https://www.w3schools.com/howto/howto_css_image_responsive.asp
[2] https://www.builder.io/blog/fast-images
[3] https://www.wix.com/studio/blog/resize-image-css
[4] https://blog.webdevsimplified.com/2023-05/responsive-images/
[5] http://www.w3schools.com/Css/css_rwd_images.asp
[6] https://requestmetrics.com/web-performance/high-performance-images/
[7] https://www.browserstack.com/guide/how-to-resize-image-using-css
[8] https://stackoverflow.com/questions/16217355/automatically-resize-images-with-browser-size-using-css
[9] https://stackoverflow.com/questions/15458650/make-an-image-responsive-the-simplest-way
[10] https://developer.mozilla.org/en-US/docs/Web/HTML/Responsive_images