Umieszczając grafikę na stronach internetowych zazwyczaj skupiamy się na tym, by było ładnie i… tyle. Szybkie łącza internetowe dają nam ten luksus, że nie musimy się zbytnio martwić czasem ładowania strony. Okazuje się jednak, że optymalizacja grafiki ma ogromne znaczenie nawet teraz. Szybkość ładowania strony jest wciąż jednym z czynników wpływających na pozycję strony w wynikach wyszukiwania Google, a coraz więcej użytkowników korzysta z urządzeń mobilnych, gdzie szybkość połączenia internetowego pozostawia wiele do życzenia.
Zarówno podczas projektowania strony internetowej, jak i później, dodając kolejne wpisy, powinniśmy zwracać większą uwagę na optymalizację wykorzystywanych plików graficznych. Zajmując się pozycjonowaniem stron internetowych skupiamy się na optymalizacji kodu HTML, pomijając grafikę, która stanowi zdecydowaną większość zajmowanych na serwerze zasobów. Ponadto pliki graficzne mogą być także dobrym źródłem odwiedzin poprzez wyszukiwarkę obrazów Google. Poniżej przedstawiam kilka punktów, na które warto zwrócić uwagę, jeśli zależy nam na prawidłowej optymalizacji grafiki na stronie internetowej.
1. Format plików graficznych
Najczęściej wykorzystywane w internecie formaty plików graficznych to JPEG i PNG. Nie oznacza to jednak, że powinniśmy je dobierać dowolnie. Prawda jest taka, że JPEG nadaje się bardziej do kolorowych fotografii, natomiast PNG sprawdza się lepiej w przypadku prostszych grafik. Trzeba też zauważyć, że PNG obsługuje przezroczystości, których nie można wykorzystać w przypadku plików JPEG. Jeśli grafika na stronie wymaga zastosowania przezroczystości, nie mamy więc wyboru.
Umieszczając obrazy na stronie internetowej powinniśmy zapisać tę samą grafikę w różnych formatach i decydować się na taki, którego stosunek jakości i rozmiaru będzie najkorzystniejszy. Jako przykład mogę powiedzieć, że umieszczony powyżej obrazek z porównaniem formatów grafiki zapisany w PNG zajął 150 kB, a w JPEG tylko 65,5 kB. Różnica w jakości była niezauważalna, więc wybór był prosty.
2. Kompresja obrazków
Umieszczając zdjęcie lub jakąkolwiek grafikę na stronie nie zawsze musimy posługiwać się plikiem najwyższej jakości. Jako przykład podam przedstawiony powyżej obrazek JPEG. Choć format JPEG wykorzystuje kompresję stratną, mamy pewne pole działania, w ramach którego możemy dowolnie modyfikować stopień kompresji bez widocznego spadku jakości.
Przyznaję, że kilka kB, które możemy zyskać w przedstawionym przykładzie nie odgrywa aż tak dużej roli. Ma to jednak znaczenie jeśli spojrzymy na to szerzej. Przy większej liczbie plików graficznych możemy uzbierać sporo kB, które mogłyby niepotrzebnie zużywać cenny transfer. Przy większych obrazach taka kompresja jest niemal obowiązkowa.
3. Rozdzielczość obrazów na stronie
Kwestia nieprawidłowych rozdzielczości plików graficznych raczej nie występuje w przypadku grafiki stanowiącej layout strony internetowej. Takie elementy są raczej projektowane we właściwych rozmiarach. Bardzo często zdarza się jednak, że umieszczając obrazy na stronie dopasowujemy jej wymiary poprzez użycie atrybutów HTML lub stylu CSS. W ten sposób często zdjęcia o ogromnych rozmiarach są „sztucznie” zmniejszane w kodzie, podczas gdy ich rozmiar na serwerze pozostaje niezmienny.
Decydując się na umieszczenie zdjęć lub innych plików graficznych na stronie powinniśmy zmniejszać ich rzeczywiste wymiary, by nie zajmowały zbyt wiele w pamięci.
4. Trik z jQuery Lazy Load
Ciekawym sposobem optymalizacji grafiki na stronie internetowej może być specjalny plugin do jQuery Lazy Load. Wykorzystanie tego triku ma sens w przypadku długich stron, gdzie występuje dużo plików graficznych. Działanie Lazy Load polega na tym, że w pierwszej kolejności ładują się pliki graficzne, widoczne w górnej części strony. W momencie, gdy użytkownik zaczyna przewijać stronę w dół, ładowane są kolejne obrazy. Narzędzie to dostępne jest także w postaci wtyczki do WordPressa.
5. CSS Sprite
Technika CSS Sprite polega na łączeniu wszystkich plików graficzny layoutu strony w jeden. Stosując takie rozwiązanie można uzyskać wiele korzyści. Całkowity rozmiar grafiki zostaje przez to zmniejszony, a my nie mamy problemu z uporządkowaniem wielu plików z grafiką. Wykorzystanie tak utworzonego layoutu może sprawić trochę kłopotu. Gra jest jednak warta świeczki.
Dzięki połączeniu wszystkich plików ładowany jest tylko jeden obraz zawierający wszystkie elementy, zamiast każdego z osobna. W ten sposób przeglądarka wykonuje zdecydowanie mniej zapytań, przez co połączenie przebiega dużo szybciej.
Aby wykorzystać tak utworzoną grafikę należy trochę popracować nad kodem CSS. Za pomocą stylu ustala się, w którym miejscu, jaki fragment obrazu powinien zostać wykorzystany.
6. Prawidłowe wykorzystanie CSS i HTML
Skoro już mówimy o arkuszach stylu, warto w osobnym punkcie podkreślić ich wagę. Często zdarza się, że wiele elementów graficznych, jakie wykorzystujemy w layoucie strony, można równie dobrze zastąpić odpowiednim stylem CSS. Możliwości HTML 5 i CSS 3 są tak duże, że z odrobiną wysiłku można stworzyć naprawdę niewiarygodne efekty. Bez użycia zbędnych plików graficznych! Nie trzeba chyba tłumaczyć tego, że załadowanie tekstowych plików CSS i HTML jest o wiele szybsze, niż ociężałych plików graficznych.
Można by się upierać, że jest jeszcze za wcześnie na korzystanie z HTML 5 i CSS 3, bo nie wszystkie przeglądarki prawidłowo je interpretują. Ściślej mówiąc chodzi o Internet Explorer. Nie jest to jednak problem nie do rozwiązania. Wystarczy wykorzystać css3pie.com.
Nie wspomniałem o tym wcześniej, gdyż uważam to za totalne podstawy. Dla zasady przypomnę jednak, że grafika umieszczana na stronie internetowej MUSI być opatrzona odpowiednio dobranym atrybutem alt oraz uzupełniającym go tytułem title. Zdjęcia umieszczane na stronach warto także umieszczać wewnątrz znacznika <a></a> i tworzyć z nich linki do plików graficznych. Zwiększa to ich wartość dla wyszukiwarki i może mieć wpływ na ich pozycję w wynikach wyszukiwania obrazów Google.
Podsumowanie
Rozsądna optymalizacja grafiki na stronie internetowej może znacznie poprawić jej działanie oraz w pewnym stopniu (zapewne niewielkim) wpływać na jej wizerunek w oczach robotów Google. Przede wszystkim jednak zaoszczędzi zużycie transferu oraz przestrzeni na serwerze i zapewni użytkownikom szybkie i bezproblemowe wczytywanie strony.
A czy Ty zwracasz uwagę na elementy, które wymieniłem?
http://www.spriteme.org Mały skrypcik w JS, ale bardzo upraszcza optymalizacje. O samej technice dowiedziałem się kiedyś analizując kod źródłowy wyników w Google i właśnie bardzo mnie zastanowiło dla czego mają tak „dziwnie” połączone kilka obrazków w jeden. http://www.google.pl/images/nav_logo101.png
A co do samego odchudzania obrazków, to aż mi się nóż w kieszeni otwiera jak widzę logo, czy tło ważąca więcej jak 1MB, a wystarczy, by grafik zamiast na koniec ctrl+s kliknął ctrl+alt+shift+s (przykład dla Photoshopa). Notabene save for web w PS jest chyba najfajniejszym tego typu narzędziem jakie widziałem.
Hm… dwa linki… coś czuję, że komcio trafi do spamu ;-]
Jaki tam spam? Naturalne linkowanie ;p
A jeśli chodzi o spriteme.org, to jeszcze z tego nie korzystałem, więc z chęcią przetestuję.
Ja zawsze sam robię spitey i jest to chyba jedna z najlepszych i najskuteczniejszych technik na szybkie ładowanie witryny.
Zamiast 15 plików ciągniemy 1 i cała (lub prawie cała) grafa gotowa;]
Bez urazy ale nie wiem czy się znasz na optymalizacji obrazów po tym co napisałeś. Tę technikę wykorzystuje się powszechnie do skalowania obrazów i jest ona bardziej efektywna niż interpolacja programowa zdjęć, gdzie mamy często do czynienia ze wzrostem rozmiaru obrazu.
Druga rzecz, nie wiem czy zadałeś sobie w ogóle trud, aby sprawdzić wydajność obydwu rozwiązań, bo byś wiedział że zdecydowanie lepiej stosować metodę dopasowania przez HTML/CSS.
PS. Mimo wszystko uważam że masz ciekawy blog, będę tutaj częściej zaglądał.
Pozdrawiam, MK
Wiem, że tę technikę wykorzystuje się powszechnie. Chodzi mi o to, że często obrazy na serwerze są zbyt duże, a ich rozdzielczość przekracza nasze wymagania. Patrząc na to „na chłopski rozum” można zauważyć, że lepiej od razu przeskalować takie pliki przed wysłaniem na serwer. W ten sposób oszczędzamy miejsce na serwerze, transfer i skracamy czas ładowania grafiki.
Skoro wymagasz ode mnie sprawdzenia wydajności obu rozwiązań, umieściłem na 3 różnych stronach takie samo zdjęcie. Na jednej zostało przeskalowane programowo, na drugiej zostało zmniejszone atrybutami HTML, a na trzeciej CSS-em, tak by rozmiar na stronie był taki sam. Czas ładowania stron wyniósł odpowiednio: 582ms, 787ms i 777ms. Nie wiem dlaczego wynik miałby być inny…
Hehe wiesz jak robić testy pod siebie to muszę ci przyznać.
Podaj metodologię badania, linki do stron/podstron testowych aby każdy mógł to zbadać i wyciągnąć wnioski, rozmiar pierwotny zdjęcia i po zmniejszeniu, jakim algorytmem był zmniejszany, jakie narzędzia były użyte do testów wydajnościowych etc.
Jak już robisz test to rzetelnie a nie z kosmosu wyniki bierzesz w dodatku kompletnie takie, które nie odwzorowują rzeczywistości. Troszkę profesjonalizmu 🙂
Siedzę w optymalizacji grafiki już dwa lata więc jak już coś chcesz udowodnić na siłę przynajmniej profesjonalnie to wykonaj. Bez urazy, nie mam nic do Ciebie ale takie są fakty i ciężko się do tego nie odnieść.
Pozdrawiam
Ok. Rozumiem Twoje rozterki dotyczące niedoskonałości interpolacji jako metody skalowania plików graficznych. Nie powiesz mi jednak, że chcąc umieścić na stronie zdjęcie z wakacji z aparatu 10 MPx wolisz przesłać na serwer plik o rozdzielczości 3872 x 2592 px, niż go zmniejszyć i dopasować do strony? Przecież to bez sensu.
Nie robię testu pod siebie, tylko pod sytuację, o której mówię. Nie miałem zamiaru zagłębiać się w algorytmy skalowania, dlatego nie robię żadnych szczegółowych badań i nie wymagaj ode mnie profesjonalizmu w czymś, co nie było moim celem. Mi zależy na tym, żeby pliki graficzne zajmowały mało miejsca na serwerze i nie spowalniały ładowania strony. Nie wnikam w narzędzia użyte do skalowania i w algorytmy, jakie one wykorzystują. Mówię o zmniejszaniu rozdzielczości obrazu w celu zmniejszenia ich rozmiaru na dysku. Nawet, jeśli zmniejszony metodą interpolacji plik graficzny zajmuje więcej miejsca, można go skompresować.
W przykładzie, o którym wspomniałem, do skalowania użyłem Photoshopa z interpolacją dwusześcienną bez wyostrzania. Jeśli interesują Cię linki, to:
Skalowanie atrybutami HTML
Skalowanie stylem CSS
Skalowanie programowe
Czas ładowania, jaki podałem, pochodzi ze strony GTmetrix.com.
A czy ja mówię o takich skrajnościach, zwykle przy zmniejszaniu do 30% w stosunku do oryginalnej rozdzielczości paradoksalnie uzyskuje się lepszy wynik przy oryginalnym zdjęciu aniżeli byśmy robili zmniejszanie metodą programową. Ostateczna skala % zależy jeszcze od rozdzielczości pierwotnego zdjęcia.
Przy zdjęciach wysokiej rozdzielczości zgadzam się – w tej sytuacji w 99/100 przypadków obraz będzie mniejszy jednakże podobnie jak i przy klasycznych zrzutach do 640×480 jeśli skalowanie będzie na mniejszym poziomie np. zmniejszenie o 10% to po raz kolejny dojdzie do sytuacji, w której zdjęcie oryginalne będzie mniejsze od przeskalowanego – i tutaj zastosowanie css do skalowania jest uzasadnione.
Nie denerwuj się tak bo każdy z nas ma rację. Kwestia tylko punktu odniesienia jaki przyjmujemy. W większości na stronach nie mamy do czynienia z mega zdjęciami a typowymi zrzutami stąd moje duże zastrzeżenia co do Twojej wypowiedzi.
Ps. Użycie Photoshopa do skalowania nie jest zbyt dobrym pomysłem. Wszyscy mówią że to wspaniała aplikacja ale z całym szacunkiem, do optymalizacji obrazów to on nie nadaj się, również z uwagi na skąpy zasób algorytmów przetwarzania obrazów. Oczywiście może ktoś powiedzieć że znalezienie wtyczki do niego realizującej określone zadanie to pestka, niemniej jednak domyślnie tego nie zawiera.
Ostatnia rzecz, każde zdjęcie jest inne, grafikę wektorową trzeba inaczej optymalizować, zdjęcia z przejściami tonalnymi inaczej, zdjęcia z dużą ilością szczegółów jeszcze inaczej. Nawet typowe zdjęcia robione aparatami cyfrowymi różnią się złożonością, nawet głupia intensyfikacja barwy wpływa na metodę optymalizacji. Wiem że to jest dziwne ale nie ma metody idealnej, każdą metodę dobiera się pod konkretną fotografię.
Pozdrawiam i przepraszam że się tak na to „rzuciłem” ale sprowadzanie wszystkiego do jednej kwestii lub uogólnianie wszystkiego nie jest dobrym pomysłem.
Właśnie na tym polegała moja rada. Aby grafika na stronach nie była mega zdjęciami.
Jeśli chodzi o Photoshopa, to znam jego wady skalowania i spodziewałem, się tego, że się przyczepisz 😉
Celowo podkreśliłem w komentarzu to, że nawet z wykorzystaniem Photoshopa można zmniejszyć rozmiar grafiki przez jej skalowanie. Wychodzi tylko na to, że po prostu rozmawiamy o dwóch całkiem innych przypadkach…
Toście zburzyli mój cały światopogląd 😉 Do tej pory fotki 10M z aparatu obrabiałem i zmniejszałem w PS do 1000px szerokości. Później wysyłałem to do WP, który dodatkowo tworzył sobie pliki o szerokości 660px (po kliknięciu ładują się 1000px).
I teraz wychodzi na to, że cała ta moja strategia jest do kitu? Czyli lepiej by było obrobić zdjęcie w PS, jakimś innym programem (możecie coś polecić?) zmniejszyć je do 1000px i do postów wstawiać pełne 1000px przeskalowane w CSS do 660px, tak?
Wystarczy, że zmniejszysz zdjęcie w PS. Pamiętaj, że jeśli w Twoim rozwiązaniu przeglądasz zdjęcia na stronie, to tak naprawdę ładujesz oba – 660px i 1000px..
hm… Aż tak dokładnie nigdy nie podchodziłem do kwestii optymalizacji grafiki. Przy galeriach zdjęć na pewno można osiągnąć fajne efekty, tylko do baniaka trzeba by było sobie powbijać trochę kolejnych info o narzędziach, metodach, zaletach i wadach. Zazwyczaj jednak wystarczy to co jest tu opisane aby osiągnąć może nie 100% zamierzanego efektu, ale 80% efektu myślę, że styka.
Osobiście preferuję png, ponieważ lubię ową „przejrzystość”. W chwili, gdy mieszam coś z tłem nie muszę się w ogóle przejmować grafiką 🙂
Z jednej strony ok, z drugiej jednak takie pliki z przezroczystością mogą sporo ważyć, co nieraz znacznie spowalnia ładowanie się strony. Przezroczystości stosuję więc tylko wtedy, gdy jest to konieczne.