Wszystkie wpisy

Obrazy bez spowalniania strony

Kilka praktycznych zasad przygotowania zdjęć, żeby nie ciągnęły w dół czasu wczytywania.

Wpis przykładowy. Dotyczy obrazów, bo to najczęściej najcięższa część strony.

Skala przede wszystkim

Największy zysk daje przeskalowanie pliku do rozmiaru, w jakim obraz faktycznie się pokazuje. Zdjęcie o szerokości 4000 pikseli wstawione w kartę o szerokości 360 pikseli to najczęstszy błąd.

Formaty

  • Zdjęcia: nowszy format z zapasem w postaci starszego.
  • Grafiki z ostrymi krawędziami i napisami: format bezstratny.
  • Zrzuty ekranu: zwykle warto sprawdzić oba warianty, bo wynik bywa zaskakujący.

Atrybut sizes

Jeśli obraz skaluje się razem z szerokością okna, warto opisać przeglądarce, jaką szerokość zajmie przy typowych szerokościach ekranu. Bez tego pobierze plik za duży albo za mały.

Ładowanie

Obrazy nad zgięciem warto ładować od razu, resztę dopiero gdy są potrzebne. Każdy obraz powinien mieć zarezerwowane miejsce, żeby po jego wczytaniu strona nie skakała.

Sprawdzenie

Wystarczy otworzyć narzędzia deweloperskie, ustawić wąskie okno i zobaczyć, jaki plik jest naprawdę pobierany. To weryfikuje wszystkie powyższe punkty naraz.