Le redimensionnement CSS des images est-il toujours une mauvaise idée?

Il a toujours été considéré que l'utilisation d'attributs largeur / hauteur sur des images qui ne sont pas ce que l'image d'origine est une mauvaise idée. Cela pourrait signifier des images pixélisées ou des tailles de téléchargement plus grandes que nécessaire.

Mais est-ce toujours un problème? Je ne suggérerais pas de modifier la taille des photos, mais la réduction de la taille ne devrait pas être un problème à condition que ce ne soit pas trop différent de l'original et qu'il reste à l'échelle.

Par exemple, j'ai une photo de 600x400 et j'y colle une largeur de 400px. La plupart des navigateurs modernes réduisent l'image et il semble que le rendu soit toujours correct.

Alors, quel est l'avis de tout le monde à ce sujet?

Ne vous inquiétez pas de la mise à l'échelle (la plupart des navigateurs rendront les images mises à l'échelle très bien, d'après mon expérience), préoccupez-vous de la taille de la charge utile que vous avez envoyée à l'utilisateur final.

Bien sûr, vous pourriez affirmer que vous ne gaspillez qu'une petite quantité de bande passante aux deux extrémités pour les pixels supplémentaires que vous envoyez sans intention d'utiliser, mais il y a aussi un coût en temps.

Pour chaque image que vous envoyez à une taille supérieure à ce qui est nécessaire, vous ajoutez un tout petit peu de retard au chargement de la page pour votre utilisateur. Pour les sites Web avec seulement quelques images, ce ne sera pas un problème, mais pour un site avec un grand nombre de ressources de support, vous commencerez à ajouter un retard notable, et le retard vous coûtera de l'argent .

En outre, en ce qui concerne le coût de la bande passante minuscule, à mesure que le trafic de votre site augmente, le coût de la bande passante minuscule augmentera également.

Alors, économisez de l'argent à votre entreprise et passez les 30 secondes dont vous aurez besoin pour redimensionner l'image vous-même! :)

Comme toujours, faites votre analyse comparative, mais à moins que l'application ne soit vraiment populaire / critique, je ne serais pas trop inquiet de réduire la taille de 600 à 400 si vous êtes dans une situation où vous devez changer la largeur fréquemment. S'il s'agit d'une exécution unique, bien sûr, exécutez convert -geometry 400x photo1.jpg photo2.jpg, mais si c'est une application que vous itérez rapidement, il y a probablement des choses plus importantes à s'inquiéter, même dans le domaine des performances. par exemple latence; chargement préventif d'images, par exemple.

La taille de l'image peut être importante sur les appareils mobiles, où les grandes tailles d'image ont pour triple effet de se charger lentement (large bande mobile), de prendre plus de temps à rendre (matériel de qualité inférieure) et - une fois rendu - de ne pas être entièrement visible à haute résolution en tous cas.

Vous voudrez peut-être également examiner des images réactives. Il y a beaucoup de travail que les gens ont fait, par exemple la réduction automatique de la taille - puis la mise en cache - des images sur le serveur est une bonne approche si cela arrive souvent.

Le problème est la charge utile, le navigateur affichera à peu près n'importe quelle taille (en particulier les petites tailles dont vous parlez)

Pour un site à volume élevé, même les octets simples comptent. Vous ne voulez pas envoyer de données indésirables.

En parlant de mauvaise idée, ce n'est pas vraiment une mauvaise idée d'ajuster la largeur / hauteur de quelques pixels ou peut être de 10 ou 20 pixels. Mais c'est une très mauvaise idée si vous réduisez une grande image en miniature :)