Как выбрать правильный формат изображения для вашего сайта?
Изображения могут легко улучшить ваш сайт или сделать его значительно хуже. Они помогают передавать то, что невозможно отразить словами, добавляют эмоций и задают атмосферу и настроение. Они прямо влияют на формирование восприятия сайта пользователями, привлекают их внимание.
Выбор неправильного изображения и его формата может стоить больших денег. Поэтому важно решить эту задачу в процессе разработки дизайна.
JPEG и PNG — это самые распространенные форматы изображений, которые используются для веб-сайтов.
Между ними есть некоторые ключевые различия, о которых вы должны знать, прежде чем принимать решени, какой формат использовать.
Давайте подробнее рассмотрим, что такое файлы JPG и PNG, когда и какой формат использовать и как их сохранить, чтобы они корректно отображались на вашем веб-сайте.
Что такое форматы JPG и PNG?
JPG
JPG расшифровывается как Joint Photographic Experts Group и является наиболее распространенным форматом изображений в Интернете. Это формат с потерями, что означает, что некоторые данные изображения теряются при каждом сжатии файла. Это уменьшает его размер, но снижает качество изображения.
JPG — хороший выбор для изображений, которые будут отображаться на самой веб-странице, потому что они обычно меньше по размеру. Это означает, что они будут загружаться быстрее, что важно для поддержания вовлеченности посетителей сайта. Кроме того, JPG поддерживается большинством веб-браузеров.
JPG также могут сжиматься больше, чем изображения PNG, что означает, они требуют меньше места и пропускной способности.
Такие файлы могут включать метаданные, такие как комментарии и информацию об авторских правах. Данные должны быть записаны в определенном формате, иначе они будут просто удалены.
Единственным недостатком использования JPG является то, что они ограничены 256 цветами. Для большинства изображений это не проблема. Однако в сложных файлах с несколькими оттенками или градиентами это можем навредить, так как информация о пропуске цвета будет храниться как 0.
PNG
Формат файла PNG не имеет потерь, что означает, что данные не теряются при сжатии файла. Это делает его больше по размеру по сравнению с файлами JPG, но не влияет на качество. Это основное различие между двумя форматами, но есть и более мелкие различия, которые могут сделать один из них лучшим выбором для вашего сайта.
Существует несколько преимуществ использования PNG на сайте. Во-первых, они имеют более высокое качество, чем JPG, а это значит, что ваши изображения будут выглядеть лучше при просмотре на экранах с высоким разрешением. Во-вторых, PNG позволяют работать с прозрачностью и градиентами, которые придают веб-сайте более совершенный и профессиональный вид. Вот почему они хорошо подходят для изображений, которые, например, являются частью логотипа. Это особенно удобно, если вы собираетесь работать с наложением элементов друг на друга, не беспокоясь о том, как скорреиктировать их сочетание между собой — прозраность позволят все настроить.
Единственным недостатком использования PNG является то, что они имеют больший размер файла, чем JPG. Кроме того, некоторые старые веб-браузеры плохо поддерживают прозрачность PNG или вообще не поддерживают ее.
Попробуйте no-code платформу AppMaster
AppMaster поможет создать любое веб, мобильное или серверное приложение в 10 раз быстрее и 3 раза дешевле
Что касается размера файла, PNG может быть больше, чем изображения GIF и JPG, потому что они не уменьшают глубину цвета при сжатии файла. Это одна из причин, по которой PNG не подходят для фотографий или изображений, содержащих градиенты или другие многоцветные изображения. Если ваша веб-страница содержит более одного изображения, вам следует подумать о сжатии этих PNG. Сделать это можно при помощи сторонних программ без потери качества изображения.
Когда использовать JPG и когда использовать PNG?
Скорость загрузки сайта зависит от правильного формата файла изображения. Выбрать подходящий из них, JPG или PNG, важно на этапе разработки вашего сайта.
Чаще всего следуют следующему правилу: JPG используется для фотографий без прозрачного фона и других файлов, использующих больше памяти; PNG используется для графики с прозрачным фоном и изображений, где важны четкость и яркость.
JPG обычно используются для изображений, которые будут отображаться на самой веб-странице. Это связано с тем, что они меньше по размеру, а значит будут загружаться быстрее.
PNG лучше подходят для изображений, которые будут использоваться как часть логотипа или заголовка веб-сайта, поскольку они имеют более высокое качество и могут использовать прозрачность.
Как правильно сохранить изображение для использования на сайте
После того, как вы выбрали правильный формат изображения для своего веб-сайта, вам необходимо сохранить его в оптимизированном формате. Это означает, что файл будет сжат без ущерба для качества изображения.
Доступно множество вариантов, но лучше всего использовать бесплатное веб-приложение, такое как Optimizilla или TinyPNG.
Сохранение изображений для использования в Интернете важный процесс, так как ваща задача презентовать их в лучшем виде на сайте. Вот несколько советов по оптимизации файлов:
- Используйте программу, например Photoshop или GIMP, для сохранения изображений в правильном формате (JPG или PNG).
- Используйте более низкое качество при сохранении JPG, так как они обычно меньше по размеру, чем PNG.
- Убедитесь, что ваши изображения имеют правильный размер и разрешение для вашего сайта.
- Используйте сжатие, чтобы уменьшить размер файла ваших изображений без ущерба для качества.
- Еще одна важная вещь, о которой следует помнить — сохраняйте оригинальные файлы. Всегда сохраняйте оригинальные изображения, хотя бы на некоторое время, так как они могут понадобиться вам в будущем.
Заключение
Ключевые различия форматов JPG и PNG:
- Файлы JPG обычно меньше по размеру, чем PNG, что делает их хорошим выбором для изображений, которые будут отображаться на самой веб-странице.
- PNG лучше подходят для изображений, которые будут использоваться как часть логотипа или заголовка веб-сайта, то есть часть дизайна страницы.
- Убедитесь, что ваши изображения имеют правильный размер и разрешение для вашего сайта.
- Используйте сжатие, чтобы уменьшить размер файла ваших изображений без ущерба для качества.
Формат файла изображения полностью зависит от типа контента, который вы используете на сайте. Если это фото-файлы — придерживайтесь JPG, если вы используете в основном графику — выбирайте PNG. Помните, что это один из основных факторов, влияющих на скорость загрузки вашего сайта.
Актуальные форматы изображений в вебе
Эта статья — расширенный вариант нашего внутреннего документа о том, как подготавливать изображения для сайтов и веб-приложений. В ней мы описали актуальные форматы и собрали рекомендации, как добавить поддержку WebP и AVIF на сайт и какие инструменты можно использовать. В заключительной части обзора расскажем, как мы внедрили эти форматы на нашем сайте и какие результаты получили.
Меня зовут Алексей, я работаю верстальщиком в компании FunBox. Мы разрабатываем продукты для мобильных операторов: геосервисы, мобильную рекламу, платежи, интерактивные сервисы и разное другое. Вы пользуетесь нашими продуктами каждый день или нет — тут у меня NDA.
В FunBox хороший продукт — это результат развитой инженерной культуры, и наш корпоративный сайт это подтверждает. Для нас это история о сапожнике в сапогах, ведь разрабатывать для веба, но не сделать нормальный сайт для себя как минимум не круто. Дальше расскажу, как делать хорошо.
Зачем использовать актуальные форматы изображений
Основное преимущество современных форматов изображений — это уменьшение объёма передаваемого по сети трафика, когда пользователь взаимодействует с сайтом или веб-приложением. Как следствие, страницы открываются быстрее, что положительно влияет как на впечатление пользователя, так и на позиции в поиске: сайты, которые быстро загружаются, получают более высокие позиции в выдаче Яндекса и Google. При этом качество графических материалов остаётся по-прежнему высоким при минимальных трудозатратах на внедрение. В то же время не рекомендуем использовать только самые модные форматы, так как в отдельных случаях это не принесёт большой пользы.
Краткое сравнение основных форматов изображений для веба
Все форматы изображений, которые используются в вебе, можно разделить на две большие группы: векторные и растровые. Из векторных форматов сейчас используется только SVG. Он отлично подходит для изображений с простыми геометрическими формами, например, пиктограмм или логотипов, и они одинаково хорошо выглядят как на обычных экранах, так и на устройствах с HiDPI-дисплеями, что делает SVG идеальным для адаптивной вёрстки под различные устройства. Но он не годится для изображений с большим количеством деталей, например фотографий, из-за размера файла, плюс браузеру потребуются немалые вычислительные ресурсы CPU для отрисовки.
Для фотографий на сайте лучше всего подходят растровые форматы. Самые известные и проверенные временем — JPEG и PNG. Есть ещё GIF для анимированных изображений, но он теряет актуальность, и всё чаще его рекомендуют заменить на HTML5-видео. С развитием веб-технологий JPEG и PNG всё чаще стали использоваться как фолбеки для браузеров, которые не поддерживают современные форматы растровых изображений, такие как WebP и AVIF. Сейчас в вебе JPEG отходит на второй план и уступает своё место новым форматам, так как они во многих аспектах его превосходят.
В 2010 году Google выпустили формат WebP как альтернативу PNG и JPEG. Он использует алгоритм сжатия ключевых кадров из видеокодека VP8, поэтому искажение исходного изображения выглядит иначе относительно других форматов. Сжатие состоит из двух этапов: на первом этапе предсказывается содержимое блоков по уже декодированным, на втором — кодируется ошибка предсказания (Википедия). WebP оставляет чёткие края фотографии, но сжатие с потерями ухудшает детализацию и текстуру. Также надо учитывать, что его настройки сжатия не соответствуют таковым для JPEG, другими словами, качество 50% для WebP и JPEG будет отличаться. В случае с WebP качество снижается достаточно сильно, поэтому рекомендуется начинать с наибольших значений и постепенно их уменьшать (Хабр).
WebP объединяет все достоинства форматов JPEG, PNG и GIF: сжатие с потерями и без потерь, поддержку прозрачности и анимации. Это позволяет использовать его для разных изображений, что упрощает подготовку и обработку графики на сайте. Кроме того, WebP обладает рядом преимуществ:
- сжатие изображения без потерь на 26% лучше, чем у PNG;
- сжатие изображения с потерями лучше JPEG на 25-34% при одинаковом индексе структурного сходства (SSIM);
- поддержка прозрачности без потерь при увеличении размера всего на 22%.
С недавних пор появилась возможность использовать для изображений в вебе ещё один формат — AVIF. Это свободный формат сжатия с потерями качества, основанный на библиотеке для сжатия кадров AV1 (Википедия). Первая версия спецификации была выпущена в начале 2019 года, а первым браузером, который поддерживает изображения в формате AVIF, стал Google Chrome 85, релиз которого состоялся в конце августа 2020 года. Из основных возможностей этого формата отмечают следующие:
- значительное уменьшение размера файла при сохранении визуального качества изображения;
- поддержка анимированных изображений;
- поддержка прозрачности.
К недостаткам AVIF относят отсутствие поддержки прогрессивного рендеринга: пока изображение не скачается полностью, на его месте ничего не будет отображаться, тогда как JPEG и WebP могут показывать частично загруженное изображение (видео с наглядной демонстрацией).
Чтобы подробнее ознакомиться с WebP и AVIF и сравнить их с другими известными форматами изображений, рекомендую прочитать исследование Джейка Арчибальда и статью одного из авторов-разработчиков формата AVIF в блоге Netflix.
Выбор формата для изображений на сайте
Помимо преимуществ того или иного формата изображений, важно учитывать, поддерживают ли его браузеры. WebP поддерживается практически везде — его доля составляет более 95%:
AVIF в вебе поддерживают почти 70% браузеров:
Есть основания полагать, что все актуальные браузеры начнут полноценно поддерживать AVIF быстрее, чем это получилось с форматом WebP (формат анонсировали в 2010 году, но до браузера Safari его поддержка добралась только в конце 2020 года (!) с выходом Safari 14 и macOS 11 Big Sur). WebKit уже внедрил декодирование AVIF, но ещё не включил его по умолчанию.
Подготовка изображений в форматах WebP и AVIF
Рассмотрим инструменты для подготовки изображений в новых форматах. Одну-две иллюстрации можно обработать с помощью привычных инструментов: онлайн-сервисов, например Squoosh или avif.io, или графических редакторов. Ещё Google выпустили плагин WebPShop для Фотошопа, который добавляет возможность открывать и сохранять изображения в формате WebP, предварительно оценив качество в окне просмотра.
AVIF пока не так широко поддерживается: пока только в GIMP и Pixelmator Pro. Есть надежда, что по мере роста его популярности больше фоторедакторов научатся с ним работать.
Если не знаете, какую степень сжатия выбрать для начала, в качестве опорных значений можно взять цифры из сравнительной таблицы. Она показывает соответствие различных значений качества JPEG, WebP и AVIF. Стоит отметить, что значения, которые вы подберёте опытным путём на своём материале, могут отличаться от приведённых в этой таблице. Это вполне закономерно, так как для разных изображений может требоваться разная степень сжатия.
Если на сайте несколько десятков изображений, будет нерационально конвертировать их вручную в другой формат с помощью графических инструментов. Здесь на помощь приходят консольные утилиты, которые автоматизируют конвертацию и оптимизацию изображений, в том числе путём встраивания в сборку проекта.
Если стоит задача автоматизировать конвертацию изображений только в WebP, можно воспользоваться утилитой Google cwebp. Пример вызова утилиты из документации Google:
cwebp -q 80 image.png -o image.webp
Другим вариантом может быть использование утилит, поддерживающих работу сразу с несколькими форматами изображений. Например, мы в FunBox разработали утилиту optimizt. Она работает с наиболее популярными форматам изображений (PNG, JPEG, GIF, SVG) и конвертирует растровые изображения в WebP и AVIF. Пример вызова утилиты для конвертации всех изображений по переданному пути в WebP:
optimizt —webp path/to/directory
Аналогично для AVIF:
optimizt —avif path/to/directory
После автоматической конвертации набора изображений рекомендуем просмотреть их глазами, чтобы в погоне за экономией трафика ненароком не испортить качество графических материалов на сайте.
Как использовать актуальные форматы изображений на сайте
Чтобы использовать графические материалы в новых форматах, потребуется доработать код сайта. Для подключения контентных изображений достаточно использовать в разметке тег picture , в котором на первом месте указан путь до изображения:
Если браузер поддерживает AVIF или WebP, он загрузит и отобразит соответствующее изображение. В противном случае он проигнорирует путь до него и попытается загрузить следующее, указанное в source . Подробнее можно почитать в описании на MDN.
Для декоративных (фоновых) изображений, которые подключаются в CSS, потребуется чуть больше действий. Например, можно использовать специальные классы на корневом элементе html . Имена классов могут быть любыми, главное, чтобы было понятно, за что они отвечают. При помощи JS-кода можно проверять, какой формат поддерживает браузер, и присваивать элементу html соответствующий класс.
Вот пример такого кода, который размещается в блоке head разметки страницы:
Подчеркну, что этот код должен выполняться именно в head , чтобы избежать двойной загрузки одного и того же изображения в разных форматах: сначала в JPEG/PNG, а потом в AVIF/WebP.
Теперь нам нужно немного доработать стили, добавив в них подключение тех или иных изображений в зависимости от класса на элементе html . Вот как это может выглядеть на примере (синтаксис SCSS):
.block-name < background-color: #d3dae0; background-size: cover; background-repeat: no-repeat; .no-webplossy &, .no-avif & < background-image: url('./path/to/image.jpg'); >.avif & < background-image: url('./path/to/image.avif'); >.webplossy & < background-image: url('./path/to/image.webp'); >>Из кода видно, что если браузер не поддерживает форматы AVIF и WebP, то изображение загружается в формате JPEG.
С помощью этих нехитрых приёмов мы готовы использовать изображения в формате AVIF и WebP на клиенте (в браузере). Также отмечу, что в настройках сервера нужно добавить кеширующие заголовки для форматов .avif/.webp наряду с остальными форматами изображений, если это не сделано по умолчанию.
Благодаря этим доработкам каждый браузер сможет выбрать наилучший из предложенных форматов изображений:
- в Google Chrome 85+ и Firefox 93+ загрузится AVIF;
- в Safari 14+ на macOS 11+ — WebP;
- во всех остальных браузерах — JPEG или PNG.
Что нам дало использование новых форматов изображений
Мы исследовали, как новые форматы изображений влияют на объём трафика и скорость загрузки, на своём корпоративном сайте. Для оптимизации выбирали страницы, на которых есть иллюстрации, и сравнивали показатели до и после.
Начали с главной страницы, так как на неё попадают практически все посетители сайта и скорость её загрузки влияет на общее впечатление о компании. Она содержит два достаточно больших изображения: на первом экране и над футером. После перехода на WebP размер передаваемых данных при загрузке сократился почти на 55% для мобильных устройств и десктопа, а значение Largest Contentful Paint (LCP, время отрисовки самого большого видимого объекта) уменьшилось почти на 25%.
Следующая страница с изображениями — О нас. Она содержит много контентных фотографий, но большинство из них имеют небольшой размер в пикселях. Замена на WebP сэкономила 65-70% трафика в зависимости от устройства. Кстати, эта интересная особенность формата WebP — лучшее сжатие для небольших изображений в сравнении с AVIF — упоминается в статье на Хабре. А вот значение LCP практически не изменилось: стало меньше всего на 5%. Кажется, что такого не может быть, но всё логично: LCP определяется по длительности загрузки самого большого элемента на странице, которым в нашем случае является заглавная фотография, а после конвертации в WebP её размер несильно уменьшился. О причинах этого напишу далее.
И ещё один раздел сайта, в котором есть изображения — Контакты. Здесь находятся схемы проезда к нашим офисам в разных городах, и в качестве иллюстраций для точек на маршрутах мы используем фотографии мест, о которых идёт речь.
Здесь экономия от перехода на WebP уже не так заметна и составляет 17% по сравнению со старым добрым JPEG. И здесь возникает вопрос: почему же в этом случае трафик уменьшился не так значительно, как на других страницах? Всё дело в исходных изображениях, насколько они насыщены мелкими деталями. Для хорошо детализированных изображений, например фотографий на схемах проезда к офисам, пришлось практически вручную подбирать степень сжатия. Нередко она была выше принятых по умолчанию 75%, чтобы изображение после конвертации в WebP сохранило приемлемое качество по сравнению с оригиналом. Из этого можно сделать вывод, что использование WebP для реальных фотографий, насыщенных большим количеством мелких деталей, не всегда приводит к существенной экономии трафика. В отдельных случаях после конвертации изображение может весить даже больше, чем иллюстрация такого же визуального качества в формате JPEG.
Если коротко, внедрение WebP помогло нам сократить размер изображений на сайте:
- на главной странице иллюстрации стали весить в 2 раза меньше;
- на странице «О нас» удалось достичь почти трёхкратного сокращения общего размера изображений;
- в разделе «Контакты» цифры оказались скромнее: всего –17%.
В начале 2021 года мы провели другой эксперимент: решили перевести все изображения в AVIF. Были опасения, что из-за отсутствия поддержки в nginx может ничего не получиться, к тому же AVIF слишком новый формат и при его использовании ещё встречаются некоторые проблемы. Одна из них проявилась спустя несколько месяцев после добавления на сайт AVIF-изображений. Мы заметили, что в одной из dev-версий браузера Firefox перестала отображаться часть иллюстраций. Выяснилось, что эти AVIF-изображения не соответствуют спецификации и содержат технические ошибки (подробное описание можно прочитать на баг-трекерах Chromium и Mozilla). Ошибка закралась в известную библиотеку sharp, которая используется под капотом нашего optimizt. Спустя 4 месяца автор sharp выпустил исправленную версию библиотеки, после чего мы заново переконвертировали изображения.
Тем не менее, результаты внедрения AVIF оказались неоднозначными. Так, на главной странице Retina-изображения показали гораздо лучшую компрессию с сохранением визуального качества (размер файлов уменьшился почти в 2 раза по сравнению с WebP), чем обычные. Надо учитывать, что используемые на странице иллюстрации созданы в графическом редакторе, это не реальные фотографии, а такие изображения, как правило, лучше сжимаются, потому что обычно на них гораздо меньше мелких деталей. А вот на странице «О нас» и на схемах проезда конвертация изображений в AVIF сэкономила всего 5-15% на общем размере файлов по сравнению с WebP. Можно сказать, что в этом случае нет большой разницы между WebP и AVIF. Поэтому если у вас на сайте уже есть WebP-изображения, то вам необязательно их переводить в AVIF — по итогу может оказаться, что результат не оправдает приложенных усилий. Другое дело, если вы ещё не внедрили WebP, в этом случае переход сразу на AVIF может кардинально ускорить загрузку страниц.
В качестве общего вывода отмечу, что всегда нужно делать замеры до и после изменения формата изображений. Это поможет объективно оценить полученные результаты и определить целесообразность перехода на WebP, AVIF или что-то ещё.
Что дальше?
Добавление поддержки WebP и AVIF на нашем сайте сэкономило нам до 50-60% трафика на отдельных страницах. При этом сами форматы привычны и их можно де-факто считать стандартом для изображений в вебе. Да, есть свои минусы (привет, Safari), но в конечном итоге их можно и нужно использовать на сайтах и в веб-приложениях. Посмотрим, что будет дальше. Уже завели таймер на следующий заход, когда появится новый формат изображений для веба, способный потеснить AVIF.
- верстка сайтов
- оптимизация изображений
- avif
- jpeg
AVIF или WebP: Какой формат выбрать в 2023 году?
PNG и JPG всегда были основными форматами изображений для наших сайтов. Однако, появились форматы нового поколения, такие как AVIF или WebP, чтобы конкурировать с ними. Если вы только краем уха слышали про эти форматы, возможно, вы не знаете, что это за форматы и какой из них лучше подойдет для ваших нужд.
У AVIF и WebP есть несколько ключевых различий в сжатии, качестве и поддержке браузерами. В этой статье мы рассмотрим разницу между AVIF и WebP. Затем мы разберемся как использовать эти форматы изображений в WordPress.
- Что это за форматы? AVIF и WebP
- Три ключевых отличия AVIF от WebP
- Сжатие. AVIF или WebP?
- Качество. AVIF или WebP?
- Поддержка браузерами. AVIF или WebP?
Что это за форматы? AVIF и WebP
WebP и AVIF – это форматы следующего поколения, которые предназначены для создания файлов меньшего размера при сохранении высокого качества изображения. Google представил нам WebP в 2010 году, тогда как AVIF на много моложе. Он был создан только в 2019 году.
WebP был изначально запущен в качестве замены традиционных форматов изображений JPEG, JPG и PNG. Поскольку он существует намного дольше, WebP поддерживается большинством браузеров и платформ:
WebP отлично подойдет для ярких, сочных и красочных фотографий, так как он может отображать большее количество пикселей. Кроме того, этот формат обеспечивает очень быстрое времена загрузки, в сравнении с PNG и JPEG. Файлы WebP на 26% меньше, чем файлы PNG, и на 34% меньше, чем файлы JPEG.
С другой стороны, AVIF, производный от видеокодека AVI, является отличным выбором для “lossy compression” (сжатие с потерями) — это когда из файла удаляются ненужные данные, обычно без заметного падения качества. Размеры файлов AVIF очень малы, что обеспечит увеличение скорости загрузки вашего контента. AVIF является лучшим выбором для видео, анимаций и изображений с прозрачным фоном.
Три ключевых отличия AVIF от WebP
Чтобы разрешить спор между AVIF и WebP, давайте рассмотрим их ключевые отличия. Таким образом, вы сможете выбрать лучший формат для вашего сайта и ваших потребностей. С учетом этого давайте рассмотрим три важных фактора:
Сжатие. AVIF или WebP?
Сжатие изображений является одним из наиболее важных аспектов при выборе между AVIF и WebP. С маленьким размером файла можно увеличить скорость загрузки и снизить время Large Contentful Paint (LCP). В свою очередь, вы сможете обеспечить лучший пользовательский опыт (UX) и получить более высокий рейтинг в поисковой выдаче.
WebP был представлен как способ достижения лучшего качества изображения с размером файла, похожим на JPG:
Однако, как и с JPG, вы иногда можете столкнуться с неприятными побочными эффектами, такими как блочность, размытость и цветовой оттенок.
С другой стороны с AVIF вы можете получить более гладкое, четкое изображение с тем же размером файла. Кроме того, редко возникают любые из вышеупомянутых негативных эффектов. Это является преимуществом AVIF для изображений с высокой детализацией. Кроме того, если на вашем изображении есть текст, то AVIF подойдет лучше, поскольку на фотографии нужна детализация, с которой этот формат справляется отлично.
Качество. AVIF или WebP?
Качество изображения относится к точности представления деталей, сохраненных в пикселях, таких как цвет, контраст и тени. Высококачественное изображение будет выглядеть четким и резким. Обычно, чем выше разрешение изображения, тем выше его качество, так как на каждый дюйм показывается больше пикселей.
Оба формата файла изображений имеют некоторые ограничения по размеру. Например, AVIF имеет ограничение на разрешение изображения в 65538 на 65536 пикселей и размер изображения в 6780 на 4320 пикселей.
С другой стороны, максимальное количество пикселей в изображении WebP составляет 16383 на 16383. Это строгое ограничение, которое не может быть превышено. Думаю вы уже понимаете что для высоко детализированных изображений этот формат не лучший выбор.
Мы также можем сравнить AVIF и WebP в терминах битовой глубины. Этот термин относится к количеству битов, необходимых для отображения цвета одного пикселя. В основном, чем выше битовая глубина, тем больше цветов может отображаться на изображении.
Как и JPEG, WebP поддерживает максимальную битовую глубину в 8, что составляет примерно 16 миллионов цветов. AVIF расширяет это, поддерживая глубину бит в 10. Следовательно, AVIF способен отображать гораздо больше цветов, но полученные файлы могут занимать больше места на диске и требовать большей мощности обработки.
Кроме того, оба формата поддерживают изображения с HDR. Отлично подходит для фотографии. Однако, в этом аспекте AVIF имеет преимущество за счет широкого цветового диапазона и поддержки хроминансной субдискретизации. Таким образом, вы можете уменьшить количество цветовой информации в сигнале, не влияя на качество изображения.
Поддержка браузерами. AVIF или WebP?
WebP существует гораздо дольше, чем AVIF, его поддержка более широко распространена. Он поддерживается всеми популярными браузерами, включая Microsoft Edge и Firefox. Кроме того, все основные мобильные браузеры также поддерживают форматы WebP.
С другой стороны, AVIF имеет куда стремится в плане поддержки браузерами. Chrome и Opera полностью поддерживают изображения AVIF, а пользователи Firefox могут настроить эту настройку вручную. Однако на мобильных устройствах вы можете использовать AVIF только в Chrome для Android, Samsung Internet и Android Browser.
Вот цифры для глобальной поддержки WebP и AVIF, согласно Can I Use:
- WebP – примерно 96,30% пользователей веба используют браузер, который поддерживает WebP.
- AVIF – примерно 79,81% пользователей веба используют браузер, который поддерживает AVIF.
Таким образом, хотя оба формата поддерживаются большинством пользователей, WebP является явным победителем в сравнении с AVIF в плане поддержки браузером.
Как использовать AVIF или WebP в WordPress?
На данный момент, все версии WordPress выше 5.8 по умолчанию поддерживают WebP. Поэтому вы можете загружать свои изображения в формате WebP как обычно через медиа загрузчик в админке.
Однако, если вы используете более раннюю версию WordPress или хотите использовать оба типа файлов, вы можете воспользоваться сторонним плагином, например Image optimization & Lazy Load by Optimole
Чтобы использовать формат AVIF в своем блоге на WordPress, нужно активировать функцию конвертации изображений в AVIF с помощью плагина Optimole в разделе “Compression“. Важно знать, что Optimole будет отображать изображения в формате AVIF только тем посетителям, у которых есть поддержка этого формата в их браузере.
Заключение. AVIF или WebP?
В заключение, оба формата изображений имеют свои преимущества и недостатки, и выбор между ними зависит от ваших конкретных потребностей и ограничений. WebP обеспечивает широкую поддержку браузеров и уменьшает размер файлов, но не поддерживает HDR-изображения и имеет ограниченный диапазон цветов. AVIF поддерживает HDR, имеет более широкий диапазон цветов и лучшее качество изображения при низком битрейте, но на данный момент поддерживается только несколькими браузерами.
Александр Сокирка
Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.
Оптимизируем фотографии для сайтов: детальная инструкция
Фотографии или скриншоты — неотъемлемая часть для любой статьи или публикации. Но многие пользователи сталкиваются с проблемой долгой загрузки страниц с медиаконтентом, что вызывает негативные эмоции. Причина тому — отсутствие должной оптимизации контента. Об это в первую очередь должен заботиться руководитель проекта и SEO-оптимизатор. Фотографии и скриншоты на странице должны быть оптимального размера, который бы помещался на странице. Помимо этого изображение должно быть детализированным, иметь нужный формат и размер. Как это сделать? Читайте далее!
Как выбрать правильный размер фото для сайта
Проблема заключается в том, что современная фототехника позволяет делать снимки в высоком разрешении. Соответственно, их размер зачастую превышает 20-50 мегабайт. Несмотря на наличие у большинства пользователей скоростного интернета, объемные по весу страницы хуже индексируются поисковыми систему в виду своей загруженности. А неправильно подобранные пропорции приводят к тому, что при посещении сайта с мобильного телефона все картинки собьются.
Существует два ключевых размерных параметра для всех фото, загружаемых на сайт:
- Вес, который контент занимает в памяти устройства (компьютер или мобильная техника), измеряется в килобайтах и мегабайтах.
- Размер – Px — измеряется в пикселях, обозначает площадь, которую занимает картинка на странице.
Если ваш сайт работает на движке Ecwid, то размер картинок оптимизируется в автоматическом режиме под каждое разрешение дисплея пользователя. Эту же функцию предлагают некоторые другие CMS. Но в большинстве случаев нужно в ручном режиме указать количество px. Оптимальный формат — 1000х1000 px.
Что касается веса медиаконтента, то, чем он меньше, тем быстрее будет грузиться страница. Также необходимо позаботится об оптимизации путем сжатия. Главное — не перестараться, иначе ухудшится качество отображения. Оптимальный вес картинки — 200-400 килобайт, в зависимости от размера.
Кадрирование картинок
Если сжимать в размерах оригинальное изображение и уменьшать его вес, качество детализации снижается, пропадают менее четкие детали на фото. Если ваша цель — показать даже не прорисованные элементы, добавьте их отдельным кадром с увеличением. Так вы сэкономите место и не допустите проблем с оптимизацией страницы. Используйте Photoshop.
Нужны ли миниатюры?
Однозначно нужны! Для многих страниц на сайте нужны миниатюрные изображения (как и для страниц интернет-магазинов). Оптимальный их размер в пикселях — всего 250 px при весе в 50 килобайт. Достигните этого значения вручную в редакторе. А на сайтах на Ecwid миниатюры создаются автоматически!
Какие пропорции фото нужно добавлять на сайт
Существует перечень пропорций, которые могут быть добавлены на сайт (оптимальные):
- 1:1 (квадрат с ровным сторонами);
- 4:3 (высокий прямоугольник);
- 3:2 (простой прямоугольник);
- 16:9 (низкий прямоугольник).
Проследите за тем, чтобы все скриншоты и фотографии на страницах сайта были одной пропорции. Это визуально скрасит оформление. Важно подбирать пропорцию и по ширине самого текста. Особенно важной эта информация будет если разработка интернет магазина не включала наполнение, а вам необходимо красиво и гармонично вписать изображения товаров на страницы своего ресурса.
Настраиваем правильную резкость для фото в Photoshop
Размеры картинки и алгоритм уменьшения напрямую влияют на резкость и детализацию. Для правильной настройки нужно использовать встроенную функцию в редакторе Photoshop. За резкость отвечают параметры Bicubic Sharper. Значение Image Size лучше оставить на уровне 1000 px. Чтобы настроить резкость большого снимка, уменьшайте его размер постепенно, каждый раз на 1000 пикселей. После каждого изменения устанавливайте параметр Bicubic Sharper для настройки резкости. Таким образом вы добьетесь нужного результата без необходимости дальнейшей корректировки.
Способ изменения резкости для опытных пользователей
Этот способ подразумевает собой создание двух слоев фото с разным уровнем резкости.
Следуйте такому алгоритму:
- Уменьшите размер картинки при помощи параметра Image Size, выбрав дополнительно параметр Bicubic Sharper.
- Добавьте второй слой на фото параметром Duplicate Layer.
- Сделайте второй слой более резким (параметр Filter → Sharpen → Sharpen).
- Сделайте первый слой более прозрачным (параметр Opacity в окне Layer).
Здесь же вы можете использовать несколько хитростей. Например, добавьте на второй слой режим luminosity, чтобы не допустить проявления цветных ореолов.
Какой формат картинок лучше всего подойдет для добавления на сайт
Всего выделяют три актуальных формата фото и скриншотов для добавления на страницы:
- JPEG — наиболее актуальный формат, который поддерживает сжатие с потерей качества или без него (зависит от конечного размера);
- PNG — формат, позволяющий получить наиболее детализированную картинку после сжатия;
- GIF — формат, поддерживающий анимационные изображения (максимум — 256 цветов).
Для выбора последуйте советам:
- если изображение имеет много деталей, выбирайте стандартный JPEG;
- если изображение имеет много ровных заливок, выбирайте PNG, так как в формате JPEG сжатие придаст картинке пиксельности, что будет заметно на ровных краях;
- для анимации выбирайте GIF.
Не рекомендован ни в каком случае формат TIFF.
Чтобы уменьшить размер, потеряв при этом МИНИМУМ качества, воспользуйтесь сервисами: TinyPNG или JPEGmini.
Что делать, если нет Photoshop?
Не у каждого есть полноценная версия Photoshop, особенно если дизайн и создание сайтов вашим призванием не является. Есть альтернатива в виде онлайн версии Фотошопа, которая доступна на их сайте. Несмотря на ограниченный функционал, при помощи веб-программы можно отредактировать размер, настроить резкость. А при необходимости можно приобрести базовую версию, цена которой составляет около 10-20 долларов.
Перечень альтернативных бесплатных редакторов фото:
Эта программа легко устанавливается на ОС Windows, Linux и MacOS. В базовый функционал входит работа со слоями, ретушью, коррекцией цвета. Можно редактировать картинки любого популярного формата, рисовать, вставлять текст.
Эта программа используется только в Windows. Многие ее знают, как один из базовых вариантов для упрощенного редактирования картинки. Программа подходит для полупрофессиональной обработки. В инструменты входит работа со слоями, резкость, коррекция цвета.
Этот редактор доступен в онлайн-режиме. Его особенностью является наличие большого количества фильтров (наверное, самое большое из всех перечисленных здесь приложений). Однако, углубленный функционал скрывается в платной версии.
Эта программа частично способна заменить Фотошоп, так как и по пользовательскому интерфейсу, и по функционалу его повторяет.
Все редакторы, кроме Paint.NET, можно установить и на Windows, и на MacOS.
Как видите, существует множество возможностей правильно настроить и оптимизировать медиаконтент для вашего сайта. Сделать это можно без значительного ограничения в качестве.