Как сделать резервный вариант для видео или изображений с помощью элемента picture

Адаптивное изображение на сайт с помощью HTML5

Адаптивное изображение часто крайне необходимо для качественных проектов, но вот его реализация бывает затруднительна. К тому же, при верстке под мобильные устройства, под которые необходимо иметь урезанную версию картинки.

Как это реализовать правильно на HTML5?

Любой качественный адаптивный сайт не может обойтись без резиновых изображений, которые соответствуют всем требованиям. На данный момент существует несколько способов, которые могут решать данный вопрос. И лишь один из них является функциональным и соответствующий всем стандартам, но достаточно редко используемый. Ранее мы рассматривали медиа-запросы, которые способны задать любому элементу необходимые правила, в зависимости от размера экрана. Существует прекрасный его аналог, который я советую вам использовать.

Для начала, давайте поочередно рассмотрим и сравним возможные варианты решения данной проблемы.

Как делали раньше

Данный способ создания адаптивного изображения является действенным и качественным, в котором даже нет необходимости использования медиа-запросов. Код имеет всего 2 строчки, которые выполняют свои функции на ура:

Как сделать резервный вариант для видео или изображений с помощью элемента picture

Частная коллекция качественных материалов для тех, кто делает сайты

• Фотошоп-мастер2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

• Главная»
• Уроки»
• Уроки jQuery для начинающих

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Stimed — стили в зависимости от времени суток

Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.

jQuery плагин для отображения превью загружаемого файла

Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.

Создание наложения «Картинка в картинке» — управляемое редактирование

Этот процесс управляемого редактирования научит создавать наложение «Картинка в картинке». Можно поместить графический объект или видео поверх фонового видео.

Чтобы создать наложение «Картинка в картинке» с помощью управляемого редактирования, выполните следующие действия.

Этот процесс управляемого редактирования демонстрирует добавление графического объекта или видео поверх фонового видео. Нажимайте кнопки «Назад» и «Далее», чтобы перейти к предыдущему или следующему шагу управляемого редактирования.

Оптимизация верстки под Retina-дисплеи

В связи с большой популярностью устройств Apple с большим DPI, изображения на сайте нужно оптимизировать, чтобы они были пригодными к отображению на таких экранах.

Теория подготовки сайта к Retina дисплеям

На Retina-дисплеях с повышенной плотностью пикселей в два раза больше пикселей на дюйм, чем на обычных экранах. Чтобы изображения не были размытыми, нужно использовать файлы в 2 или 3 раза больше оригинального.

Как адаптировать изображения под Retina-экраны

Если делать дизайн сайта в Photoshop, то разрешение файла должно быть 144 dpi (для двухкратного увеличения). При подготовке изображений для сборки сайта есть несколько решений.

Скрипт Retina

Можно использовать скрипт Retina.js для тегов img.

Как только пользователь открывает страницу сайта, скрипт автоматически проверяет какое разрешение у экрана и какова матрица пикселей. Если у пользователя устройство с Retina дисплеем, он ищет на сервере необходимые файлы изображений и заменяет их на более качественные. Условие таково: изображения для Retina-устройств должны иметь в названиях модификатор @2x, @3х, @4х.

Например, если у вас есть изображение на вашей странице, которое выглядит так:

Скрипт проверит ваш сервер, чтобы увидеть, существует ли альтернативное изображение по этому пути:

Минимальный набор файлов для одного изображения: filename.png, [email protected]

При этом изображения могут быть в разных форматах: JPEG, PNG, GIF.

О том как работает данный скрипт написано на странице проекта.

Плагин Retinize It для Фотошопа

Плагин Retinize It оптимизирует графику, что она на сайте выглядело хорошо на iOS с Retina-дисплями.

Плагин представляет собой записанные действия, которые можно будет воспроизводить через горячие клавиши или пункты меню. Плагин выделяет слои, создает новый файл с ними, обрезает края и сохраняет изображение в одном, двух или трех размерах.

Работать с ним просто:

• Выберите слои или группу слоев
• Запустите Retinize It (можно добавить сочетание клавиш)
• Назовите файлы
• Получите нарезанные изображения для верстки

Специальный -Webkit

Существует специальный -Webkit-image-set от Apple , который позволяет использовать несколько вариантов одного изображения в CSS:
.image <
background-image: -Webkit-image-set(url(example.png) 1x, url([email protected]) 2x);
>

Но этот способ не распространяется на изображения внутри тега img .

Скрпипт Picturefill и специальная HTML-разметка

Элементы изображения, атрибуты srcset и размеры и связанные с ними функции позволяют веб-разработчикам предоставлять каждому пользователю подходящее изображение в зависимости от множества условий, таких как размер экрана, размер области просмотра, разрешение экрана и многое другое. Picturefill обеспечивает поддержку элемента изображения и связанных с ним функций в браузерах, которые еще не поддерживают их, поэтому вы можете начать использовать их уже сегодня!

Использование cookie и mod_rewrite

На стороне клиента в первой строке кода делается проверка на определение ретины с установкой cookie:

Этот скрипт выполнится первым и все дальнейшие запросы на сервер будут содержать строку «retina=1», если мы имеем дело с Ретиной. Все изображения, для которых у нас есть две копии — обычная и ретиновая (в два раза большая) называем одинаково, но с постфиксом «@2x» для большей, при этом в коде указываем данные разрешения для меньшего изображения:

Код для Apache:

RewriteCond % !retina=1
RewriteRule (.*)@2x\.(gif|jpe?g|png|webp) $1.$2 [L,NC]

Этот код означает, что если не установлено cookie «retina=1», то нужно убрать постфикс «@2x» из имени картинки.

В итоге, если у нас Ретина, cookie ставится в самом начале, все дальнейшие запросы к серверу идут с ней и картинки грузятся как указано в коде — например, если указано «[email protected]», то эта картинка и грузится.

Если у нас обычный экран («retina=0»), запросы к серверу идут без cookie и из картинок вырезается постфикс «@2x», т. е. вместо «[email protected]» загрузится «filename.jpg».

Использование элемента picture

Использование элемента picture , позволяет использовать несколько адаптивных изображений, заменяющих друг друга в зависимости от размера и плотности пикселей экрана.

Вместо заключения: текст для вставки в ТЗ

Чтобы при просмотре сайта на Retina-экранах изображения не были размытыми, нужно использовать файлы в 2 раза больше оригинального. То есть все изображения должны быть в двух вариантах: обычного размера и вдвое большего.

При этом у них должны быть одинаковые названия, только у изображений для Retina-устройств в названии добавляется модификатор @2x.

Frontender Magazine

— это одно из нововведений HTML5, разработанное общественной группой W3C по адаптивным изображениям (Responsive Images Community Group — RICG). Оно должно стать семантичным, основанным на разметке, инструментом для реализации отзывчивых изображений без использования JavaScript или сложных проверок на стороне сервера.

поддерживает возможность добавления различных типов резервного контента, но пока в практической реализации этой поддержки есть ряд проблем. В этой статье мы разберемся как работает резервный контент, в каких случаях он перестает работать и как это можно исправить.

