предисловие
На большинстве веб-страниц изображения занимают 60-70% размера страницы. Поэтому в веб-разработке для производительности и удобства веб-страниц очень важно использовать соответствующие форматы изображений для различных сценариев. Существует много типов форматов изображений.В этой статье представлен только общий обзор нескольких форматов изображений, обычно используемых в веб-приложениях: gif, png, jpg и webp.
Классификация форматов изображений
- Нет компрессии. Формат несжатого изображения не сжимает данные изображения и может точно представить исходное изображение. Формат BMP является одним из них.
- сжатие без потерь. Алгоритм сжатия кодирует и сжимает все данные изображения, что позволяет уменьшить размер изображения при сохранении качества изображения. png является его представителем.
- Сжатие с потерями. Алгоритм сжатия не кодирует и не сжимает все данные картинки, а удаляет детали картинки, не распознаваемые человеческим глазом при сжатии. Следовательно, сжатие с потерями может значительно уменьшить размер изображения при том же качестве изображения. Представителем которого является jpg.
gif
Он кодируется с использованием алгоритма сжатия LZW, который представляет собой формат изображения без потерь, основанный на индексированных цветах. Из-за сжатия без потерь он меньше по размеру, чем старый формат bmp, и поддерживает прозрачность и анимацию. Недостатком является то, что, поскольку gif хранит только 8-битные индексы (то есть может отображать до 2^8=256 цветов), изображения со сложными цветами и богатыми деталями не подходят для сохранения в формате gif. Логотипы, значки и каркасы с простыми цветами подходят для формата gif.
jpg
jpg — это формат изображения с прямыми потерями, основанный на цвете. Из-за использования прямых цветов jpg может использовать до 1600 цветов (2^24), в то время как количество цветов, распознаваемых человеческим глазом, составляет всего около 1 Вт, поэтому jpg очень подходит для красочных изображений и градиентных цветов. jpg сжатие с потерями может значительно уменьшить размер изображения после удаления деталей изображения, которые не могут быть распознаны невооруженным глазом.
Но jpg не подходит для иконок и логотипов, так как не имеет преимущества в размере файла по сравнению с gif/png-8.
png-8
png-8 использует сжатие без потерь и представляет собой растровый формат, основанный на 8-битных индексированных цветах. По сравнению с gif, png-8 лучше поддерживает прозрачность, а размер меньше при том же качестве. Отлично подходит в качестве замены гифкам. Но у png-8 есть и очевидный недостаток — он не поддерживает анимацию. Это также важная причина, по которой png-8 не может полностью заменить gif. Если анимация не требуется, рекомендуется использовать png-8 вместо gif.
png-24
png-24 использует сжатие без потерь и представляет собой растровый формат, основанный на прямом цвете. Качество изображения png-24 сравнимо с качеством bmp, но у него есть преимущество в размере, которого нет у bmp. Конечно, по сравнению с jpg, gif, png-8 размер все же больше. Именно благодаря высокому качеству и сжатию без потерь он очень подходит для сохранения исходных файлов или форматов изображений, требующих вторичного редактирования.
PNG-24 может передавать богатые детали изображения, такие как jpg, но не может заменить jpg. Изображения, сохраненные как png-24, как минимум в 5 раз больше, чем jpg, но улучшение качества изображения минимально. Поэтому, если требования к качеству не очень высоки, рекомендуется использовать jpg для красочных сетевых картинок.
PNG-24 также поддерживает прозрачность, как png-8.
webp
Изображения WebP — это новый формат изображений, разработанный Google. По сравнению с png и jpg размер изображений WebP уменьшается примерно на 30% при том же визуальном восприятии. Кроме того, формат изображения WebP поддерживает сжатие с потерями, сжатие без потерь, прозрачность и анимацию. Теоретически он может полностью заменить такие форматы изображений, как png, jpg и gif.Конечно, webp еще не полностью поддерживается.
Взгляните на сравнение изображений png и изображений webp:
Еще раз взгляните на совместимость webp:
Суммировать
Основываясь на приведенном выше введении, мы понимаем преимущества, недостатки и применимые сценарии различных форматов изображений.Давайте сделаем абстрактное резюме с помощью диаграммы:
| Формат | преимущество | недостаток | Применимая сцена |
|---|---|---|---|
| gif | Небольшой размер файла, поддержка анимации, прозрачность, отсутствие проблем с совместимостью | Поддерживается только 256 цветов. | Простой цветной логотип, значок, анимация |
| jpg | Насыщенные цвета, небольшой размер файла | Сжатие с потерями, качество изображения явно снижается после многократного сохранения | Красочные картинки/градиентные изображения |
| png | Сжатие без потерь, поддержка прозрачности, небольшой размер простого изображения | Анимация не поддерживается, а красочные картинки большого размера | логотип/значок/прозрачность |
| webp | Небольшой размер файла, поддержка сжатия с потерями и без потерь, поддержка анимации, прозрачность | Совместимость с браузером не очень хорошая | Поддерживает приложение и веб-просмотр в формате webp |
Наконец, руководство Google по выбору форматов изображений прилагается: