Они говорят, что картинка стоит тысячи слов.Но в Интернете, картина может быть стоит тысячи килобайт или больше!HTTP Архив показывает, что изображения составляют 64% от общего sizeв среднем.Учитывая это, оптимизация изображения является ключевой, особенно учитывая, что многие пользователи будут отказываться от запроса, если он не сработал в течение нескольких секунд .
Проблема с оптимизацией изображения, что мы хотим, чтобы сохранить размеры файлов небольшой без ущерба для качества.Прошедшие попытки создать типы файлов, которые оптимизируют изображения лучше, чем стандартный JPEG, PNG и GIF форматы были безуспешными .
Введите WebP Link
WebP является формат изображения, который был создан в 2010 году и в настоящее время разрабатывается Google.Этот формат обеспечивает потерь и сжатие с потерями для изображений.Несколько крупных имена кампанию за WebP, особенно Google, Facebook и eBay .1
В нашей компании, мы всегда экспериментировать с методами, которые улучшают производительность веб-сайта.Так, мы провели несколько тестов А / Б, чтобы понять влияние WebP на качество изображения и, как лучше всего осуществить это в проектах наших клиентов .
Одна из основных причин, почему мы начали реализацию WebP является меньший размер файла size,По Google:
- WebP файлы изображений без потерь 26% меньше, чем PNG файлов .
- WebP потерями файлы изображений на 25% до 34% меньше, чем в формате JPEG изображений при эквивалентной структурного сходства (SSIM) индекс .
- WebP поддерживает без потерь прозрачности (также известный как альфа-канал), только с 22% больше байт .
Наши тесты обнаружили плюсы и минусы в формате изображения WebP:
| Pros | Cons |
|---|---|
| Меньше файл size | Слабый браузер support |
| Улучшенное сжатие algorithm | Артефактов имеет пластиковую appearance |
| Гладкая Цвет gradations | Плохо экспорт interface |
| Альфа-канал mask |
Качество изображения Link
WebP использует новый алгоритм сжатия, так артефактов (т.е. искажение или деградация) выглядит иначе, чем с другими типами файлов.WebP делает хорошую работу по поддержанию четкие края на фотографии, — но, конечно, он теряет детали и текстуру, как и следовало ожидать в потерями файла.В то время как сопоставимые файл JPEG имеет нервный артефактов в твердых областях, WebP имеет гладкие градации вплоть до самых низких настройках качества.Один недостаток в том, что человеческие лица могут взять на пластиковой или постеризованному появления на низких настройках .
2
4У нас есть несколько других вещей, чтобы рассмотреть с форматом изображения WebP.Настройки сжатия не совпадают один к одному с JPEG,Не ожидайте, что 50% -качество JPEG, чтобы соответствовать 50% -качество WebP.Качество падает довольно резко по шкале WebP, так что начать на высокое качество и работать ваш путь вниз .
Еще одна игра меняющейся плюсом является Возможность добавить альфа-канал mask, Так же, как PNG.В отличие от своего коллеги без потерь, однако, часто можно сжать полезную WebP изображение, чтобы около одной десятой размера его PNG эквиваленте.Это реальное использование выдающийся для WebP, что позволяет множество вариантов и возможностей, которые в противном случае приводят сайт, чтобы ползти с громоздкими размерами файлов.Один реальный пример увидел 880KB PNG (24-битный с альфа-каналом) сжатый до 41 КБ — экономию 95%.Хотя это не является нормой, оно иллюстрирует возможности .
6Для дальнейшего уменьшения размера файла, мы могли бы опустить метаданные, сняв “Сохранить метаданных” в “Save”Диалог в графическом редакторе.Для еще болееЭкономия сжатия, мы могли бы выбрать “потерями альфа-канал.” настройки качества для зеркала альфа-канала эти изображения.Например, 50% -качество изображения будет иметь 50% -качество потерями альфа-канал.В нашем тестировании, мы ожидали артефактов вокруг маске края, но были также заметные изменения сжатия для всего изображения.Мы, конечно, считаем вариант для дальнейшего сжать размеры файлов, но мы будет внимательно следить за качество изображения при этом.Кроме того, следить за нежелательного полосчатости альфа-каналов с упорядоченных исчезает .
8Мы были весьма взволнованы, чтобы обнаружить, что есть Photoshop plugin10для поддержки WebP.Это делает его легко набрать в настройках качества для WebP изображений.Интерфейс плагина оставляет желать лучшего — он не был полностью принят Adobe.В настоящее время, вы не можете просматривать изображения, чтобы оценить параметры качества, который является недостатком .
В качестве обходного пути, Chrome браузер Google позволяет для быстрого сравнения файлов. …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров