Pierwsze pytanie, jakie należy sobie zadać, brzmi: czy obraz jest faktycznie potrzebny do osiągnięcia pożądanego efektu. Dobry projekt jest prosty i zawsze zapewnia największą wydajność. Jeśli możesz wyeliminować zasób z obrazem, który często wymaga dużej liczby bajtów na stronie w stosunku do kodu HTML, CSS, JavaScript i innych zasobów, zawsze jest to najlepsza strategia optymalizacji. Jednak w dobrze rozmieszczonym obrazie może być więcej informacji niż tysiąc słów, więc musisz znaleźć równowagę.
Następnie zastanów się, czy istnieje alternatywna technologia, która pozwoliłaby osiągnąć oczekiwane wyniki w bardziej wydajny sposób:
- Efekty CSS (np. cienie lub gradienty) i animacje CSS mogą służyć do tworzenia zasobów niezależnych od rozdzielczości, które zawsze wyglądają ostrożnie w każdej rozdzielczości i poziomie powiększenia, często w przypadku ułamka liczby bajtów wymaganych przez plik graficzny.
- Czcionki internetowe umożliwiają korzystanie z atrakcyjnych krojów czcionki przy zachowaniu możliwości zaznaczania, wyszukiwania i zmieniania rozmiaru tekstu. Znacznie ułatwia to obsługę.
Jeśli w przyszłości natrafisz na kodowanie tekstu w komponencie z obrazem, zatrzymaj kod i zastanów się nad rozwiązaniem problemu. Doskonała typografia ma kluczowe znaczenie dla wyglądu, marki i czytelności. Z kolei tekst na obrazie zmniejsza wygodę użytkowników: tekstu nie da się zaznaczyć, wyszukać, powiększać, on jest niedostępny ani przyjazny dla urządzeń o wysokiej rozdzielczości. Korzystanie z czcionek internetowych wymaga własnego zestawu optymalizacji, ale rozwiązuje wszystkie te problemy i jest zawsze lepszym rozwiązaniem do wyświetlania tekstu.
Wybierz odpowiedni format obrazu
Jeśli masz pewność, że zdjęcie to odpowiednia opcja, ostrożnie wybierz odpowiedni rodzaj zdjęcia.
- Grafika wektorowa reprezentuje obraz za pomocą linii, punktów i wielokątów.
- Grafika rastrowa reprezentuje obraz przez kodowanie poszczególnych wartości każdego piksela w prostokątnej siatce.
Każdy format ma swoje wady i zalety. Formaty wektorowe idealnie nadają się do obrazów składających się z prostych kształtów geometrycznych, takich jak logo, tekst lub ikony. Zapewniają ostre wyniki w każdej rozdzielczości i przy wszystkich ustawieniach powiększenia, dzięki czemu są idealnym formatem dla ekranów o wysokiej rozdzielczości i zasobów wyświetlanych w różnych rozmiarach.
Jednak w przypadku skomplikowanych scen (np. w przypadku zdjęcia) formaty wektorowe są niewystarczające. Ilość znaczników SVG do opisania wszystkich kształtów może być zbyt duża, a wyniki mogą nie wyglądać „fotorealistycznie”. W takim przypadku należy użyć formatu obrazu rastrowego, takiego jak PNG, JPEG, WebP lub AVIF.
Obrazy rastrowe mają właściwości niezależne od rozdzielczości i powiększenia. Po przeskalowaniu obrazu rastrowego w górę obraz będzie postrzępiony i rozmyty. W rezultacie może być konieczne zapisywanie wielu wersji obrazu rastrowego w różnych rozdzielczościach, aby zapewnić użytkownikom optymalny komfort.
Konsekwencje korzystania z ekranów o wysokiej rozdzielczości
Istnieją dwa różne rodzaje pikseli: piksele CSS i piksele urządzeń. Jeden piksel CSS może odpowiadać bezpośrednio pojedynczemu pikselowi urządzenia lub być wspierany przez wiele pikseli urządzenia. O co chodzi? Cóż, im więcej pikseli urządzenia, tym mniejsza szczegółowość treści wyświetlanych na ekranie.
Ekrany o wysokiej rozdzielczości (HiDPI) dają zachwycające wyniki, ale jest jedna z oczywistych kwestii: zasoby graficzne wymagają większej ilości szczegółów, aby mogły wykorzystać większą liczbę pikseli urządzenia. Dobra wiadomość jest taka, że obrazy wektorowe idealnie nadają się do tego zadania, ponieważ można je renderować w dowolnej rozdzielczości i uzyskać ostre wyniki. Renderowanie drobnych szczegółów może kosztować więcej przetwarzania, ale zasób bazowy jest taki sam i nie zależy od rozdzielczości.
Z kolei obrazy rastrowe stanowią znacznie większe wyzwanie, ponieważ zakodują dane obrazu na podstawie poszczególnych pikseli. Dlatego im większa liczba pikseli, tym większy rozmiar pliku obrazu rastrowego. Na przykład przyjrzyjmy się różnicy między zasobem zdjęcia wyświetlanym w pikselach 100 x 100 (CSS):
| Rozdzielczość ekranu | Łączna liczba pikseli | Rozmiar nieskompresowanego pliku (4 bajty na piksel) |
|---|---|---|
| 1x | 100 × 100 = 10 000 | 40 000 bajtów |
| 2 x | 100 x 100 x 4 = 40 000 | 160 000 bajtów |
| 3 x | 100 x 100 x 9 = 90 000 | 360 000 bajtów |
Po podwojeniu rozdzielczości ekranu fizycznego łączna liczba pikseli rośnie czterokrotnie: Dzięki temu ekran o wymiarach „2x” nie tylko się podwaja, ale czterokrotnie zwiększa liczbę wymaganych pikseli.
Co to oznacza w praktyce? Ekrany o wysokiej rozdzielczości umożliwiają tworzenie pięknych zdjęć, co może być bardzo atrakcyjną cechą produktu. Ekrany o wysokiej rozdzielczości wymagają jednak zdjęć w wysokiej rozdzielczości, dlatego:
- W miarę możliwości preferuj obrazy wektorowe, ponieważ są one niezależne od rozdzielczości i zawsze zapewniają ostry obraz.
- Jeśli wymagany jest obraz rastrowy, wyświetlaj obrazy elastyczne.
Funkcje różnych formatów obrazów rastrowych
Oprócz różnych algorytmów kompresji stratnej i bezstratnej różne formaty obrazów obsługują różne funkcje, takie jak kanały animacji i przezroczystości (alfa). W efekcie wybór „właściwego formatu” dla danego obrazu to połączenie pożądanych wyników wizualnych i wymagań funkcjonalnych.
| Format | Przejrzystość | Animacja | Przeglądający |
|---|---|---|---|
| PNG | Tak | Nie | Wszystko |
| JPEG | Nie | Nie | Wszystko |
| WebP | Tak | Tak | Wszystkie nowoczesne przeglądarki. Więcej informacji znajdziesz w sekcji Czy mogę korzystać z aplikacji? |
| AVIF | Tak | Tak | Nie. Zapoznaj się z artykułem Czy mogę korzystać? |
Istnieją 2 uniwersalnie obsługiwane formaty obrazów rastrowych: PNG i JPEG. Oprócz tych formatów nowoczesne przeglądarki obsługują nowszy format WebP, a tylko niektóre z nich obsługują nowszy format AVIF. Oba nowsze formaty zapewniają lepszą ogólną kompresję i więcej funkcji. Który format wybierzesz?
WebP oraz AVIF zwykle zapewniają lepszą kompresję niż starsze formaty i należy je stosować tam, gdzie to możliwe. Jako kreacji zastępczych możesz używać obrazów WebP lub AVIF razem z obrazem JPEG lub PNG. Więcej informacji znajdziesz w artykule Korzystanie z obrazów WebP.
W przypadku starszych formatów obrazów uwzględnij te kwestie:
- Potrzebujesz animacji? Używaj elementów
<video>.- A co z GIF-ami? GIF ogranicza paletę kolorów do maksymalnie 256 kolorów i tworzy pliki o znacznie większym rozmiarze niż elementy
<video>. Zobacz Zastępowanie animowanych GIF-ów filmami.
- A co z GIF-ami? GIF ogranicza paletę kolorów do maksymalnie 256 kolorów i tworzy pliki o znacznie większym rozmiarze niż elementy
- Czy trzeba zachować drobne szczegóły i najwyższą rozdzielczość? Użyj formatu PNG lub bezstratnego formatu WebP.
- PNG nie stosuje żadnych stratnych algorytmów kompresji poza rozmiarem palety kolorów. W rezultacie uzyskasz obraz najwyższej jakości, ale rozmiar pliku będzie znacznie większy niż w innych formatach. Używaj z rozwagą.
- WebP ma bezstratny tryb kodowania, który może być wydajniejszy niż PNG.
- Jeśli zasób graficzny zawiera obrazy składające się z kształtów geometrycznych, rozważ przekonwertowanie go na format wektorowy (SVG).
- Jeśli komponent z obrazem zawiera tekst, zatrzymaj go i ponownie rozważ. Tekstu na obrazach nie można zaznaczyć, wyszukać ani powiększyć. Jeśli chcesz stworzyć niestandardowy wygląd (ze względu na markę lub z innych powodów), użyj czcionki internetowej.
- Czy optymalizujesz zdjęcie, zrzut ekranu lub podobny komponent z obrazem? Użyj formatu JPEG, stratnego formatu WebP lub stratnego formatu AVIF.
- W przypadku plików JPEG wykorzystuje się kombinację optymalizacji stratnej i bezstratnej, aby zmniejszyć rozmiar pliku zasobu graficznego. Wypróbuj kilka poziomów jakości JPEG, aby znaleźć dla Twojego zasobu najlepszą jakość w porównaniu z rozmiarem pliku.
- Tradycyjne pliki JPEG mogą być akceptowalne w przypadku stratnego formatu WebP lub stratnego formatu AVIF, ale pamiętaj, że tryb stratny WebP w szczególności odrzuca niektóre informacje o barwie, aby uzyskać mniejsze obrazy. Oznacza to, że wybrane kolory mogą nie być takie same jak odpowiadające im pliki JPEG.
Pamiętaj też, że jeśli używasz WebView do renderowania treści w aplikacji na konkretnej platformie, masz pełną kontrolę nad klientem i możesz używać wyłącznie WebP. Facebook i wiele innych firm używa WebP, aby umieszczać wszystkie obrazy w swoich aplikacjach. Oszczędności naprawdę są tego warte.
Wpływ na największe wyrenderowanie treści (LCP)
Obrazy mogą być kandydatami do LCP. Oznacza to, że rozmiar obrazu wpływa na jego czas wczytywania. Jeśli obraz jest kandydatem LCP, odpowiednie zakodowanie go ma kluczowe znaczenie dla poprawy LCP.
Należy starać się stosować porady podane w tym artykule, aby wrażenia użytkowników dotyczące działania strony były jak najszybciej dostępne. LCP jest jednym z elementów oceny postrzeganej, ponieważ mierzy, jak szybko wyświetla się największy (a co za tym idzie) element na stronie.