Wybór odpowiedniego formatu obrazu może zmniejszyć rozmiar strony o 40-60% bez utraty jakości. Przeanalizujmy każdy format i kiedy go używać.
Porównanie formatów
| Format | kompresja | Przezroczystość | Ożywienie | Wsparcie |
|---|---|---|---|---|
| JPG | Stratny | NIE | NIE | 100% |
| PNG | Bezstratny | Tak | APNG | 100% |
| WebP | Obydwa | Tak | Tak | 97%+ |
| AVIF | Obydwa | Tak | Tak | 92%+ |
| SVG | Wektor | Tak | Tak | 100% |
Kiedy w jakim formacie
JPEG - zdjęcia i złożone obrazy
Idealny do zdjęć z milionami kolorów. Jakość na poziomie 80-85% daje optymalny stosunek jakości do wielkości.
PNG to grafika z przezroczystością
Logo, ikony, zrzuty ekranu – wszystko, co wymaga przejrzystości lub wyraźnych krawędzi tekstu.
WebP to uniwersalny, nowoczesny format
25-35% mniejszy niż JPEG przy tej samej jakości. Zalecane w większości przypadków.
SVG to grafika wektorowa
Skaluje się bez utraty jakości. Idealny do ikon, logo i ilustracji.
Konwersja obrazu
Użyj narzędzi Xuvero:
- Konwerter obrazów— konwertuj pomiędzy PNG, JPG, WebP
- Kompresor obrazu— kompresuj obrazy bez widocznej utraty jakości
- Zmiana rozmiaru obrazu— zmień rozmiar obrazu
Optymalizacja pod SEO
- Leniwe ładowanie—
loading="lazy"dla obrazów poniżej pierwszego ekranu - Tekst alternatywny— opisz, co jest przedstawiane w Grafice Google
- Wymiary— zawsze określaj szerokość i wysokość, aby uniknąć CLS
- Zestaw źródłowy— zapewniają różne rozmiary dla różnych ekranów