Элемент

и резервное содержимое

могут быть помещены элементы для указания набора изображений, из которых браузер может выбрать подходящее. Элементы могут при необходимости принимать атрибуты type и media , которые предоставляют браузеру сведения о типе файла и медиатипе подключенного контента соответственно. На основе информации, помещенной в атрибуты, браузер должен загружать первый с типом файла, который поддерживается, и с подходящим медиазапросом. Например:

Для подстраховки от ситуаций когда браузер не поддерживает

и srcset , мы получим что-то вроде следующего:

Главная идея такого кода с использованием

состоит в том, чтобы загружалось только одно изображение в зависимости от контекста пользователя:

в браузер, поддерживающий

, на устройствах с шириной не меньше 40 em должно быть загружено большое изображение big.jpg .
В браузер, поддерживающий

, на устройствах с шириной меньше 40 em должно быть загружено изображение средней величины med.jpg .
В браузере, который не поддерживает

, должно быть отображено резервное изображение.
Если браузер решает отобразить файл big или med , он может выбрать изображение с подходящим разрешением исходя из содержимого атрибута srcset .

В браузере на устройстве с низким разрешением (таком как iMac) должно отображаться изображение 1x.

В браузере на устройстве с более высоким разрешением (таком как iPhone с дисплеем Retina) должно отображаться изображение 2x.

В браузере на устройстве следующего поколения с еще большим разрешением должно отображаться изображение 3x.

Для пользователя преимущество в том, что скачивается только один файл с изображением, вне зависимости от возможностей браузера, параметров экрана устройства или его пиксельной плотности.

также позволяет использовать не только изображения в качестве резервного контента, что положительно влияет на доступность: можно добавить

, ,

Обеспечиваем доступность контента

Хотя насчёт самого лучшего способа добавления резервного контента для

мнения пока расходятся (также взгляните на это обсуждение), мне захотелось проверить как программа VoiceOver от Apple будет работать с разными элементами. В процессе этого эксперимента я проверил как VoiceOver понимает атрибут alt в разных контекстах и резервные элементы . К сожалению у меня не было возможности провести проверку других скринридеров и вспомогательных технологий, буду рад если вы поделитесь своим опытом.

Ошибкоустойчивый синтаксис

Опираясь на эти данные я пришёл к следующему ошибкоустойчивому решению:

У нас есть элемент

, два элемента source на выбор для браузеров, поддерживающих

, резервный контент в и для большинства браузеров (смотрите примечание сразу под этим абзацом) и отдельное резервное изображение для IE 7 и старше. Пустой alt не даёт скринридерам озвучить информацию о настоящем изображении, спрятан с помощью CSS (используемый класс идентичен .visuallyhidden , который применяется в HTML5 Boilerplate), но может быть прочитан скринридерами. В элементе нет необходимости.

