Je pense que vous êtes sur la bonne voie pour optimiser les images pour les appareils mobiles, mais je pense que la façon dont vous vous y prenez ne sera pas très bien adaptée. Si vous ne ciblez que les iPhones avec des images redimensionnées, vous allez supporter 5 tailles différentes, iPhone 6+, iPhone 6, iPhone 5/5S, iPhone 4/4S, plus l'original, ce qui n'est pas si mal.
Mais que faire si vous souhaitez prendre en charge les téléphones Android au même niveau, en ayant une image pour chaque appareil fabriqué ? Vous allez vous retrouver avec des dizaines de tailles d'images différentes.
Résolutions d'écran Android
Voici un autre lien avec une liste plus importante de tailles d'appareils.
mydevice.io tailles communes des smartphones
Non seulement vous aurez des dizaines d'appareils différents, mais votre système de dénomination ne fonctionnera pas très bien, car certaines résolutions sont utilisées pour plusieurs affichages, ce qui vous laissera des images en double.
Une meilleure façon d'optimiser pour les mobiles est de cibler les résolutions d'écran plutôt que les appareils. Par exemple, vous pouvez cibler un ensemble de résolutions telles que
xxxhdpi : 1280x1920 px
xxhdpi : 960x1600 px
xhdpi : 640x960 px
hdpi : 480x800 px
mdpi : 320x480 px
ldpi : 240x320 px
Avec cette méthode, vous pouvez prendre en charge tous les appareils mobiles avec seulement 6 tailles différentes. De plus, lorsqu'un nouvel appareil est lancé, vous n'avez pas besoin de redimensionner chaque image de votre site pour le nouvel appareil.
Tout cela part du principe qu'il s'agit uniquement de redimensionner vos images. Si vous devez refaire votre mise en page pour chaque appareil, vous feriez bien mieux de créer un site réactif qui s'adapte aux appareils mobiles.
