☰

Duza fota w tle strony

Jak kazdy (mam nadzieję) patrze czasem skąd mam wejścia na strony, ostatnio dość sporo pojawiło się z digartu a najwięcej z jednego pytania na forum. Pytanie z tych „jak coś zrobić bo mój informatyk twierdzi że się nie da” … śpieszę z odpowiedzią – da. Ale cytując dokładnie:

jak zrobic zeby duze zdjecie ładowało sie szybko a kompresja nie była widoczna??? czy sa jakieś magiczne sposoby o ktorych nie udało mi sie dowiedzieć?
czy tez może załozyc ze teraz juz wszyscy maja dostep do internetu na tyle szybki że kilkanascie sekund ładowania nie jest baaardzo wkurzajace?

Od końca – kilkanaście sek to za długo jak dla mnie, trza coś zrobić żeby ładowało się max 5-7 s. Sposobów jest na to kilka, potrzebna jest też elementarna wiedza na temat kompresji i optymalizacji grafiki. (teraz piękny tekst) Za moich młodych lat, kiedy coś takiego jak projektowanie stron to było novum taka wiedza była niezbędna. Zmniejszenie wagi strony o 1 kilobajt to był wielki sukces … teraz nawet dla mnie zauważalna różnica to dopiero sto-krotność tej wartości. Ale przy dużych zdjęciach wiedza się przydaje.

Ja zakładam że ludziska mają szybkie łącza, przynajmniej zakładam że ta akurat grupa docelowa powinna mieć szybkie łącze. Ok, ale dość wspominek, konkrety:

1

Kolor tła pozwalający na odczytanie informacji przed załadowaniem grafiki
Banalne? Niekoniecznie, co i rusz spotykam stronę która ma w tle ciemne zdjęcie na nim białe litery a background jest ustawiony na #FFFFFF – efekt, przed załadowaniem zdjęcia nie zobaczę nic.

2

Odpowiedni dobór zdjęcia, nie każda fota się kompresuje
niby każda … ale jedna lepiej a druga gorzej, duże jednolite powierzchnie z gradientem poprzedzielane elementami skompresują się niezależnie od formatu kiepsko. Nie trzymać się kurczowo jednego zdjęcia, często lepiej poświęcić czas na znalezienie alternatywy … zresztą dobry dobór zdjęcia to połowa sukcesu w takim wypadku.

3

Wybór odpowiedniej metody kompresowania
Gif odpada (gif to zabawa dla ludzi którzy wiedzą jaki efekt osiągną … taka trochę specyficzna zabawa), png przy skomplikowanym zdjęciu będzie duży a jpg da nieprzyjemne fraktale przy odrobinę większej kompresji kiedy elementy jednolite będą graniczyć z niejednolitymi. Cała powierzchnia niejednorodna idealnie pasuje do kompresji jpgiem a przy całkowicie jednolitym tle wybieramy png (gif czasem też przejdzie – rada: popróbować i patrzeć na stosunek wielkości do jakości).

4

Znać sztuczki, np. zamaskować kompresję
Sztuczka stosowana przeze mnie dość często kiedyś a i teraz w dwu projektach wróciłem do tego (zmieniło się jedynie to że kiedyś maskowałem kompresje jpg a teraz jakość filmu). Dajemy 2 tła, jedno zdjęcie skompresowane do jpga w jakości która odrzuca każdego estetę a na to dany plik png/gif o wymiarach 2px na 2px z kratką (jak w przykładzie obok ). Efekt, zdjęcie trochę przyciemnione albo rozjaśnione ale nie widać nic kompresji.

5

Podzielenie tła na mniejsze części
Kiedyś na portfolio misz.com ten trick stosowałem – ale obecnie chyba nie polecam. Na pewno szybciej ściągnie się 5 mniejszych grafik niż jedna duża (choć procentowo to nie wygląda atrakcyjnie). Rozwiązanie to posiada jednak jedną wadę – po załadowaniu tylko części tła projekt najczęściej wygląda kiepsko. Oczywiście efekt ładowania kolejnych kawałków może być zamierzony …

Celowo ominąłem flasha, preloadery czy nie wspomniałem o cashowaniu obrazków bo to temat rzeka. I to chyba na tyle, mama wrażenie że wyczerpałem temat – jeśli nie to poprawcie mnie.

Tagi: , , , ,