( Примечание: Мы вынуждены использовать как бутафорный alt чтобы VoiceOver мог прочитать текст в браузере Opera. Хотя процент пользователей Opera относительно небольшой и она находится в процессе перехода на движок WebKit, я всё же считаю что её стоит принимать во внимание. Однако, если для вас не важна поддержка этого конкретного браузера, вы можете избавиться от и вместо него добавить alt для (хотя это и не приветствуется спецификацией). Это в случае если в и alt помещён один и тот же контент. Если у вас более сложный резервный элемент, например

Атрибуты

Этот элемент содержит только универсальные атрибуты.

Примеры

Эти примеры демонстрируют влияние различных атрибутов элемента указывает несколько медиа-ресурсов для элементов

Атрибут media

Атрибут media позволяет определить медиа-запрос, который веб-браузер будет анализировать для выбора элемента указывает несколько медиа-ресурсов для элементов

Атрибут type

Атрибут type позволяет Вам обозначить MIME-тип данных, указанных в атрибуте srcset элемента указывает несколько медиа-ресурсов для элементов

Так сколько изображений надо готовить для адаптивного сайта (+ retina)?

Всем привет.
Допустим, у меня картинка 100% ширины. Мне нужно качественное отображение на популярных экранах. Как это организовать?
Напрашивается примерно такой список размеров(по ширине):
1920px — для больших экранов и ретины с двойным разрешением
2560 — ретина с тройным разрешением
1280 — обычные экраны, ретина
Ну и, допустим,
1080 и 720 (Или 1024? и 768? Или все вместе?)
Итого пять-шесть вариантов одного изображения (это много или мало?)

И как их подключать? Использовать медиа запросы или picture c включением img для старых браузеров?
Если устройство меняет ориентацию после загрузки сайта — сразу же будет загружаться новое изображение или можно как-то приостановить этот процесс (и нужно ли?)

В общем, куча вопросов и никакой ясности в голове. Пытаюсь найти какую-то систематизированную информацию на эту тему, но что-то запутываюсь еще больше.

Полное руководство по иллюстрированию контента: от выбора картинок до оптимизации

Чтобы пользователи захотели прочесть именно вашу публикацию, их нужно как-то заинтересовать. Привлечь внимание к тексту помогают изображения. Также они могут пояснить и дополнить статью. Но плохое визуальное сопровождение «убивает» самый качественный материал, а неправильное техническое оформление картинок отрицательно влияет на ранжирование.

Рассказываем, как правильно иллюстрировать контент, по какому принципу подбирать изображения и где их искать, какие требования учитывать при оформлении.

Зачем тексту визуальное дополнение

Самая большая ошибка, которую можно совершить при иллюстрировании контента – добавить картинки чтобы «было красиво» и потому, что «все так делают».

Основные функции иллюстраций таковы.

Повышение вовлеченности пользователей

Изображения делают текст удобнее для чтения. Если перед читателем стоит выбор – огромная текстовая «простыня» или визуально структурированный контент, то вероятнее он выберет второй вариант, поскольку его легче воспринимать. Если бы в своем блоге мы рассказывали о популярности Instagram Stories текстом, получилось бы менее понятно:

Дополнение авторской мысли

Бывает, что одним текстом сложно или долго объяснять идею и легче показать ее наглядно. Например, вместо описания местности проще показать ее фото или при написании инструкций целесообразнее пояснить действия на скриншотах и схемах. При описании работы с инструментом LISTKIT от SEMANTICA использовали скриншоты, чтобы объяснение было более понятным:

Воздействие на эмоции читателей

С помощью изображений можно вызывать различные ощущения. К примеру, на решение о покупке нередко влияет привлекательное изображение товара. Как пример, две истории на разных сайтах о причинах выбора продуктов Apple:

Прежде чем иллюстрировать контент, задайте себе вопрос «Зачем?». Если картинка не имеет ясной цели, значит, она не нужна.

На картинке слева мало понятно, как соотносятся лицо и искусственное яблоко, а вот на изображении справа показан описываемый объект:

Когда отсутствие иллюстраций лучше их наличия

Если изображение не релевантно контенту – это плохо. Но еще хуже шаблонные картинки. Вот лишь несколько примеров.

Фото дружной команды или развлекательного мероприятия, или встречи хороших друзей. Изображение такого типа используют слишком часто, чтобы оно имело конкретный смысл и выглядело реально:

Эта, или очень похожая на нее девушка, работает оператором на тысячах сайтов, где есть служба поддержки:

А вот эту картинку вы, скорее всего, видели и в таргетированной рекламе, и на разных сайтах. При виде этого или похожего изображения не сложно догадаться, что сейчас расскажут про удаленную работу на райском острове:

Как правильно использовать изображения

Существенный момент в иллюстрировании контента – релевантность. Иллюстрации должны соответствовать общей тематике статьи, но также нужно следить за уместностью их употребления. Размещайте картинки непосредственно рядом с текстом, который они дополняют.

Учтите, что релевантность изображений – один из важных факторов для поисковых систем при оценке качества контента. Но поскольку роботы не могут видеть изображение, то его содержание они узнают из описания. Обязательно прописывайте атрибут alt к картинкам и указывайте в нем краткое, но понятное описание изображенного объекта.

Еще одно значимое условие – качество. Размытые картинки малопонятного содержания создают плохое впечатление и не способствуют формированию доверия к тексту. И наоборот, качественное изображение влияет на поведенческие факторы. Хорошие иллюстрации делают контент более кликабельным и виральным: его чаще читают и им охотнее делятся в социальных сетях.

Отличить хорошую иллюстрацию можно по следующим признакам:

• Честность – изображение выглядит реально и жизненно. Фальшь на фото и картинках вызывает недоверие к тексту и распознается пользователями очень быстро. К примеру, фотостоковое изображение фермера в спецовке «с иголочки» и с белоснежной улыбкой вряд ли будет уместным в статье о труде сельхозработников где-то в российской глубинке.

• Понятность – читателю ясно, что хотел сообщить автор посредством изображения. Допустим, портретное фото красивой девушки в тексте о процедурной косметологии может означать что угодно или не значить ничего. А вот по фото той же девушки в кабинете косметолога понятно, что речь пойдет о косметологических процедурах.

• Конкретность – картинка поясняет, дополняет, визуализирует или выполняет иное полезное действие. Слишком общие и отвлеченные сюжеты – это как раз тот случай, когда картинка использована «чтобы была». Например, фото реального человека на сайте адвоката смотрится уместнее, чем ретро-интерьер:

При использовании изображений в первую очередь иллюстрируйте самые важные моменты в статье, стараясь раскрыть смысл текста. Идеальный вариант – когда читатель по изображениям может понять содержание материала.

При взгляде на левое фото сложно догадаться, что речь пойдет о банке и получении заработной платы, а вот правое изображение выглядит более релевантным заголовку:

Не перегружайте текст картинками, если в этом нет необходимости. Например, в пошаговой инструкции по настройке компьютерной программы скриншоты после каждого абзаца логичны, когда поясняют конкретное действие. Если же картинки носят вспомогательный характер, то чрезмерное их обилие делает чтение не комфортным.

И самое важное при подборе изображений – соблюдайте авторское право. В русскоязычном интернете к интеллектуальной собственности относятся не слишком уважительно. Часто картинки копируют с чужих сайтов или попросту находят в поисковой выдаче. Не делайте так. Во-первых – этим вы снижаете качество сайта в глазах поисковиков, учитывающих уникальность всех элементов контента. Во-вторых – правообладатель при обнаружении воровства вправе призвать вас к ответственности по закону и в российской судебной практике присутствуют случаи удовлетворения исков о нарушении авторских прав.

Как применять картинки с фотостоков

Самый очевидный источник изображений для большинства авторов – бесплатные фотостоки, которых достаточно много:

Безусловно, порой на фотостоках можно найти довольно неплохие фотографии, которые выглядят вполне реально и релевантны контенту.

Проблема в том, что многие из фотостоковых изображений безнадежно «заезжены». Наверно, вы и сами встречали изображения, которые только ленивый не использовал. Например, фото пожилого человека, прозванного Дедом Гарольдом, стали источником многочисленных мемов. Однако многие сайты продолжают использовать эти изображения:

Некоторым фотографиям не помогут даже общеизвестные приемы уникализации вроде изменить размер, повернуть изображение, сменить фон и прочее – все это с ними уже было проделано миллион раз.

Если вы все-таки решили воспользоваться бесплатным фотостоком, проверьте популярность картинки. Сделать это можно при помощи сервиса проверки уникальности изображений TinyEye: загрузите картинку или укажите ссылку на нее, сервис проверит ее и выдаст перечень сайтов с этим фото.

Проверим изображение с Гарольдом через TinyEye и получим предсказуемый результат:

Но даже после нахождения относительно уникальной картинки не торопитесь ее применять. Сначала проверьте возможность ее использования (это как раз про авторское право). Для каждого изображения на фотостоках указывают тип лицензии, от которого зависят условия использования.

Для бесплатного иллюстрирования контента подходят фото c лицензией Creative Commons. У нее есть 6 типов, у каждого – свои ограничения. Общим является необходимость указания авторства во всех случаях. Для коммерческого использования пригодны фото с лицензией:

• CC Attribution (CC-BY) – допускается редактирование и изменение изображений;
• CC Attribution — Share Alike (CC-BY-SA) – лицензия распространяется на весь контент, созданный на основе изображения;
• CC Attribution — No Derivative Works (CC-BY-ND) – любое изменение изображения запрещено.

Остальные 3 типа лицензии Creative Commons предусмотрены для некоммерческого использования. Целесообразнее избегать их применения, поскольку в спорных ситуациях может быть сложно доказать отсутствие выгоды от использования.

Без указания авторства можно использовать только материалы с лицензией CC Zero (CC0), означающую передачу в свободное использование (общее достояние).

Также фотосток может распространять изображения по собственной лицензии. В этом случае нужно изучить условия использования материалов, чтобы не нарушить оговоренных пунктов.

Pixabay распространяет изображения по собственной лицензии и ссылка на условия опубликована рядом с фото:

Уникальные изображения можно найти на платных фотостоках/фотобанках:

Но и при покупке изображений нужно учитывать отличия лицензий:

• Royalty Free – можно использовать только на условиях автора (количество раз использования, разрешение, срок использования), число продаж изображения автором не ограничено;
• Extended Royalty Free – расширенная лицензия Royalty Free;
• Right Managed – условия использования оговариваются при продаже;
• Exclusive Buyout – покупатель получает эксклюзивное право использования, автор не может продать изображение кому-то еще;
• Editorial – редакционные фото только для ознакомительных целей;
• Rights-Ready license – изображение под проект.

Как видите, с фотостоками не все так просто. Нельзя просто взять первую понравившуюся картинку. Но есть и другие способы иллюстрирования.

Где еще брать иллюстрации

Иллюстрирование – это добавление информационных объектов, дополняющих и раскрывающих мысли текста. То есть не обязательно в качестве иллюстраций использовать профессиональные фотографии. Рассмотрим несколько вариантов визуального дополнения текста.

Собственные фотографии

Проведите самостоятельную фотосъемку или попросите фотографии у клиента, если пишете на заказ. Вам не обязательно использовать профессиональное оборудование. Современные смартфоны позволяют делать вполне качественные фото. А для пользователей такие мобильные снимки выглядят даже убедительнее, благодаря большей реальности.

Посмотреть, как могут выглядеть фотографии, сделанные на телефон, можно на сайте Mobile Photography Awards:

Скриншоты

Когда вы пишете материал о каких-либо сервисах, ссылаетесь на интернет-источники или составляете инструкцию по использованию программ, вместо фото используйте скриншоты. Для их создания используйте встроенные инструменты операционной системы либо специальные инструменты:

Инструкция по регистрации в сервисе SMMPlanner содержит скриншоты интерфейса, что позволяет наглядно показать пользователям нужные действия:

Рисунки

Если мысль сложно передать фотографией, то ее можно выразить метафорой. Придумайте образ, который вызовет нужные эмоции у читателей. Нарисуйте картинку от руки и сфотографируйте ее или воспользуйтесь сервисами для рисования:

Если не получается нарисовать самостоятельно, закажите рисунки у иллюстраторов, которых можно найти на таких ресурсах, как:

В Autodraw нарисовать картинку сможет даже человек без малейшей склонности к рисованию. Достаточно обозначить силуэт и выбрать подходящую по теме картинку на верхней панели:

Схемы

С помощью схем удобно показывать принцип работы чего-либо, расположение, структуру. При этом не нужно быть хорошим художником. Просто составьте изображение из графических фигур и добавьте подписи при необходимости. Создать схему можно от руки или в любом графическом редакторе:

В некоторых случаях удобно использовать скриншоты майнд-карт:

Бизнес-план по открытию интернет-магазина выполнен в виде майнд-карты:

Графики и диаграммы

Когда нужно визуализировать данные, статистику или числовые показатели, используйте графики и диаграммы. С их помощью легко наглядно показать соотношение между величинами. Для создания графиков и диаграмм пригодятся:

Инфографика

Посредством инфографики легко передать большой объем сложной информации: принципы работы, факты, самые важные моменты. Для создания примените такие сервисы, как:

В сервисе Canva для создания инфографики достаточно выбрать подходящий шаблон и вставить нужные данные:

Видео

Подходящие видеоролики поищите на популярных видеохостингах:

Но при использовании чужих видео обязательно ссылайтесь на источник или используйте функцию вставки от сервиса. Так на YouTube под каждым видео есть кнопка «Поделиться», после нажатия на которую можно скопировать код для вставки. Кроме того, вы можете самостоятельно снять видео.

Найдите подходящее видео на YouTube, нажмите кнопку «Поделиться», выберите функцию «Встроить» и скопируйте код для вставки:

Видеоанимация

Вместо видео можно создать анимированные ролики: соединить несколько изображений, добавить текст, наложить звук. Справиться с задачей легко даже без помощи специалиста благодаря DIY-сервисам:

Интерфейс Animaker достаточно прост, выберите нужный шаблон и откорректируйте его или создайте собственную анимацию:

Gif-анимация

Гифки позволяют показать движение или пошаговый процесс. Вместо того чтобы нагромождать кучу картинок, объедините их в подобие слайд-шоу – gif-анимацию. Также создать gif можно из готового видео. Примеры сервисов:

Для создания гифки просто загрузите видео, изображения или укажите URL картинок:

Как видите, есть масса вариантов проиллюстрировать контент помимо использования фотостоковых изображений. Но правильное иллюстрирование не ограничивается только подбором изображения. При ранжировании поисковые системы оценивают все элементы страницы. Неверное техническое оформление изображений отрицательно влияет на SEO-продвижение.

Как оптимизировать изображения для SEO

Оптимизация изображений необходима для правильного восприятия элементов поисковыми алгоритмами. Также картинки влияют на скорость загрузки сайта, которая является одним из факторов ранжирования. Кроме того, правильное оформление изображений позволяет им высоко ранжироваться в поиске по картинкам, откуда приходит дополнительный трафик на сайт. Разберемся, какие моменты учитывать при оптимизации изображений.

Давайте изображению правильное название

При поиске релевантной запросу картинки поисковики оценивают все доступные элементы. Помимо title и alt роботы сканируют название загруженного файла, оно должно соответствовать содержанию. Например, картинка, изображающая дизайн ванной комнаты должна именоваться не автоматически сгенерированным именем вроде DSC4567.jpg, а Dizajn_vannoj_komnaty.jpg.

Делайте название простым и коротким, оно для роботов, а не для людей. По мере возможности используйте в названии ключевые слова, по которым продвигаете страницу. Не используйте кириллицу, поскольку фразу может не распознать Google, а Яндекс прекрасно распознает транслитерацию. К тому же кириллицу поддерживают не все CMS.

Заполняйте атрибуты title и alt

Title дает дополнительную информацию об изображении и текст, указанный в этом атрибуте, отображается при наведении курсора. Если картинка не загрузится, браузер покажет alt и пользователь хотя бы узнает содержание иллюстрации.

Используйте в атрибутах ключевые слова для пояснения содержания картинки роботам, что полезно для ранжирования. Оптимальный размер title – до 250 символов, alt – до 125 символов.

Правильно выбирайте формат

От формата зависит размер картинки по «весу»:

• GIF – небольшой вес до 1 Мб, при сжатии качество сохраняется, доступна прозрачность и анимация, поддерживается всеми браузерами;
• JPEG – вес до 1 Мб, качество при сжатии теряется, прозрачности и анимации нет, поддерживается всеми браузерами;
• PNG – большой вес до 2 Мб, качество при сжатии сохраняется, анимации нет, прозрачность доступна, поддерживается всеми браузерами.

Для анимированных изображений выбирайте GIF, при необходимости сохранения мелких деталей подойдет PNG. Для обычных картинок, сохранения качества картинок маленького размера и при размещении больших изображений применяйте JPEG.

Сжимайте картинки с заботой о качестве

Для ускорения загрузки картинки нужно уменьшить ее вес по максимуму, но важно сохранить качество. После сжатия картинка должна остаться четкой и не размытой. Для уменьшения веса можно:

• выбрать формат JPEG;
• изменить размер изображения;
• снизить качество до 60-80 %.

Различают сжатие без потерь, когда качество сохраняется при небольшом изменении размера и с потерями – качество снижается, но и размер можно уменьшить значительнее. При правильной обработке разница в качестве при сжатии с потерями почти незаметна и не обязательно для этого быть специалистом. Просто используйте сервисы соответствующего назначения:

Чтобы отследить изменение скорости загрузки сайта, до и после сжатия картинок проверьте скорость загрузки страниц через Google PageSpeed Insights.

Важно! Учитывайте, в каком размере картинка будет отображаться на сайте. Не загружайте изображение большего размера, чтобы не увеличивать скорость загрузки. Изменить размер картинки в пикселях можно с помощью:

Адаптируйте изображения к разным устройствам

Картинка одного размера может неправильно отображаться на некоторых устройствах. Чтобы этого не произошло, загрузите изображение в разных размерах для экранов с разным разрешением. Для указания в элементе нескольких вариантов одного изображения используйте атрибут srcset. Через запятую перечислите нужные изображения, указав тип отображения/размер экрана/ориентацию:

В зависимости от типа устройства браузер выберет и покажет подходящее изображение.

Размещайте изображения на собственном хостинге

Нередко для экономии места на своем хостинге изображения сохраняют на других ресурсах. Но если на стороннем хостинге возникнут проблемы, ваши картинки могут не загружаться или отображаться неверно.

Кроме того, картинка с другого сайта, вставленная по ссылке – это линк, который передает часть своего веса источнику. Поэтому лучше максимально оптимизировать картинку и поместить ее на свой сайт.

Подводим итоги

Чтобы подытожить статью, составим краткий перечень основных рекомендаций по иллюстрированию контента:

1. Добавляйте иллюстрации, имеющие четкую цель.
2. Используйте качественные изображения, релевантные контенту.
3. Иллюстрируйте только самые важные мысли.
4. Соблюдайте авторское право и не воруйте картинки.
5. В зависимости от задачи выбирайте подходящие варианты иллюстрирования.
6. Для каждой картинки придумайте название, заполните title и alt.
7. Правильно выбирайте формат изображения, используйте сжатие и адаптацию.
8. Все изображения сохраняйте в нужном размере на своем хостинге.

Картинкам на сайте нередко отводят второстепенную роль, не понимая, насколько они важны. Если вы ранее уделяли иллюстрациям недостаточно внимания, надеемся, наша статья изменила ваше отношение к визуализации информации. Качественные, релевантные и правильно оптимизированные изображения способны улучшить качество сайта в целом. Не игнорируйте возможности иллюстрирования.

Ускорить сайт с множеством картинок: руководство по отложенной загрузке изображений Материал редакции

Перевод материала сооснователя сервиса для оптимизации изображений ImageKit Рахула Нанвани.

Изображения важны для каждого сайта и приложения. Невозможно представить себе сайт без рекламного баннера, изображения продукта или логотипа.

Но изображения часто много весят, и это в первую очередь влияет на размер страницы. Согласно данным сайта HTTP Archive, средний вес страницы на компьютере составляет 1511 КБ. Изображения занимают почти 650 КБ, что примерно 45% от общего числа.

Теперь важно сделать быструю загрузку страницы с изображениями. В этом материале расскажу об отложенной загрузке — методе, который поможет сократить время загрузки страницы и уменьшить её размер, не жертвуя картинками.

Основные возможности — вкратце

Вот видео, демонстрирующее принцип работы. Обратите внимание, как при прокрутке страницы серый плейсхолдер заменяет изображение.

Что такое отложенная загрузка

Это метод, который используют при разработке сайтов и приложений, он позволяет отложить загрузку изображений на странице на более поздний момент времени. Изображения загружаются не сразу при открытии страницы, а только когда появляется необходимость. Это помогает улучшить производительность и экономно использовать ресурсы устройства .

Метод отложенной загрузки можно применить практически ко всему на странице. Например, если в одностраничном приложении JavaScript-файл не нужен пользователю до определённого момента, то лучше вообще не загружать его. Если изображение не требуется сразу, как только пользователь открыл страницу, загрузите его позже, когда оно действительно понадобится.

Особенно полезно это будет для пользователей, которые тут же закрывают страницу или взаимодействуют только с её верхней частью.

Инструменты

Основная идея проста — отложить загрузку всего, что не нужно пользователю прямо сейчас. К любому изображению, которое пользователь не видит изначально, можно применить этот метод.

Когда пользователь прокручивает страницу вниз, плейсхолдеры изображений переходят в область просмотра (видимая часть страницы). И изображения загружаются, когда становятся видимыми.

С помощью расширения Lighthouse для браузера Google Chrome можно узнать, какие изображения подходят для отложенной загрузки и сколько трафика можно сэкономить. В расширении есть раздел, посвящённый закадровым изображениям.

Также можно использовать анализатор сайтов от ImageKit, чтобы определить, использует сайт отложенную загрузку или нет.

Способы реализации

Изображения на странице можно загружать двумя способами — с помощью тега или с помощью CSS-свойства «background», которое позволяет установить одновременно несколько характеристик фона. Сначала рассмотрим более распространённый тег , а затем перейдём к фоновым изображениям CSS.

Отложенную загрузку изображений можно разделить на два этапа.

Шаг первый — предотвратить изначальную загрузку изображения. Для изображений, загруженных с помощью тега , браузер использует атрибут тега «src» для запуска загрузки изображения. Не имеет значения, первое это или тысячное изображение в HTML и закадровое ли оно. Если браузер получит атрибут «src», это вызовет загрузку изображения.

Чтобы загрузить изображение через отложенную загрузку, нужно поместить URL-адрес изображения в атрибут «src». Допустим, указываем URL-адрес изображения в атрибуте «data-src» тега «image». Теперь, когда «src» пуст, браузер не начинает загрузку изображения.

Второй шаг — нужно дать установку браузеру, когда загружать изображение. Для этого устанавливаем, что как только изображение (то есть его плейсхолдер) попадает в окно просмотра, начинается загрузка. Чтобы проверить, попало ли изображение в окно просмотра, существует два способа. Рассмотрим оба с помощью рабочих примеров кода.

Загрузка изображений с помощью событий JavaScript

В этом методе используем отслеживание событий прокрутки (scroll), изменения размера (resize), смены ориентации (orientationChange) в браузере.

Когда происходит одно из этих событий, находим все изображения на странице, которые ещё не загружены. Проверяем, какие из них теперь находятся в окне просмотра. Это можно определить с помощью свойств «offset top», «scroll top» и «window height».

Если изображение вошло в окно просмотра, берём URL из атрибута «data-src» и помещаем его в атрибут «src». Это запускает загрузку изображения. Также удаляем класс «lazy», определяющий изображения, которые будут загружаться позже. После загрузки всех изображений удаляем инструменты для отслеживания событий.

Когда прокручиваем, событие прокрутки быстро срабатывает несколько раз. Для повышения производительности добавляем небольшой тайм-аут, регулирующий отложенное выполнение функции загрузки. Ниже рабочий пример такого подхода.

Первые три изображения в примере загружаются заранее. URL-адрес присутствует непосредственно в атрибуте «src» вместо атрибута «data-src». Это необходимо для хорошего пользовательского опыта. Поскольку эти изображения находятся в верхней части страницы, их следует сделать видимыми как можно скорее. Мы не должны ждать события или выполнения JavaScript, чтобы загрузить их.

Загрузка изображений с помощью Intersection Observer API

Intersection Observer API — относительно новый API в браузерах. Он определяет, когда элемент входит в окно просмотра, и начинает действовать. В предыдущем методе приходилось связывать события, учитывать производительность и подсчитывать время появления элемента в окне просмотра.

Intersection Observer API делает процесс проще, помогает избежать вычислений и обеспечивает хорошую производительность.

Ниже — пример использования Intersection Observer API для отложенной загрузки изображений.

Как только API обнаруживает, что элемент вошёл в окно просмотра, используя свойство «isIntersecting», выбираем URL из атрибута «data-src» и перемещаем его в атрибут «src», чтобы запустить отложенную загрузку. Как только это будет сделано, удаляем класс «lazy» из изображения, а также удаляем оттуда обсервер.

Если вы сравните время загрузки изображения двух методов — с отслеживанием событий и Intersection Observer API, — то обнаружите, что с помощью Intersection Observer API загрузка изображения запускается гораздо быстрее, и сайт уже не смотрится «вялым» при скроллинге.

В метод, использующий отслеживание событий, пришлось включить тайм-аут, чтобы сделать его работоспособным, что негативно влияет на работу пользователя, поскольку изображения загружаются с небольшой задержкой.

Однако, как и всё новое, поддержка Intersection Observer API доступна не во всех браузерах. Таким образом, приходится возвращаться к методу отслеживания событий в браузерах, где Intersection Observer API не поддерживается. Учли этот момент в приведённом выше примере.

Отложенная загрузка фоновых изображений CSS

После тегов фоновые изображения являются наиболее распространённым способом загрузки изображений для страниц. Для тегов в браузере простой подход — если URL-адрес изображения доступен, то можно его загрузить.

С фоновыми изображениями CSS не всё так просто. Чтобы загрузить фоновые изображения CSS, браузер должен создать дерево DOM (объектная модель документа), а также дерево CSSOM (объектная модель CSS), чтобы решить, применяется ли стиль CSS к узлу DOM в текущем документе.

Если правило CSS, определяющее фоновое изображение, не применяется к элементу в документе, то браузер не загружает фоновое изображение. Если применяется — загружает.

Поначалу это может показаться сложным, но такой же принцип лежит в основе техники отложенной загрузки фоновых изображений. Так мы обманываем браузер, не применяя свойство CSS «background-image» к элементу, пока этот элемент не попадёт в окно просмотра. Ниже рабочий пример отложенной загрузки фонового изображения CSS.

Здесь следует отметить, что код JavaScript для отложенной загрузки остаётся прежним. Мы используем Intersection Observer API, возвращаясь затем к отслеживанию событий. Хитрость заключается в CSS.

Элемент с идентификатором «bg-image» имеет заданное свойство «background-image» в CSS. Однако когда класс «lazy» добавляется к этому элементу, в CSS мы переопределяем свойство «background-image» и меняем его на значение «none».

Так как по правилам комбинация «bg-image» с «.lazy» имеет более высокое предпочтение в CSS, чем просто «bg-image», браузер применяет свойство «background-image: none» к элементу изначально.

Когда прокручиваем страницу вниз, the Intersection Observer (или отслеживание событий) определяет, что изображение находится в окне просмотра, и удаляет класс «lazy». Это изменяет применяемый сейчас CSS и применяет свойство «background-image» к элементу, начавшему загрузку фонового изображения.

Улучшить пользовательский опыт

Для компаний в сфере электронной коммерции, которые загружают сотни изображений продуктов на страницу, отложенная загрузка может значительно улучшить производительность начальной загрузки страницы.

Тем не менее многие компании не выбирают отложенную загрузку, потому что считают, что это противоречит обеспечению хорошего пользовательского опыта — плейсхолдеры выглядят непривлекательно, время загрузки кажется довольно продолжительным и так далее.

В этом разделе постараемся решить некоторые проблемы отложенной загрузки изображений, связанные с пользовательским опытом.

1. Правильный дизайн плейсхолдеров

Плейсхолдер — то, что отображается на странице до загрузки изображения. Обычно разработчики используют одноцветный плейсхолдер для изображений или одно изображение в качестве плейсхолдера для всех картинок.

Мы использовали подобный плейсхолдер в нашем примере — везде он выкрашен в сплошной светло-серый цвет. Тем не менее можно сделать лучше. Ниже — примеры использования более удачных вариантов плейсхолдеров.

Плейсхолдер доминирующего цвета

Этот метод давно используется для результатов поиска изображений в Google и Pinterest.

Может показаться, что это сложно реализовать. Но есть простой способ — сначала уменьшить изображение до пикселя 1×1, а затем масштабировать его до размера плейсхолдера — грубое приближение, но оно помогает легко получить один доминирующий цвет. Используя ImageKit, плейсхолдер доминирующего цвета можно получить с помощью цепного преобразования, как показано ниже.

Размер изображения-плейсхолдера составляет всего 661 байт, по сравнению с исходным изображением, которое имеет размер 12 700 байт — в 19 раз меньше. И это обеспечивает более приятный опыт перехода от плейсхолдера к изображению.

Рабочий пример и код для использования плейсхолдера доминирующего цвета — по ссылке.

Плейсхолдер низкого качества (LQIP)

Есть способ расширить приведённую выше идею использования плейсхолдера доминирующего цвета. Вместо одного цвета можно использовать некачественную размытую версию исходного изображения.

Это не только выглядит лучше, но сообщает о загрузке и даёт пользователю представление о том, чего ждать в реальном изображении. Этот метод используют Facebook и Medium для изображений на сайтах и в приложениях.

Размер LQIP составляет 1300 байт, это почти в десять раз меньше исходного изображения и значительно лучше с точки зрения пользовательского опыта по сравнению с любым другим видом плейсхолдеров.

Рабочий пример и код для использования техники LQIP — по ссылке.

2. Добавление буферного времени

Часто пользователи быстро прокручивают страницу, и для загрузки и отображения картинки на экране требуется некоторое время. Событие «load image» может сработать с задержкой, как и плейсхолдеры. Это плохо влияет на пользовательский опыт.

Решение

Вместо того чтобы загружать изображения только тогда, когда они точно входят в окно просмотра, загрузите картинки, когда они, например, в 500 px от края.

С помощью Intersection Observer API можно использовать параметр «`root`» вместе с параметром «rootMargin» (работает по стандартному принципу поля CSS), чтобы увеличить границы рамки.

Вместо того чтобы проверять, равна ли разница между краем изображения и краем окна нулю, с помощью метода отслеживания событий можно использовать положительное число для добавления некоторого порогового значения.

В этом примере используется пороговое значение 500 px для загрузки изображений.

Как понятно из видео ниже (внимательно следите за сетевыми запросами, появляющимися внизу), при прокрутке, когда третье изображение находится в поле зрения, загружается пятое. Когда четвёртое изображение появляется в окне просмотра, загружается шестое.

Так мы даём достаточно времени для полной загрузки изображений, и в большинстве случаев пользователь вообще не увидит плейсхолдер.

Если не заметили ранее, во всех примерах третье изображение (image3.jpg) всегда загружается сразу, даже если оно находится вне области просмотра. Это было сделано в соответствии с тем же принципом: выполнить загрузку немного заранее для лучшего пользовательского опыта.

3. Как избежать смещения содержимого

При отсутствии изображения браузер не знает размеров содержимого, которое должно отображаться в пределах контейнера. Если не задать его с помощью CSS, конечный контейнер не будет иметь размеров, то есть его размеры будут равны 0 x 0 px.

Затем, когда изображение будет загружено, браузер изменит размер контейнера, чтобы он соответствовал изображению. Это изменение приводит к перемещению других элементов и называется смещением содержимого.

Как показано в этом материале Smashing Magazine, смещение контента и видео — довольно неприятный опыт для пользователя.

Решение

Этого можно избежать, указав высоту и (или) ширину для конечного контейнера, чтобы браузер мог нарисовать контейнер изображения с известной высотой и шириной.

Позже, когда изображение загружается, так как размер контейнера уже задан и изображение вписывается в него, остальная часть содержимого вокруг этого контейнера не перемещается.

4. Не стоит применять отложенную загрузку для всех изображений

Ещё одна ошибка, которую часто совершают разработчики, — загружают все изображения на страницу с помощью отложенной загрузки. Это может сократить время на начальную загрузку страницы, но также приведёт к плохому пользовательскому опыту, поскольку многие изображения даже в верхней части страницы не будут отображаться до тех пор, пока JavaScript не будет выполнен.

Можно следовать общим принципам, чтобы определить, какие изображения должны быть загружены после.

• Любое изображение, которое присутствует в окне просмотра или в начале страницы, не должно загружаться с помощью отложенной загрузки. Это касается любого изображения-заголовка, рекламных баннеров, логотипов. Пользователь должен видеть их, как только страница загрузится. Помните, что мобильные и десктопные устройства будут иметь разные размеры экрана и, следовательно, разное количество изображений, которые будут видны на экране изначально. Таким образом, необходимо учитывать тип устройства, чтобы решить, какие изображения загружать изначально, а какие нет.
• Любое изображение, которое частично видно в окне просмотра, не должно загружаться с помощью отложенной загрузки. Это происходит по принципу, который обсуждался выше, — загружать чуть заранее. Любое изображение, находящееся, допустим, в 500 px от области просмотра, может быть загружено заранее.
• Если страница не длинная, её можно пролистать за несколько движений. Или если за пределами окна просмотра меньше пяти изображений, то отложенную загрузку можно не использовать. Это не принесёт существенной выгоды пользователю с точки зрения производительности. Дополнительный JavaScript, который вы загружаете на страницу, чтобы включить отложенную загрузку, компенсирует выигрыш от отложенной загрузки такого небольшого количества изображений.

Популярные JavaScript-библиотеки

Поскольку браузеры и способы реализации могут различаться на разных устройствах, лучше всего использовать проверенную библиотеку для отложенной загрузки. Вот список популярных библиотек и плагинов для разных платформ, которые позволят реализовать отложенную загрузку с минимальными усилиями.

• yall.js (Yet Another Lazy Loader) — использует Intersection Observer API и возвращается к отложенной загрузке на основе событий. Поддерживает все основные типы элементов HTML, но не «background-image». Также работает на Internet Explorer 11 и старших версиях.
• lazysizes — библиотека с обширной функциональностью. Поддерживает адаптивные изображения «srcset» и атрибут «sizes». Высокая эффективность даже без Intersection Observer API.
• jQuery Lazy — простая, основанная на jQuery, библиотека отложенной загрузки.
• WeltPixel Lazy Loading Enhanced — расширение для Magento 2 для отложенной загрузки изображений.
• Magento Lazy Image Loader — расширение для Magento 1.x для отложенной загрузки изображений.
• Shopify Lazy Image Plugin — расширение для Shopify для отложенной загрузки изображений. Платная.
• WordPress A3 Lazy Load — плагин отложенной загрузки изображений для WordPress.

Как проверить, всё ли работает

Самый простой способ — открыть инструменты разработчика в браузере Chrome. Перейдите на вкладку «Сеть» → «Изображения». Здесь при первом обновлении страницы должны загружаться только те изображения, которые должны присутствовать на странице изначально.

Затем, когда вы начинаете прокручивать страницу вниз, другие запросы загрузки изображений будут запускаться и загружаться. Также можно заметить тайминги для загрузки изображения. Это поможет определить проблемы с загрузкой изображений, если таковые имеются, или проблемы с запуском загрузки изображений.

Другой способ — запустить расширение Lighthouse от Google Chrome на странице после внесения изменений и найти предложения в разделе Offscreen images.

Если не работает

Если переживаете за пользователей, чей браузер не поддерживает JavaScript, для них можно показать сообщение о том, почему изображения не загружаются и что нужно перейти на современный браузер или включить JavaScript.

Или можно использовать тег , чтобы создать удобный интерфейс для этих пользователей. В треде Stack Overflow рассматриваются проблемы этого тега. Материал будет полезен для всех, чья целевая аудитория — такие пользователи.

Вся статья — вредные советы в духе Григория Остера.
Если я вижу сайт, который контент подгружает по мере прокрутки страницы, это меня бесит. До такой щагрузки изображений вроде никто не докатился, а вот текст появляетмя рывками — это пздц полный.

Вы че, не можете одну сраную страницу сверстать так и так изображения оптимизировать, чтобы они быстро грузились? Напихали на страницу всяких js-«фреймворков»
Ну так посмотрите, как раньше странички делали,это все до сиэ пор работает

Ничего-то вы не понимаете. Сегодня нельзя просто так взять и сверстать страничку, как это делалось 15 лет назад — чтобы она просто тупо работала, быстро и надёжно. За это никто вам денег сегодня не заплатит. И на работу вас не возьмёт. А вот когда вы научитесь обклеивать эту несчастную страничку реактами, ангулярами, анимациями, шрифтами, параллаксами и отложенными загрузками, как ёлку мишурой, и превращать её в прогрессивное и реактивное веб-приложение, способное вызвать у пользователя вопрос «Да что там, опять майнер, что ли?» — вот тогда вы профессионал, тогда у вас есть з/п и вам есть что написать в резюме.

В самое яблочко!
Желательно еще библиотеки, шрифты и картинки разложить на разных серваках — так интереснее. А у «разработчика» время экономится — ведь не надо ничего грузить и закачивать.
Роскомнадзор бесится и все подряд блокирует, а у народа сайты расползаются, джиэска не прилетела. Веселуха просто

Но в моей жизни случилось так, что я — руководитель и мне не надо рассказывать работодателю, какой я хороший. А клиенту нужен результат и чаще всего простой.

Верстайте попроще, чтобы ваш продукт работал быстро, и на бОльшем числе дивайсов.

Добавлю. Недавно в работу попал интернет-магазин дилерский русского света, их домен rs24.ru
Посмотрите, как формируется контент страниц. Прилетает json, и на его основе рисуется страница категории, товара.

Вопрос был — как у вас контент забирать? Ответ — через api. Вот только один запрос — один товар. По дефолту ограничение 30000 запросов в сутки.
Конечно, могут поднять, но это полный маразм, по одной штучке дергать. А еще мне рассказали про другого дилера, который на основе запросов к их api формирует карточки товаров. Страница грузится полторы секунды, но это ж не беда 🙂 Слова их сотрудника.

Будьте проще и заходите через парадный вход. У нас есть json, который прилетает на страницу, зачем нам их куцый api?

Яркий пример криворукости всего айти-состава организации. Снизу доверху все гнилое, а руководство устраивает, как медленно грузятся страницы.
Хотя, можно и с другой стороны посмотреть, это просто пример изящного решения, как на слабеньком железе показать каталог на 420000 товаров.

Как выбрать подходящий для web формат изображения

В этой статье речь пойдет о форматах JPEG, GIF и PNG, а также о двух других, более современных форматах. Большинство веб-разработчиков учатся использовать тот или иной формат путем проб и ошибок, зарабатывая при этом ценный опыт. Однако практически никто не понимает, как именно работает каждый из этих форматов.

Материал этой статьи поможет вам сориентироваться в том, какие алгоритмы сжатия использует каждое из этих расширений, и понять, для каких типов изображений подходит каждый из этих форматов.

Этот формат прошел проверку временем, так как появился в далеком 1992 году. Сжатие этого формата происходит следующим образом. Сначала изображение из цветового пространства RGB (от английских “red” – «красный», “green” – «зеленый» и “blue” – «синий») преобразуется в пространство YUV, которое основано на характеристиках яркости и цветности; это пространство наиболее близко к тому, как воспринимает цвета человек. Затем изображение разделяется на пиксельные блоки размером 8х8, и каждый блок раскладывается на составляющие цвета, частота которых затем подсчитывается. Если говорить с точки зрения математики, то получается, что подобное сжатие переносит изображение из пространственной области в частотную область.

В некотором смысле такое сжатие позволяет отказаться от части информации о яркости и цветах. То, какая часть информации будет убрана, напрямую зависит от качества изображения, которое вы хотите получить в итоге.

Из этого можно сделать вывод, что лучше всего данный формат подходит для сжатия полутоновых изображений: изображений с огромным количеством цветов и мягкими переходами между ними. Другими словами, JPEG подразумевает, что ваше изображение будет так или иначе похоже на фотографию.

А вот для изображений с четкими краями и детализированными текстурами JPEG, наоборот, не подходит: четкие грани будут стерты, и изображение в целом получится размытым.
Ниже вы видите пример изображений в формате JPEG:

На заре зарождения интернета, если изображение не было формата JPEG, значит, оно было формата GIF. GIF использует для сжатия алгоритм LZW (Lempel-Ziv-Welch – алгоритм Лемпеля — Зива — Велча), который намного проще, чем технология сжатия JPEG. По сути, этот алгоритм сканирует данные изображения и создает короткий код для тех участков, которые повторяются. Поэтому GIF подходит для сжатия изображений, которые состоят из идентичных или повторяющихся частей. Это изображения с четкими формами, которые имеют всего несколько цветов с резкими границами между ними. Именно такие изображения удастся сжать при помощи GIF наиболее эффективно и без потерь.

Несмотря на то, что GIF достаточно простой формат, у него есть пара интересных характеристик – это прозрачность и анимация.

А вот для сжатия изображений с некоторым разнообразием оттенков GIF не подходит: этот формат поддерживает только 8-битный цвет, то есть максимум 256 цветов на одном изображении. Поэтому если вы решите сжать при помощи GIF изображение с широкой цветовой палитрой, то в итоге можете получить постеризованную картинку со значительным падением глубины цветности, которая будет выглядеть ужасно.

Пример изображений в формате GIF:

Обобщая, можно отметить, что JPEG и GIF имеют свои сильные и слабые стороны. Во время зарождения интернета это были основные используемые форматы. Однако позже некоторые энтузиасты решили попробовать создать новый формат для сжатия изображений без потерь.

Разработка PNG началась в 1995 году, и уже через год его можно было использовать в качестве полноправного сетевого формата.

Так как PNG задумывался в качестве замены формата GIF, он значительно превосходит предшественника по своим возможностям. Например, PNG обладает следующими преимуществами:

• отсутствие ограничения в 256 цветов;
• поддержка альфа-канала (благодаря этому достигается эффект частичной прозрачности);
• превосходное сжатие (во всех случаях за редким исключением).

Увидеть, как хорошо PNG сжимает разноцветное полупрозрачное изображение, можно ниже:

Так почему PNG лучше сжимает изображения, чем GIF? Это происходит благодаря новым алгоритмам сжатия.

В частности, используя фильтрацию строк, PNG получает гораздо более удобные для сжатия данные: существует 5 разных фильтров-предсказаний, значения каждого из которых подбираются таким образом, чтобы общий вес изображения был наименьшим. PNG предполагает, что рядом расположенные пиксели должны быть похожи, и если это действительно так, то PNG сохраняет данные путем записи разницы между предсказанным и фактическим значениями.

Таким образом, формат PNG, к примеру, позволяет эффективно сжать и вертикальные одноцветные области (в то время как GIF сжимает только горизонтальные области).

Однако, возвращаясь к началу статьи, нужно отметить, что в случае с фотографиями PNG поведет себя лучше, чем GIF, но все же хуже, чем JPEG.

Форматы следующего поколения

JPEG, GIF и PNG – это распространенные и универсальные форматы, которые веб-разработчики могут использовать повсеместно. Однако появляются и новые форматы изображений, которые также обладают интересными особенностями.

Этот формат появился в 2010 году, его созданием занималась корпорация Google. WebP использует архитектуру формата мультимедиа WebM.

Алгоритм сжатия похож на тот, который использует PNG: к каждому блоку применяется одна из шестнадцати существующих стратегий предсказания. Благодаря этому достигается гибкость в сохранении изображений как графического, так и фотографического типа.

Так как этот формат принадлежит Google, то в данный момент он поддерживается только браузерами Chrome и Opera.

JPEG-XR

JPEG-XR был разработан компанией Microsoft. Как и все подобные форматы нового времени, JPEG-XR имеет значительные преимущества сжатия перед традиционным форматом JPEG:

• сжатие без потерь;
• более продуктивное сжатие с потерями;
• поддержка альфа-канала с частичной прозрачностью.

Как и в случае с WebP, JPEG-XR это более сложный, эффективный и менее поддерживаемый формат, чем его предшественники. В данный момент JPEG-XR поддерживается только браузерами Internet Explorer и Edge.

Использование форматов будущего сегодня

Несмотря на то, что новые форматы поддерживаются еще не всеми браузерами, вы можете использовать их на своем сайте уже сейчас.

Новая версия языка разметки позволяет веб-разработчикам размещать одно и то же изображение в нескольких форматах для того, чтобы браузеры самостоятельно решали, какой из них загружать. Код будет выглядеть следующим образом:

Другой способ выводить разные изображения для разных посетителей – сделать так, чтобы за вывод информации отвечала не клиентская, а серверная часть. В этом случае разным пользователям будут показываться разные картинки по одному и тому же адресу.