Optymalizacja strony - jeszcze raz o obrazkach

Opublikowano:
W poprzednim poście na temat optymalizacji strony przedstawiłem, krótki opis jak dobierać obrazki. Dzisiaj kontynuacja tegotematu

Przeczytaj poprzedni post

Optymalizacja strony internetowej to nie tylko dostosowanie jej pod względem słów kluczowych, ale także jej wygląd, lekkość i szybkość ładowania - która jest bardzo ważna dla stron internetowych przeglądanych na komórkach, a nie wolno pominąć grona osób, która korzystają z internetu za pomocą telefonu (dla przykładu dla jednej z moich stron - oglądalność przez telefony komórkowe wynosi ponad 50%). Z całej strony najcięższe są obrazy, dlatego też skupmy na nich szczególną uwagę.

Aby dobrze wstawić obrazek na stronie internetowej należy:

  1. Dobrać odpowiednio jego wymiary. Rozdzielczość grafiki na stronie nie powinna być większa niż potrzebujemy. Jest to jedna z podstawowych zasad umieszczania grafik na stronie.
  2. Dobrać odpowiedni format grafiki. W zależności od tego co mamy na zdjęciu dobierzmy format graficzny. Najlepsze to png, jpg, gif, natomiast najgorszym jest bmp (więcej informacji w poprzednim poście).
  3. Skompersować obraz. Przed wstawieniem obrazu, należy go skompresować, do tego zadania polecam serwis TinyPNG, który potrafi zmniejszyć wagę grafiki o ponad 50% bez utraty jakości. Rownież PageSpeed od Google umożliwia pobranie zoptymalizowanych obrazów na stronie.
  4. Używaj base64, ale z głową. Kodowanie obrazów zmieniejsza ilość requestów na stronie, ale za to powiększa wagę dokumentu HTML. Przy tworzeniu strony internetowej warto base'ować obrazy statyczne (favicon, elementy szablonu strony), natomiast co do reszty, wystarczy obraz wstawiony w klasyczny sposób.

Jeśli masz sporo grafik na stronie (np galeria zdjęć) stosuj miniatury zdjęć - lepiej załadować 20 grafik po 2kb niż 20 grafik po 200kb. Warto także wstawić paginację w takiej galerii oraz asynchroniczne ładowanie obrazków na stronie, dzięki czemu użytkownik szybciej dostanie wynikową stronę na swoje urządzenie.

Jeśli interesuje Ciebie skrypt, który będzie asynchronicznie ładował obrazy na Twoim serwisie to zachęcam do pilnowania nowości w serwisie, bo niedługo zamierzam wstawić ten skrypt na blogu.


Podobne artykuły możesz znaleźc pod hasłami: zmniejszanie strony internetowej oraz optymalizacja strony internetowej