Czy to dobra strategia optymalizacji obrazów internetowych na iPhone'a? [Zamknięte]

0

Mam wiele starych zasobów (pliki HTML i graficzne), które muszę zoptymalizować pod kątem urządzeń mobilnych. Istniejące zasoby zostały utworzone na komputery i nie miały na myśli urządzeń mobilnych.

Planuję wprowadzić następujące zmiany:

1) Jeśli działa na urządzeniu stacjonarnym, jego zawartość zostanie załadowana z istniejącego adresu URL (np static.example.com/document1/index.html.). Ale jeśli witryna zostanie załadowana z iPhone'a6, przełączy się nastatic.example.com/document1_iphone6/index.html

2) document1_iphone6jest w zasadzie duplikatem document1. Wszystkie zasoby obrazu zostaną przeskalowane, aby zmieściły się w rozmiarze 750 x 1334

Czy jest jakiś problem / wada tego planu?

Anthony Kong
źródło
1
Jest to prawdopodobnie lepiej dostosowane do SO, ale dlaczego nie użyć responsywnych obrazów srcset? To również wspierałoby (nowsze) Androidy i nie ograniczałoby tylko optymalizacji do iPhone'a. Jak wykrywasz urządzenie?
bassplayer7

Odpowiedzi:

1

Myślę, że jesteś na dobrej drodze do optymalizacji obrazów na urządzenia mobilne, ale myślę, że sposób, w jaki to robisz, nie będzie zbyt dobrze skalowany. Jeśli kierujesz reklamy na iPhone'y ze zdjęciami o zmienionym rozmiarze, będziesz obsługiwać 5 różnych rozmiarów, iPhone 6+, iPhone 6, iPhone 5 / 5S, iPhone 4 / 4S oraz oryginalne, co nie jest takie złe.

Ale co, jeśli chcesz obsługiwać telefony z Androidem na tym samym poziomie, mając obraz dla każdego wykonanego urządzenia? Skończysz z dziesiątkami różnych rozmiarów zdjęć.

Rozdzielczość ekranu Androida

Oto kolejny link z większą listą rozmiarów urządzeń.

mydevice.io popularne rozmiary smartfonów

Nie tylko będziesz mieć dziesiątki różnych urządzeń, ale twój schemat nazewnictwa nie będzie działał tak dobrze, ponieważ niektóre rozdzielczości są używane dla wielu wyświetlaczy, pozostawiając cię z duplikatami obrazów.

Lepszym sposobem optymalizacji na urządzenia mobilne jest wybranie rozdzielczości ekranu zamiast urządzeń. Na przykład możesz kierować na zestaw rozdzielczości takich jak

xxxhdpi: 1280x1920 px
xxhdpi: 960x1600 px
xhdpi: 640x960 px
hdpi: 480x800 px
mdpi: 320x480 px
ldpi: 240x320 px

Dzięki tej metodzie możesz obsługiwać wszystkie urządzenia mobilne o zaledwie 6 różnych rozmiarach, a ponadto po uruchomieniu nowego urządzenia nie będzie trzeba zmieniać rozmiaru każdego obrazu w witrynie dla nowego urządzenia.

Wszystko to przy założeniu, że mówisz o zmianie rozmiaru zasobów obrazu. Jeśli zamierzasz przerabiać swój układ dla każdego urządzenia, znacznie lepiej byłoby stworzyć responsywną witrynę skalowaną dla urządzeń mobilnych.

Jroschen
źródło