Jak kompresować obrazy na stronę internetową

Dlaczego optymalizacja obrazów ulepsza stronę internetową

Obrazy zazwyczaj stanowią znaczną część danych pobieranych przez stronę. Duży plik opóźnia wyświetlanie treści, zużywa więcej danych mobilnych i może pogorszyć komfort korzystania z witryny. Optymalizacja łączy trzy decyzje: wymiary, format i poziom kompresji.

Nie ma idealnej granicy dla wszystkich obrazów. Miniaturka powinna ważyć znacznie mniej niż zdjęcie zajmujące cały ekran. Celem jest zapewnienie wystarczającej liczby pikseli i jakości dla rzeczywistej przestrzeni, bez zmuszania przeglądarki do pobierania informacji, których nie będzie używać.

Zalecany przebieg krok po kroku

1. Określa maksymalną szerokość, przy której obraz będzie wyświetlany w układzie.
2. Przytnij ramkę przed kompresją, aby uniknąć zachowania obszarów, które zostaną wyeliminowane.
3. Wybierz format zgodnie z treścią i potrzebą przejrzystości.
4. Otwórz plik w kompresor obrazu i wypróbuj średnio-wysoką jakość.
5. Porównaj wagę i sprawdź tekst, krawędzie, powierzchnie i gradienty.
6. Opublikuj wynik i sprawdź stronę na telefonie komórkowym i komputerze.

Wymiary: unikaj przesyłania większej liczby pikseli niż to konieczne

Jeśli karta wyświetla obraz o szerokości 600 pikseli, przesyłanie zdjęcia o rozdzielczości 5000 pikseli jest zazwyczaj marnotrawstwem. Przeglądarka zmniejszy to wizualnie, ale najpierw będzie musiała pobrać cały plik. Przygotuj wersję zbliżoną do maksymalnego rozmiaru wymaganego przez projekt.

W przypadku ekranów o dużej gęstości przydatne może być zapewnienie wersji około dwukrotnie większej, ale w idealnym przypadku witryna powinna używać responsywnych obrazów z zestaw źródeł y rozmiary. W ten sposób każde urządzenie pobiera odpowiedni wariant zamiast tego samego gigantycznego pliku.

Jaki format wybrać

• JPG: dobra kompatybilność i rozsądny rozmiar dla nieprzezroczystych zdjęć.
• WebP: przydatny do zdjęć i grafiki internetowej; może zachować przejrzystość i oferować kompaktowe pliki.
• PNG: nadaje się do przezroczystości, zrzutów ekranu z wyraźnym tekstem i prostą grafiką; Na zdjęciach może dużo ważyć.
• SVG: idealny do logo i ikon wektorowych, gdy plik jest bezpieczny, a projekt został utworzony jako wektor.

Konwersja z formatu nie gwarantuje mniejszego pliku. Zawsze porównuj wynik i zachowaj oryginalny format, gdy jest to najbardziej wydajna opcja. Skonsultuj się z porównanie pomiędzy JPG, PNG i WebP jeśli nie wiesz który wybrać.

Jak wybrać jakość kompresji

Zacznij od ustawienia skupiającego się na wyglądzie i kieruj się w dół. Zdjęcia lepiej tolerują kompresję niż zrzuty ekranu interfejsów, diagramy i mały tekst. Jeśli pojawią się aureole, bloki lub rozmyte krawędzie, zwiększ jakość lub wypróbuj inny format.

Oceń plik na stronie, a nie tylko w widoku rozwiniętym. Mała różnica widoczna przy 300% może nie być zauważalna przy normalnym rozmiarze; Prawdziwym problemem jest jednak nieczytelny charakter pisma na karcie.

Kompresja nie zastąpi dobrej implementacji

Oprócz optymalizacji pliku, zarezerwuj miejsce za pomocą atrybutów szerokość y wysokość , aby uniknąć pomijania treści. Używaj leniwego ładowania na obrazach znajdujących się poza pierwszym widocznym blokiem, ale nie opóźniaj głównego obrazu, jeśli jest to konieczne do zrozumienia strony.

Dobrym pomysłem jest także zdefiniowanie długiej pamięci podręcznej dla plików o wersjonowanych nazwach i unikanie ładowania tego samego obrazu w wielu rozdzielczościach przy użyciu CSS. Decyzje te wymagają zmian w witrynie, ale uzupełniają oszczędności uzyskane podczas kompresji.

Typowe błędy

Kompresuj przed podjęciem decyzji o rozmiarze

Późniejsza zmiana rozmiaru wymusza dwukrotne przetworzenie pliku i może skumulować straty. Zdecyduj najpierw o oprawie i wymiarach; kompresuj na końcu.

Konwertuj zrzuty ekranu do JPG o niskiej jakości

Drobne litery i linie mogą powodować rozmazywanie. Wypróbuj PNG lub WebP w wyższej jakości i porównaj wagę.

Użyj małego obrazu jako nagłówka

Rozwinięcie nie przywraca szczegółów. Zaczyna od wystarczająco dużego źródła i generuje mniejsze warianty z tej wersji.

Często zadawane pytania

Ile powinien ważyć obraz internetowy?

Zależy to od jego wymiarów, wagi i złożoności. Jako kryterium należy przyjąć najniższą wagę, która zachowuje akceptowalną jakość w ostatecznym rozmiarze, zamiast dążyć do uniwersalnej sylwetki.

Czy powinienem przekonwertować wszystkie obrazy na WebP?

Niekoniecznie. WebP jest przydatny, ale prosty PNG lub już zoptymalizowany plik może nie zostać ulepszony. Przekształć próbkę, zmierz i zachowaj oryginały.

Czy sama kompresja obrazów poprawia pozycjonowanie?

Pomaga w zwiększaniu doświadczenia i wydajności, ale ranking zależy również od przydatnej treści, indeksowania, linków, zamiarów wyszukiwania i wielu innych sygnałów. Kompresja to jeden z elementów dobrze przygotowanej strony internetowej.