Vous savez maintenant que servir un seul même fichier pour tous les contextes est une mauvaise idée. Les images que vous voulez afficher ne sont pas elles mêmes selon, d'une TV à une montre connectée.
Dans la précédente leçon, on a vu des techniques pour utiliser les background CSS images dans des media queries pour afficher différentes images pour différentes tailles de viewport. Ç marche plus ou moins, mais c'était assez bordélique et difficile à débuguer.
Pour faire ça correctement, vous avez potentiellement besoin d'écrire du CSS pour anticiper ??? (up to ten ? upteen ?) différents cas d'usage.
Et si vos mediaqueries ne supportent pas de futures plate formes ?
Les media queries sont des tentatives, au moment de la création de contenu, de deviner comment il sera affiché et de forcer cet affichage, plutôt qu'une tentative de donner des informations au navigateur pour qu'il fasse le meilleur choix possible.
L'autre problème des média queries est qu'elles se réfèrent uniquement aux dimensions du viewport, et non à la taille d'affichage de l'image.
que se passe-t-il si vous donnez à votre image une taille d'affichage, par exemple 50% du viewport ? Les médis queries n'aideront pas. (???)
Before you start implementing responsive images, consider doing an image audit of your site:
- What is the production workflow for images?
- Do you use hero images, thumbnails, icons, decorations?
- What image formats are used on your site?
- Should some images be inlined or delivered as SVGs?
For more information, see Jason Grigsby’s article Responsive Image Audits.
Pro tip: to get the maximum bang-for-your-buck when optimizing your site, focus on very large images. Pick the ten largest!
In particular, resizing images in CSS or HTML can be a huge problem for big images. For example: you need a 1000x1000px image file to display in a 500x500px img element on a 2x screen. If you use a 1100x1100px image, that’s 100 x 100 = 10,000 wasted pixels!