Najpierw zastanów się, czy obraz jest niezbędna do osiągnięcia zamierzonego efektu. Jeśli możesz wyeliminować zasób obrazu, która często wymaga dużej liczby bajtów w porównaniu z zasobami HTML, CSS, JavaScript i innymi zasobami na stronie, To zawsze jest najlepsza strategia optymalizacji. Jednak dobrze rozmieszczony obraz może przekazać więcej informacji niż tysiąc słów, więc od Ciebie zależy znalezienie równowagi.
Następnie zastanów się, czy istnieje alternatywna technologia, która może zapewnić lepsze wyniki, ale w wydajniejszy sposób:
- Efekty CSS (np. cienie lub gradienty) i animacje CSS. pozwalają tworzyć zasoby niezależne od rozdzielczości, które zawsze wyglądają ostrość przy każdej rozdzielczości i poziomie powiększenia. często jest to ułamek bajtów wymaganych przez plik graficzny.
- Czcionki internetowe umożliwiają korzystanie z pięknych krojów czcionek. przy jednoczesnym zachowaniu możliwości wyboru, i zmień rozmiar tekstu, co znacznie poprawiło użyteczność.
Jeśli zauważysz, że kodowanie tekstu w komponencie z obrazem jest kodowane, zatrzymaj się i zastanów się jeszcze raz. Odpowiednia typografia jest kluczem do projektowania, budowania marki i czytelności ale tekst w obrazach jest niekorzystny: tekstu nie można zaznaczyć, wyszukać ani powiększyć niedostępne i nieodpowiednie dla urządzeń o wysokiej rozdzielczości DPI. Używanie czcionek internetowych wymaga własnego zestawu optymalizacji, ale spełnia te wszystkie wymagania i jest zawsze lepszym rozwiązaniem do wyświetlania tekstu.
Wybierz odpowiedni format obrazu
Jeśli masz pewność, że obraz to odpowiednia opcja, musisz starannie wybrać odpowiedni rodzaj do danego zadania.
- Grafika wektorowa reprezentować obraz za pomocą linii, punktów i wielokątów.
- Grafika rastrowa reprezentują obraz za pomocą kodowania poszczególnych wartości każdego piksela w prostokątnej siatce.
Każdy format ma swoje zalety i wady. Formaty wektorowe idealnie nadają się do zdjęć o mniej złożonych kształtach geometrycznych, takich jak logo, tekst czy ikony. Zapewniają ostre wyniki w każdej rozdzielczości i przy każdym ustawieniu powiększenia. dzięki czemu są idealnym formatem w przypadku ekranów o wysokiej rozdzielczości i zasobów do wyświetlania w różnych rozmiarach.
Jednak formaty wektorowe mogą być nieprzydatne, gdy scena jest skomplikowana (na przykład zdjęcie): ilość znaczników SVG do opisania wszystkich kształtów może być niezwykle duża. a wynik wciąż może nie wyglądać „fotorealistyczny”. W takim przypadku warto korzystać z formatu rastrowego, np. PNG, JPEG, WebP lub AVIF.
Obrazy rastrowe nie mają takich samych właściwości rozdzielczości, niezależnie od powiększenia. – po powiększeniu obrazu rastrowego zobaczysz postrzępiony i niewyraźny obraz. W związku z tym może być konieczne zapisanie wielu wersji obrazu rastrowego w różnych rozdzielczościach , by zapewnić użytkownikom optymalny komfort.
Konsekwencje używania ekranów o wysokiej rozdzielczości
Są 2 rodzaje pikseli: piksele CSS i piksele urządzenia. Pojedynczy piksel CSS może odpowiadać bezpośrednio jednemu pikselowi urządzenia lub wspierane przez kilka pikseli urządzenia. O co chodzi? Im więcej pikseli na urządzeniu, tym mniejsza ilość szczegółów na ekranie.
Ekrany o wysokiej rozdzielczości DPI (HiDPI) dają doskonałe rezultaty, ale istnieje jeden oczywisty kompromis: komponenty z obrazem wymagają więcej szczegółów, aby wykorzystać większą liczbę pikseli urządzenia. Dobra wiadomość jest taka, że obrazy wektorowe idealnie nadają się do tego zadania. które można renderować w dowolnej rozdzielczości i uzyskać wyraźne wyniki. może spowodować naliczenie wyższego kosztu przetwarzania z myślą o wyrenderowaniu drobniejszych detali. ale bazowy zasób jest taki sam i nie zależy od rozwiązania.
Z kolei obrazy rastrowe stanowią znacznie większe wyzwanie, ponieważ kodują dane obrazu na podstawie poszczególnych pikseli. Im większa liczba pikseli, tym większy jest rozmiar pliku obrazu rastrowego. Zastanów się nad różnicami między komponentami ze zdjęciem wyświetlanymi w rozmiarze 100 x 100 pikseli (CSS):
| Rozdzielczość ekranu | Łączna liczba pikseli | Rozmiar nieskompresowanego pliku (4 bajty na piksel) |
|---|---|---|
| 1x | 100 x 100 = 10 000 | 40 000 bajtów |
| 2 x | 100 x 100 x 4 = 40 000 | 160 000 bajtów |
| 3× | 100 x 100 x 9 = 90 000 | 360 000 bajtów |
Gdy podwoimy rozdzielczość fizycznego ekranu, łączna liczba pikseli zwiększa się czterokrotnie: 2 razy więcej pikseli w poziomie, 2 razy więcej w pionie. Oznacza to, że w takim przypadku ekran nie tylko się podwaja, ale także czterokrotnie zwiększa liczbę wymaganych pikseli!
Co to oznacza w praktyce? Ekrany o wysokiej rozdzielczości umożliwiają wyświetlanie pięknych obrazów, co jest świetną cechą produktu. Ekrany o wysokiej rozdzielczości wymagają jednak również obrazów o wysokiej rozdzielczości, dlatego:
- W miarę możliwości wybieraj obrazy wektorowe, ponieważ zależą od rozdzielczości i zawsze zapewniają ostre wyniki.
- Jeśli wymagany jest obraz rastrowy, wyświetl obrazy elastyczne.
Cechy różnych formatów obrazów rastrowych
Oprócz różnych algorytmów kompresji stratnej i bezstratnej różne formaty obrazu obsługują różne funkcje, takie jak animacje i kanały przezroczystości (alfa). Dlatego wybór „właściwego formatu” dla danego obrazu to połączenie odpowiednich wyników wizualnych i wymagań funkcjonalnych.
| Format | Przejrzystość | Animacja | Przeglądarka |
|---|---|---|---|
| PNG | Tak | Tak (APNG) | Wszystko |
| JPEG | Nie | Nie | Wszystko |
| WebP | Tak | Tak | Wszystkie nowoczesne przeglądarki. Zobacz Czy mogę korzystać z tej usługi? |
| AVIF | Tak | Tak | Wszystkie nowoczesne przeglądarki. Zobacz Czy mogę korzystać z tej usługi? |
Istnieją dwa powszechnie obsługiwane formaty obrazów rastrowych: PNG i JPEG. Oprócz tych formatów nowoczesne przeglądarki obsługują nowsze formaty obrazów WebP i AVIF. Oba nowsze formaty zapewniają lepszą ogólną kompresję i więcej funkcji. Jaki format wybierzesz?
WebP i AVIF zasadniczo zapewniają lepszą kompresję niż starsze formaty. i należy go używać tam, gdzie jest to możliwe. Jako kreacji zastępczej możesz użyć obrazów WebP lub AVIF oraz obrazu JPEG lub PNG. Więcej informacji znajdziesz w artykule Używanie obrazów WebP.
W przypadku starszych formatów obrazu weź pod uwagę te kwestie:
- Czy potrzebujesz animacji? Używaj elementów
<video>.- A co z GIF-ami? GIF ogranicza paletę kolorów do maksymalnie 256
i tworzy znacznie większe pliki niż elementy
<video>. APNG oferuje więcej kolorów niż plik GIF, ale jest też znacznie większy niż film formatami o racjonalnie porównywalnej jakości wizualnej. Zobacz Zastępowanie animowanych GIF-ów filmami wideo.
- A co z GIF-ami? GIF ogranicza paletę kolorów do maksymalnie 256
i tworzy znacznie większe pliki niż elementy
- Czy musisz zachować drobne szczegóły w najwyższej rozdzielczości? Użyj formatu PNG lub bezstratnego formatu WebP.
- PNG nie stosuje żadnych algorytmów kompresji stratnej poza rozmiarem określonym w palecie kolorów. Pozwoli to uzyskać obraz najwyższej jakości, ale kosztem znacznie większego rozmiaru niż w przypadku innych formatów. Korzystaj z rozwagi.
- WebP ma tryb kodowania bezstratnego, który może być bardziej wydajny niż PNG.
- Jeśli komponent z obrazem zawiera obrazy złożone z kształtów geometrycznych, rozważ przekonwertowanie go na format wektorowy (SVG).
- Jeśli komponent z obrazem zawiera tekst, zatrzymaj się i ponownie zastanów nad tym procesem. Tekstu na obrazach nie można zaznaczyć, wyszukać ani powiększyć. Jeśli chcesz nadać projektowi niestandardowy wygląd (z myślą o budowaniu marki lub z innych względów), użyj czcionki internetowej.
- Czy optymalizujesz zdjęcie, zrzut ekranu lub podobny komponent z obrazem? Użyj formatu JPEG, stratnego protokołu WebP lub AVIF.
- W pliku JPEG zastosowano połączenie optymalizacji stratnej i bezstratnej, aby zmniejszyć rozmiar pliku zasobu graficznego. Wypróbuj kilka poziomów jakości plików JPEG, aby znaleźć najlepszą jakość dla danego zasobu w porównaniu z rozmiarem pliku.
- Stratny plik WebP lub stratny plik AVIF to świetne alternatywne pliki JPEG dla obrazów w jakości internetowej, ale pamiętaj, że w tym trybie niektóre informacje są pomijane, a obrazy są mniejsze. 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 danej platformie, wtedy masz pełną kontrolę nad klientem i możesz używać wyłącznie WebP. Facebook i wiele innych firm używa protokołu WebP do przesyłania wszystkich swoich obrazów w swoich aplikacjach. oszczędności na pewno są tego warte.
Wpływ na największe wyrenderowanie treści (LCP)
Obrazy mogą być kandydatami LCP. Oznacza to, że rozmiar obrazu wpływa na jego czas wczytywania. Jeśli obraz jest kandydatem do LCP, skuteczne kodowanie go ma kluczowe znaczenie dla poprawy LCP.
Staraj się stosować się do wskazówek podanych w tym przewodniku, aby postrzegana skuteczność strony była jak najkrótsza dla wszystkich użytkowników. LCP jest częścią percepcyjnej skuteczności, ponieważ mierzy, jak szybko wyświetla się największy (a co za tym idzie najbardziej zauważalny) element na stronie.