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).

Ściągnij IrfanView-32bit

Ściągnij IrfanView-64bit

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.

Infranview

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ć ile zajmuje strona i jej prędkość?

Doskonałym narzędziem jest strona Pingdom Website Speed Test

Na stronie po wpisaniu adresu naszej strony rozpocznie się test który pokazuje wydajność naszej strony.

Na przykład ta strona otrzymuje bardzo wysoki wynik, co przekłada się na szybkie ładowanie:

speed test

Jak widać wielkość strony (Page size) to tylko 1MB, czas ładowania (Load time) niecała sekunda, co daje wydajność (Performance grade A) prawie 100% możliwych.



Zasoby website.info

Zobacz najnowsze frameworki i skrypty do front-endu w jednym miejscu!


Zobacz
  • Frameworki
  • Skrypty
  • Nawigacje
  • Przyciski
  • Animacje CSS
  • Javascript
  • jQuery
  • Grid system
  • Gradienty
  • Pluginy
MaterializeCSS

Tutorial frameworku Materialize który pokazuje jak zbudować prostą i responsywną stronę internetową.


Zobacz