Jeśli chcecie mnie wesprzeć to zapraszam do kupna mojego poradnika "Jakim jesteś Makiem?".

Nowy iPad powoduje, że internet staje się brzydki

· Wojtek Pietrusiewicz · 8 komentarzy

Nowy ekran w iPadzie o rozdzielczości 2048×1536 ma jeden ogromny mankament – powoduje, że wiele stron internetowych staje się po prostu brzydka ze względu na zastosowaną grafikę. Jest na to jednak w miarę proste rozwiązanie, chociaż tymczasowe.

@media

W przypadku Makowego ABC, nie chcąc obciążać limitu transferu osób wchodzących na stronę mobilnie, podniosłem rozdzielczość samego logo za pomocą następującego kodu w CSS:

@media only screen and (-webkit-device-pixel-ratio: 2)
{
.custom #header { background-image: url(http://link_do_logo_w_hi_res.png); }
}

Oryginalne logo ma rozdzielczość pionową 115px. Najpierw wrzuciłem drugą wersję z czterokrotnie wyższą liczbą pikseli (230px w pionie), ale nadal nie było za ładnie, więc zdecydowałem się na 460px.

Porównanie (100% cropy)

Oryginalne logo na iPadzie 3 na lekkim zbliżeniu:

Logo 2x na iPadzie 3 na lekkim zbliżeniu:

Logo 4x na iPadzie 3 na lekkim zbliżeniu:

Uff – teraz jest znacznie lepiej. Jak już wspominałem, nie będę na dzień dzisiejszy zmieniał innych grafik czy zdjęć ze względu na fakt, że wiele osób wchodzi na stronę z urządzeń mobilnych, co spowodowałoby znaczące zwiększenie transferu, szczególnie w przypadku zdjęć.

Więcej informacji na ten temat znajdziecie pod następującymi linkami:

Chcesz zwrócić mi na coś uwagę lub skomentować? Zapraszam na @morid1n lub na forum.

  • bidji

    no tak. wszyscy chcieli super-ekran a nikt nie uprzedzał, że skończy się na przeróbkach stron ;)

  • Brzydsze grafiki i nieskazitelny tekst.
    Wojtek coś uświadamia, nie narzeka. Chyba że się mylę.

  • Dokładnie – nie narzekam, bo przy paru prostych zabiegach można internet ponownie uczynić pięknym. :)

  • bidji

    a ja nie o @Moridin:disqus a wpisie, tylko przewiduje olaboga-świat-się-kończy wpisy gdzieniegdzie :-)

  • Apple coś przekombinowało przy okazji firmware’u 2.x, ponieważ mój iPhone jeszcze na 1.1.4 wyświetlał powiększone grafiki normalnie – czyli lekko zmodyfikowaną (nie przypominam sobie przesadnego aliasingu, czyli „migotania” obrazu) metodą „najbliższy sąsiad”, zamiast silić się na jakieś „ładne i gładkie przeskalowania, które tylko rozmywają obraz”, dzięki czemu taka powiększona grafika wyglądała dość przyzwoicie…

    … niestety tak już zostało, co widać na obrazkach załączonych w tekście…

    Podobnie było w przypadku iPhone’a 4 i iPada i aplikacji „nie retina” – iPad dublował piksele, co wyglądało znośnie (chyba że ktoś jest uczulony na widok kwadratowych pikseli), podczas gdy iPhone 4 wyświetla wszystko jako gładko-mdłą papkę, niszcząc cały wysiłek i oryginalny zamysł twórców (nieraz przygotowujących grafikę – mniej lub bardziej dosłownie – piksel po pikselu)…

  • A ja popełniłem na szybko coś takiego: http://macnow.pl/ios/retina/.
    Prosty JavaScript. Obrazki wystarczy wrzucać na serwer jako: obrazek.jpg oraz obrazek_2x.jpg i tym które mamy w wersji pod Retinę dodajemy klasę -> class=”retina-image”. Na normalnym urządzeniu będzie ładowana zwykła wersja. A na iPhone 4/4S i nowym iPadzie po załadowaniu strony obrazki się podmienią na HiResy.

    Co o tym myślicie?

  • Ma to sens o ile chcesz się bawić w dodawanie klas.

  • Klasę „retina-image” można dodać w WordPressie wstawiając obrazek do wpisu. Z CSSa nie obsłużysz tego, żeby inny source ładował, a bez sensu zwiększać wszystkie zdjęcia czterokrotnie. Mam jeszcze wersję, która mierzy czas ładowania strony… można określić, że jeśli więcej niż np. 500-1000ms (mamy wolne połączenie), wtedy nie ładuje retinowych grafik.