Правильний вибір формату зображення може зменшити розмір сторінки на 40-60% без втрати якості. Розберемо кожен формат та коли його використовувати.
Порівняння форматів
| Формат | Стиснення | Прозорість | Анімація | Підтримка |
|---|---|---|---|---|
| JPEG | Lossy | Ні | Ні | 100% |
| PNG | Lossless | Так | APNG | 100% |
| WebP | Both | Так | Так | 97%+ |
| AVIF | Both | Так | Так | 92%+ |
| SVG | Vector | Так | Так | 100% |
Коли який формат
JPEG — фотографії та складні зображення
Ідеальний для фотографій з мільйонами кольорів. Якість 80-85% дає оптимальне співвідношення якість/розмір.
PNG — графіка з прозорістю
Логотипи, іконки, скріншоти — все, де потрібна прозорість або чіткі краї тексту.
WebP — універсальний сучасний формат
На 25-35% менший за JPEG при тій же якості. Рекомендований для більшості випадків.
SVG — векторна графіка
Масштабується без втрати якості. Ідеальний для іконок, логотипів та ілюстрацій.
Конвертація зображень
Скористайтесь інструментами Xuvero:
- Image Converter — конвертуйте між PNG, JPG, WebP
- Image Compressor — стисніть зображення без видимої втрати якості
- Image Resizer — змініть розміри зображення
Оптимізація для SEO
- Lazy loading —
loading="lazy"для зображень нижче першого екрану - Alt-текст — описуйте що зображено для Google Images
- Розміри — завжди вказуйте width та height для уникнення CLS
- Srcset — надайте різні розміри для різних екранів
