Grafika na stronie internetowej
Grafika na stronie.
Grafika na stronie internetowej zawsze dodaje jej pewnego indywidualizmu, wystarczy z przykładowego szablonu zabrać grafikę i często czar pryska, możemy ze zdziwieniem stwierdzić, że layout który jeszcze chwilę temu nam się podobał już wcale nie jest taki wyjątkowy i efektowny.
Częsty błąd to brak jej optymalizacji, zdjęcia bez edycji często zajmują po kilka megabajtów, efekty łatwo przewidzieć, długi czas ładowania strony zniechęci odwiedzającego na starcie, dodatkowo osoby, które mają skromniejsze pakiety internetowe nie będą zachwycone jeśli każde wejście na stronę zabierze im kilkanaście megabajtów transferu.
Recepta jest bardzo prosta:
Zmniejszenie rozmiaru
Rodzaju kompresji
Lekkie zmniejszenie jakości
I już mamy plik kilkukrotnie mniejszy
Bardzo fajnym programem (i dość prostym w obsłudze) jest Infranview (jest do niego spolszczenie).
Program prócz podstawowych funkcji przycinania, edycji wielkości, koloru, jest również kilka filtrów, przy zapisie pliku JPG możesz wybrać jakość, tutaj zwykle można zejść do wartości 80-85 bez mocno widocznej utraty jakości.
Tak więc bazowo zdjęcie które ma wielkość 3000×2000 (2-4MB) spokojnie możemy zmniejszyć do powiedzmy 800×600 i jakości 85% co da nam raptem 80-150kb tak więc różnica jest znaczna. Jeśli chodzi o grafikę na stronie internetowej nie warto przesadzać z jej ilością i dostosować ją do treści, strona powinna zajmować nie więcej jak 1-2MB co pozwoli na bezstresowe z niej korzystanie, jak sprawdzić prędkość strony?
Doskonałym narzędziem jest PageSpeed Insights, który jest częścią bardziej rozbudowanego narzędzia od Google - Lighthouse (dostępny w przeglądarce Google - Chrome).
Na stronie po wpisaniu adresu naszej strony internetowej rozpocznie się test, który pokazuje ogólną wydajność.
Na przykład ta strona otrzymuje bardzo wysoki wynik, co przekłada się na szybkie ładowanie:
Jak widać wynik to 100 co daje maksymalną możliwą wydajność.