Creo que estás en el camino correcto de optimizar las imágenes para los dispositivos móviles, pero creo que la forma en que lo estás haciendo no va a escalar muy bien. Si sólo te diriges a los iPhones con imágenes redimensionadas, vas a estar soportando 5 tamaños diferentes, iPhone 6+, iPhone 6, iPhone 5/5S, iPhone 4/4S, más el original, que no está tan mal.
Pero, ¿y si quieres dar soporte a los teléfonos Android al mismo nivel, teniendo una imagen para cada dispositivo fabricado? Usted va a terminar con docenas de diferentes tamaños de imagen.
Resoluciones de pantalla de Android
Aquí hay otro enlace con una lista más amplia de tamaños de dispositivos.
mydevice.io tamaños comunes de smartphones
No sólo tendrás docenas de dispositivos diferentes, sino que tu esquema de nomenclatura no funcionará tan bien, ya que algunas resoluciones se utilizan para múltiples pantallas, dejándote con imágenes duplicadas.
Una mejor manera de optimizar para los móviles es dirigirse a las resoluciones de pantalla en lugar de a los dispositivos. Por ejemplo, podría dirigirse a un conjunto de resoluciones como
xxxhdpi: 1280x1920 px
xxhdpi: 960x1600 px
xhdpi: 640x960 px
hdpi: 480x800 px
mdpi: 320x480 px
ldpi: 240x320 px
Con este método, puede dar soporte a todos los dispositivos móviles con sólo 6 tamaños diferentes, además, cuando se lance un nuevo dispositivo, no tendrá que redimensionar cada imagen de su sitio para el nuevo dispositivo.
Todo esto suponiendo que sólo se trata de cambiar el tamaño de los activos de imagen. Si vas a rehacer tu diseño para cada dispositivo, sería mucho, mucho mejor crear un sitio responsivo que se adapte a los dispositivos móviles.
