Optymalizacja plików graficznych

Strony internetowe są coraz bogatsze w multimedia i zdjęcia. Są przez to również znacznie większe objętościowo. Wydaje się, że przy dzisiejszej szybkości połączeń internetowych nie stanowi to problemu, jednakże należy pamiętać także o użytkownikach urządzeń mobilnych, których transfer plików jest limitowany. Ale to nie jedyny powód, również Google coraz większą uwagę przywiązuje do objętości i szybkości wczytywania się strony podczas ustalania kolejności wyświetlanych wyników w serpach. To powoduje, że należy z rozwagą stosować multimedia, a te które zamieszczamy na stronie www powinny zostać zoptymalizowane.
Istnieje wiele narzędzi, które nam to umożliwiają.

GT Metrics

gtmetrics

Narzędzie GT Metrics służy przede wszystkim do oceny szybkości ładowania strony. Opisuję je jako pierwsze właśnie z tego względu. Jak na dłoni widać czy optymalizacja jest potrzebna. Uwzględnia ono zarówno współczynnik PageSpeed Google’a jak i współczynnik Yslow Yahoo! Oba powinny być powyżej 80 punktów. Optymalny czas ładowania strony to 3 sekundy. Jednak GT Metrics pozwala nam także na optymalizację plików zawartych na stronie, a zoptymalizowane możemy pobrać na dysk i wykorzystać.

Smush.it

Nie wspierane już narzędzie Yahoo! do optymalizacji plików jpeg. Nie ma co prawda wersji online, ale jest plugin do WordPress’a, który zmniejszy wielkość plików.

TinyPNG

Tiny PNG

To narzędzie już opisywałem, ale muszę o nim wspomnieć także przy tej okazji. TinyPNG pozwala w trybie online zoptymalizować m.in. 24-bitowe pliki PNG z przezroczystością (nawet o 70%) czy jpegi. Dostępne także jako plugin do ..

RIOT (Radical Image Optimization Tool)

riot

To program pod Windows, z którego korzystałem optymalizując setki plików dla jednego z projektów, nad którymi pracowałem. Podstawowa zaleta to przetwarzanie wsadowe (batch), niezwykle proste i łatwe w stosowaniu.

SVG Editor

Nie tylko bitmapy można zoptymalizować. Także wektorowe pliki SVG można dość znacznie wyczyścić z niepotrzebnych śmieci dodawanych przez edytory graficzne takie jak Illustrator. Na co dzień wykorzystuję do tego dostępny online SVG Editor.

Na koniec mały trik w pliku .htaccess poprawiający wydajność strony. Poniższy kod „skeszuje” pliki graficzne by nie ściągały się za każdym razem z serwera.

# Enable GZIP
<ifmodule mod_deflate.c>
# AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</ifmodule>

# Expires Headers – 2678400s = 31 days
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault „access plus 1 seconds”
ExpiresByType text/html „access plus 7200 seconds”
ExpiresByType image/gif „access plus 2678400 seconds”
ExpiresByType image/jpeg „access plus 2678400 seconds”
ExpiresByType image/png „access plus 2678400 seconds”
ExpiresByType text/css „access plus 518400 seconds”
ExpiresByType text/javascript „access plus 2678400 seconds”
ExpiresByType application/x-javascript „access plus 2678400 seconds”
</ifmodule>

# Cache Headers
<ifmodule mod_headers.c>
# Cache specified files for 31 days
<filesmatch „\.(ico|flv|jpg|jpeg|png|gif|css|swf)$”>
Header set Cache-Control „max-age=2678400, public”
</filesmatch>
# Cache HTML files for a couple hours
<filesmatch „\.(html|htm)$”>
Header set Cache-Control „max-age=7200, private, must-revalidate”
</filesmatch>
# Cache PDFs for a day
<filesmatch „\.(pdf)$”>
Header set Cache-Control „max-age=86400, public”
</filesmatch>
# Cache Javascripts for 31 days
<filesmatch „\.(js)$”>
Header set Cache-Control „max-age=2678400, private”
</filesmatch>
</ifmodule>

<FilesMatch „\.(php)$”>
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
Header set Cache-Control „private, no-cache, no-store, proxy-revalidate, no-transform”
</IfModule>
</FilesMatch>

 

Reklamy
Optymalizacja plików graficznych

Przydatne narzędzia

Podczas prac nad wdrożeniem strony internetowej liczy się każda godzina. Im szybciej będziesz w stanie wykonać zaplanowane zadania tym więcej czasu pozostanie ci na inne zlecenia lub na wolne spędzanie czasu. Na szczęście jesteśmy rozpieszczani dużą ilością (bardzo często bezpłatnych) narzędzi, które pomagają nam wykonać znacznie szybciej typowe czynności.
Przygotowałem listę pięciu takich narzędzi, które bardzo często wykorzystuję.

Tinypng

Tiny PNG
Tinypng.com to usługa pozwlająca na zmniejszenie wagi (mówimy o kilobajtach) obrazków PNG i JPG. Ja korzystam zazwyczaj z funkcji zmniejszania PNG. Jakie mamy obecnie trendy projektowania każdy wie – duże zdjęcia. Jednak ponieważ należymy do osób, które cenią szybkość działania strony wypadałoby zoptymalizować wykorzystywane obrazki. To narzędzie idealnie nadaje się do optymalizacji 24-bitowych plików PNG z kanałem alfa. Efektywność sięga nierzadko około 70%.
https://tinypng.com/

CSS3 Box Shadow Generator

CSS3 Box Shadow Generator

Wbudowane w CSS3 funkcje pozwalają kilkoma liniami kodu zastąpić to co wcześniej uzyskiwaliśmy stosując bardziej pracochłonne metody, np. wykorzystanie obrazków. Przykładowo cienie pod elementami. Kiedyś wymagało to zastosowania kilku plików z obrazkami, teraz wystarczy kod. Jednak rosnąca ilość funkcji w CSS utrudnia ich zapamiętanie. Ta aplikacja pozwala nam w wizualny sposób przygotować cienie dając gotowy do wstawienia w arkusz styli kod.
http://css3gen.com/box-shadow/

Border Radius

Border Radius

Kolejną aplikacją tego typu jest Border Radius, z którego pomocą wygenerujemy kod dla zaokrąglonych krawędzi elementów. Plusem jest to, że możemy definiować każdy róg z osobna, nie przejmując się pamiętaniem w jakiej kolejności musielibyśmy wpisać każdą wartość.
http://border-radius.com/

Ultimate CSS Gradient Generator

CSS Gradient Generator

Fantastyczną opcją jaką daje nam CSS3 jest możliwość zdefiniowania gradientów. Ponieważ jest to pracochłonne możemy uprościć sobie życie aplikacją od Colorzilla. Gradient definiujemy całkowicie wizualnie. Możemy dodać wiele punktów granicznych, a ostatecznie otrzymujemy kod, który pracuje w większości (wszystkich nowych) przeglądarek. O ile potrzebuję gradientu składającego się z więcej niż dwóch kolorów to zawsze korzystam z tego narzędzia.
http://www.colorzilla.com/gradient-editor/

Modular Grid

Modular Grid

Obecnie layout strony zazwyczaj oparty jest na siatce (grid). To rozwiązanie jest bardzo wygodne o ile zmusimy grafika żeby się do niego stosował. Czasem jednak potrzebna jest nam siatka niestandardowa. Dzięki temu narzędziu możemy sobie wygenerować ją na podstawie zadanych parametrów. Dodatkowo wygeneruje pliki dla grafika jako szablon pod projekt strony.
http://modulargrid.org

Przydatne narzędzia