Penso che tu sia sulla strada giusta per ottimizzare le immagini per i dispositivi mobili, ma penso che il modo in cui lo farai non si riduca molto bene. Se scegli come target iPhone con immagini ridimensionate, supporterai 5 diverse dimensioni, iPhone 6+, iPhone 6, iPhone 5 / 5S, iPhone 4 / 4S, oltre all'originale, il che non è poi così male.
Ma cosa succede se si desidera supportare i telefoni Android allo stesso livello, avendo un'immagine per ogni dispositivo realizzato? Stai per finire con dozzine di dimensioni dell'immagine diverse.
Risoluzioni schermo Android
Ecco un altro link con un elenco più ampio di dimensioni dei dispositivi.
mydevice.io dimensioni comuni degli smartphone
Non solo avrai dozzine di dispositivi diversi, ma lo schema di denominazione non funzionerà molto bene, poiché alcune risoluzioni vengono utilizzate per più display, lasciandoti con duplicati di immagini.
Un modo migliore per ottimizzare i dispositivi mobili è indirizzare le risoluzioni dello schermo anziché i dispositivi. Ad esempio, potresti scegliere come target una serie di risoluzioni come
xxxhdpi: 1280x1920 px
xxhdpi: 960x1600 px
xhdpi: 640x960 px
hdpi: 480x800 px
mdpi: 320x480 px
ldpi: 240x320 px
Con questo metodo, puoi supportare tutti i dispositivi mobili con solo 6 diverse dimensioni, inoltre, quando viene lanciato un nuovo dispositivo, non dovrai ridimensionare ogni immagine del tuo sito per il nuovo dispositivo.
Questo è tutto presupponendo che tu stia solo parlando di ridimensionare le tue risorse immagine. Se stai per ripetere il layout per ogni dispositivo, sarebbe molto, molto meglio, creare un sito reattivo scalabile per dispositivi mobili.