Najpierw zastanów się, czy obraz jest niezbędna do osiągnięcia zamierzonego efektu. Dobry projekt jest prosty i zawsze zapewnia najwyższą wydajność. 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ć oczekiwane rezultaty, 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 stanowią 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 obrazie nie jest satysfakcjonujący: tekstu nie można zaznaczyć, wyszukać ani powiększyć niedostępne i nieodpowiednie dla urządzeń o wysokiej rozdzielczości DPI. Korzystanie z 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 wady i zalety. Formaty wektorowe idealnie nadają się do obrazów zawierających proste kształty geometryczne, takie jak logo, tekst lub 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 jak rozdzielczość czy niezależne powiększenie – 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. Przyjrzyjmy się na przykład różnicy między komponentem ze zdjęciem wyświetlanym 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 pożądanych rezultatów wizualnych i wymagań funkcjonalnych.
| Format | Przejrzystość | Animacja | Przeglądarka |
|---|---|---|---|
| PNG | Tak | Nie | Wszystko |
| JPEG | Nie | Nie | Wszystko |
| WebP | Tak | Tak | Wszystkie nowoczesne przeglądarki. Zobacz Czy mogę korzystać z tej usługi? |
| AVIF | Tak | Tak | Nie. Zobacz artykuł 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ą 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. 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>. 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ż przekształcenie go do formatu wektorowego (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żywaj formatu JPEG, stratnego protokołu WebP lub stratnego formatu 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 protokół WebP lub stratny AVIF może być akceptowalnymi alternatywami formatu JPEG, ale należy pamiętać, że zwłaszcza tryb stratny WebP 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 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.
Stosuj się do wskazówek podanych w tym artykule, 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.