Retina i wydajność

Ostatnio coraz więcej słyszę „rany rany, oni powiedzieli, że moja strona nie jest przygotowana pod retinę”. Niektórzy słyszeli słowo „retina” i teraz szaleją. A niektórzy nawet nie wiedzą co to jest.

Retina to po prostu nazwa marki wyświetlaczy z wysoką gęstością pikseli firmy Apple. W skrócie oznacza to, że musimy zaserwować obrazki dwa razy większe (wysokiej rozdzielczości), żeby nie były rozmazane na wyświetlaczach jak retina. Możemy takie wyświetlacze znaleźć nie tylko w produktach Apple, ale też Google Nexus, Samsung Galaxy itd. Nie nazywają się retina, ale działają prawie tak samo. (To przypomina mi reklamę samsunga.) Coraz więcej urządzeń będzie używać takich wyświetlaczy, więc ważne jest, aby się przygotować. Tak myślę.

Sieć jest teraz przepełniona poradami jak stworzyć stronę żeby była gotowa pod retinę. Niektóre z nich krótko wspomną o wadach tych rozwiązań (bardzo krótko). Jest jedna bardzo duża wada. Wydajność. Teraz gdy jest responsywne projektowanie (responsive web design), wysoka gęstość pikseli, myślimy coraz mniej o wydajności (lub więcej zależy od developera). Wciąż ważniejsze jest, aby nasza strona wyglądała dobrze niż działała dobrze.

Najpierw mobile

W responsywnym projektowaniu jest zasada najpierw mobile (mobile first). Dlaczego? Jednym z powodów jest fakt, iż coraz więcej użytkowników korzysta z internetu poprzez urządzenia mobilne. Co dokładnie mobilne dla mnie oznacza? Urządzenie z mniejszą mocą przeliczeniową, zazwyczaj z wolnym internetem (nie zawsze mamy dostęp do wifi) i mobilnym internetem, którego prędkość zmniejsza się drastycznie po wykorzystaniu pakietu danych. Musimy o tym pamiętać gdy przygotowujemy stronę pod retinę.

Nie ważne, które rozwiązanie wybierzesz, będzie ono miało wpływ na wydajność. Większe obrazki oznaczają większy rozmiar pliku. A gdy projektujemy dla urządzeń mobilnych wszystko rozbija się o rozmiar. Mogę sobie wyobrazić użytkownika, który jest zadowolony czekając na te ostre, wypasione zdjęcia, które zżerają jego transfer. Nie bałdzo.

Ale dlaczego skupiać się na mobile?

Możesz zadać pytanie, dlaczego do cholery gadam tyle o mobile gdy ten temat jest o retinie. Cóż, sprawdźmy aktualną listę urządzeń z wysoką gęstością pikseli. Możesz też sprawdzić pełną listę na wikipedii. Jesteśmy zainteresowani urządzeniami z pixel-ratio minimum 2. Hmm, zobaczmy, smartfon, tablet, smartfon, smartfon, smartfon, […] Szokujące! Większość (prawie wszystkie) to urządzenia mobilne! Tak więc miej na uwadze – gdy robisz swoją stronę gotową na retinę, nie robisz jej gotową na urządzenia mobilne.

Więc co teraz?

Nie twierdzę, że nie należy nic robić. Wygląd jest też ważny. Po prostu nie rób absolutnie wszystkiego dwa razy większego, bo niekorzystnie wpłynie to na użytkowników. Używaj wektorowych ikon, jak FontAwesome, zamiast bitmap. Używaj efektów CSS. Niektóre rzeczy jak, gradienty, zaokrąglone rogi, cienie, mogą być reprodukowane w CSS – nie potrzebujesz do tego obrazków. Jednak to wszystko powinno być brane pod uwagę na samym początku, jeszcze zanim zacznie się projektować stronę. Co jeśli chcesz dostosować istniejącą stronę? W skrócie powiedziałabym:

• tak – dla przygotowania zestawu sprite @2x
• nie – dla serwowania <img /> w podwójnym rozmiarze lub podmianę w JS (jedynym wyjątkiem jest tutaj logo jako, że zazwyczaj nie jest duże i jest to najważniejszy obrazek na naszej stronie)
• ogromne nie – dla serwowania tła w podwójnym rozmiarze (lub podmiany). Czy wiesz, że nawet jak wykorzystasz CSS media query min-device-pixel-ratio użytkownik może pobrać tło podwójnie? Najpierw dla nie-retina i drugie dla retiny. Tła zazwyczaj same w sobie już mają duży rozmiar. Mowa tutaj o tych “full screen photo backgrounds”, które ostatnio są bardzo w modzie, a nie o starych dobrych patternach ;o)

Postępuj mądrze, a użytkownicy podziękują ci za to. Cokolwiek nie zdecydujesz, nie zapomnij zoptymalizować strony. Część „Wydajność” w poście „Co trzeba sprawdzić uruchamiając stronę” powinna ci w tym pomóc.