Ich denke, Sie sind auf dem richtigen Weg, um Bilder für mobile Geräte zu optimieren, aber ich denke, dass die Art und Weise, wie Sie damit umgehen, nicht sehr gut skaliert werden kann. Wenn Sie nur iPhones mit verkleinerten Bildern anvisieren, werden Sie 5 verschiedene Größen unterstützen, iPhone 6+, iPhone 6, iPhone 5 / 5S, iPhone 4 / 4S und das Original, was nicht so schlecht ist.
Aber was ist, wenn Sie Android-Telefone auf demselben Level unterstützen möchten und für jedes Gerät ein Image erstellen möchten? Sie werden am Ende Dutzende verschiedener Bildgrößen haben.
Android-Bildschirmauflösungen
Hier ist ein weiterer Link mit einer größeren Liste von Gerätegrößen.
mydevice.io gängige Smartphonegrößen
Sie haben nicht nur Dutzende verschiedener Geräte, sondern Ihr Benennungsschema funktioniert auch nicht so gut, da einige Auflösungen für mehrere Anzeigen verwendet werden und Sie doppelte Bilder erhalten.
Eine bessere Möglichkeit zur Optimierung für Mobilgeräte besteht darin, Bildschirmauflösungen anstelle von Geräten festzulegen. Beispielsweise könnten Sie eine Reihe von Auflösungen wie z
xxxhdpi: 1280x1920 px
xxhdpi: 960x1600 px
xhdpi: 640 x 960 px
HDPI: 480 x 800 Pixel
mdpi: 320 x 480 px
LDPI: 240 x 320 Pixel
Mit dieser Methode können Sie alle Mobilgeräte mit nur 6 verschiedenen Größen unterstützen. Wenn ein neues Gerät gestartet wird, müssen Sie nicht die Größe aller Bilder auf Ihrer Site für das neue Gerät ändern.
Dies alles setzt voraus, dass Sie nur über die Größenänderung Ihrer Image-Assets sprechen. Wenn Sie Ihr Layout für jedes Gerät überarbeiten, ist es viel besser, eine reaktionsfähige Site zu erstellen, die für Mobilgeräte skaliert.
srcset? Das würde auch (neuere) Androids unterstützen und Ihre Optimierungen nicht nur auf das iPhone beschränken. Wie würden Sie das Gerät erkennen?