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

Картинки в HTML – шпаргалка для новичков

Прежде, чем ответить на вопрос « как вставить картинку в HTML? », следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.

Как вставить изображение в HTML?

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

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

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

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

Назначение размеров картинки в HTML

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

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

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

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

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

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

Расположение картинки в HTML

Источник

Как вставить картинку в HTML

Как добавить картинку и не попасть под суд

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

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

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

Вот список некоторых сервисов, на которых размещены как бесплатные, так и платные изображения:

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

Год хостинга в подарок при покупке лицензии 1С-Битрикс

Закажите лицензию 1С-Битрикс, легко размещайте картинки в визуальном редакторе и не платите за хостинг весь год.

Добавляем картинку в HTML

Шаблон: , где photo – папка, размещенная рядом с основным файлом HTML. Если бы изображение было размещено в другом месте, то до него бы полностью указывался путь, например, .

Давайте рассмотрим, как добавить картинку в HTML на примере фотографии из Unsplash:

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

Размер указывается как в единицах измерения, так и без; если указать простое число, то оно автоматически определится в пикселях. Также можно указать в em, ex, % и прочих единицах.

Попробуем немного сжать нашу фотографию, чтобы она не расплывалась по всей территории страницы. Для этого пропишем внутри тега атрибут width=”500px”. После этого обновим страницу и убедимся, что изображение было сокращено до размера 500х500(px).

Список атрибутов тега img

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

Полный список атрибутов:

Возможные форматы: JPEG, JPG, PNG, GIF, BMP, ICO, APNG, SVG и Base64.

Возможные значения: top, bottom, middle, left и right.

Возможные значения: px, % и другие.

Возможные значения: px, % и другие.

Возможные значения: px, % и другие.

Возможные значения: px, % и другие.

Возможные значения: px, % и другие.

Возможный формат: txt.

Возможные значения: anonymous – анонимный запрос без передачи учетных данных, use-credentials – запрос с передачей учетных данных.

Допустимые значения: Nw, где N – любое целое положительное число, и Kx, где K – положительное десятичное число.

Возможные значения: Nex, Nrem, Nem, Nvmin, Nch, Nvh, Nvw, Nvmax, Nin, Nq, Nmm, Npc, Ncm, Npt и Npx, где N – положительное число.

Работает следующим образом: при разрешении экрана меньше 800px задается ширина картинки в 500px. Если экран больше 800px, то изображение фиксируется в положении 800px.

Возможные значения: #name, где name – значение атрибута name карты, и #id, где id – значение атрибута id карты.

Дополнительные опции

Иногда требуется не просто добавить изображение на страницу сайта, но и сделать его кликабельным или фоновым объектом. В этом нам помогут дополнительные теги и CSS-стили:

, позволяет изменять картинки при различных расширениях:

При размере дисплея больше 750px будет показано одно изображение, при размере больше 265px, но меньше 750px – другое.

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

Источник

HTML-тег

Атрибуты изображения

Атрибут	Описание и значения
align	Значения: top | bottom | middle | left | right

Устарело – определяет выравнивание картинки.altАльтернативный текст для описания картинки. Выводится до момента загрузки изображения, а также вместо картинки, если они не поддерживаются. Его отсутствие считается считается технической ошибкой верстки, но тег img работать будет.

Синтаксис: alt=»альтернативный текст»

borderУстаревшее значение. Выводит рамку вокруг картинки, значение задается в пикселях.crossoriginЗначения: anonymous | use-credentials

Размеры изображения

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

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

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

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

Изображение как ссылка

Теперь на сайте появится кликабельное изображение image.jpg.

Основные форматы графических файлов

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

Источник

[в закладки] Работа с изображениями в веб

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

HTML-элемент

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

▍Настройка атрибутов width и height

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

Хотя кому-то такой подход может слегка напомнить, так сказать, «старую школу», он, на самом деле, довольно полезен. Давайте, чтобы лучше в этом разобраться, продемонстрируем вышесказанное примером. А именно, я предлагаю вам посмотреть это короткое видео.

Кадр из видео. У изображения слева ширина и высота не заданы. У изображения справа — заданы

▍Скрытие изображения средствами CSS

Изображение можно скрыть с помощью CSS. Правда, такое изображение всё равно загружается при загрузке страницы. Поэтому, поступая так, следует соблюдать осторожность. Если некое изображение нужно скрыть, то оно, возможно, используется лишь в декоративных целях.

Вот CSS-код, скрывающий изображение:

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

▍О доступности контента

У нас есть пара изображений:

Слева — изображение без атрибута alt. Справа — с пустым атрибутом alt

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

Справа — изображение, в атрибут alt которого записан текст

▍Отзывчивые изображения

Изображения разных размеров

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

Отзывчивый набор изображений можно настроить двумя способами.

1. Атрибут srcset

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

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

2. HTML-элемент picture

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

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

Вот демонстрационный проект к этому разделу.

▍Изменение размеров изображений

Слева — изображение, у которого не задано CSS-свойство object-fit. Справа — изображение, у которого это свойство задано

Вот как им пользоваться:

Изображения, задаваемые CSS-свойством background

▍Как пользоваться CSS-свойством background

Потом понадобится стиль:

▍Задание нескольких изображений в свойстве background

▍Скрытие изображения

▍О доступности контента

▍Сложности с загрузкой background-изображений обычными пользователями

▍Псевдо-элементы

Теперь поговорим об использовании SVG-изображений

SVG-изображения

Основной сильной стороной SVG-изображений считается возможность их масштабирования без потери качества. Более того, элемент может выводить, помимо SVG-изображений, ещё и файлы формата JPG и PNG. Вот HTML-код SVG-изображения:

JPG-изображение, выведенное средствами элемента SVG

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

Изображение не растягивается

▍О доступности контента

Тут, более того, можно воспользоваться и элементом :

→ Вот пример к этому разделу

Сценарии использования разных способов вывода изображений

▍Раздел страницы, выводимый в её верхней части

Проектируя раздел страницы, находящийся в её верхней части (такой раздел называют «Hero Section»), иногда нужно сделать так, чтобы в нём выводилось бы изображение, поверх которого выводится заголовок и какие-то другие данные о странице. Выглядеть это может примерно так, как показано ниже.

Верхняя часть страницы с изображением и надписями

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

Первый вариант решения задачи

Используя CSS-свойство background с несколькими заданными в нём изображениями, одно из них можно использовать для элемента, накладываемого на основное изображение, а другое — для представления самого изображения. Взгляните на этот CSS-код:

Этот подход позволяет достичь желаемого, background-image можно менять средствами JavaScript:

Свойство background я определил во встраиваемом стиле. Хотя это и рабочий код, выглядит он плохо и отличается непрактичностью.

Может быть, можно воспользоваться здесь CSS-переменными?

Вот результат исследования стиля.

Исследование стиля элемента

Анализ

Второй вариант решения задачи

Здесь мы воспользуемся HTML-средствами вывода изображения:

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

Фоновый цвет, выводимый в том случае, если изображение загрузить не удаётся

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

▍Логотип веб-сайта

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

Логотип с множеством деталей

Вот код для вывода подобного логотипа, хранящегося в формате SVG:

Простой логотип, который нужно анимировать

Простой анимированный логотип

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

Вот демонстрационный проект к этому разделу:

Отзывчивый логотип

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

Для реализации такого поведения логотипа идеально подойдёт элемент

, который позволяет описать две версии логотипа:

В CSS нужно поменять ширину логотипа в том случае, если ширина область просмотра будет равной или большей 1350px :

Перед нами — простое и понятное решение проблемы отзывчивых логотипов.

→ Вот рабочий пример к этому разделу

Логотип с градиентом

Пример логотипа с градиентом

Работая с логотипами, на которых имеется градиент, нужно знать о том, что экспорт подобного логотипа из приложения для дизайна, вроде Adobe Illustrator или Sketch, может завершиться далеко не идеально. В ходе этого процесса что-то в логотипе может «поломаться».

▍Аватар пользователя

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

Для начала взгляните на следующий макет. Обратите внимание на то, что там представлены два аккуратных аватара с чёткими краями.

Пара удачных аватаров

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

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

Слева — аватар со слишком светлым фоном. Справа — результат решения этой проблемы

Решить эту задачу можно несколькими способами:

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

Как решить эту задачу? Может — просто настроить границу элемента? Исследуем эту возможность (сразу извиняюсь за то, что ниже вы часто будете видеть мою фотографию).

Вот как это выглядит.

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

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

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

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

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

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

→ Вот пример к этому разделу

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

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

Аватары, разбросанные по странице

HTML-код здесь будет таким:

Здесь можно найти работающий пример.

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

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

Сначала разберём этот код. Вот что тут есть:

→ Здесь можно найти пример

С аватарами мы на этом разобрались. Поэтому идём дальше.

▍Поле ввода с иконкой

Вот пример поля ввода с иконкой.

Поле ввода с иконкой

Такие поля встречаются довольно часто. Как оснастить поле иконкой? Что происходит при получении таким полем фокуса? Исследуем эти вопросы.

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

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

▍CSS-стили для печати

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

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

Постарайтесь не включать в страницы, предназначенные для печати, изображения, выводимые с помощью CSS-свойства background

Пустые места вместо изображений, включённых в страницу с помощью CSS-свойства background

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

Итоги

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

Уважаемые читатели! Сталкивались ли вы с проблемами при выводе изображений на веб-страницах?

Источник

Использование современных графических форматов в веб-проектах

Эдди Османи, в статье «Цена JavaScript в 2018 году», озвучил одну ценную мысль: время, необходимое на обработку скрипта размером 200 Кб, и на обработку изображения, имеющего такой же размер, серьёзно различается. Дело в том, что при обработке кода браузеру нужно проделать более масштабную работу, чем при подготовке к использованию изображений. Вот что об этом говорится в статье:

JPEG-изображение нужно декодировать, растеризовать и вывести на экран. А JS-бандл надо, если рассматривать это упрощённо, загрузить, распарсить, скомпилировать, выполнить. На самом же деле движку приходится решать и другие задачи в процессе обработки JS-кода. В целом, стоит учитывать, что на обработку JavaScript-кода, размеры которого, в байтах, сопоставимы с размерами других материалов, тратится гораздо больше системных ресурсов.

Эти слова были написаны в 2018 году, но они до сих пор более чем справедливы. Правда, учитывая текущую обстановку, высказанная здесь мысль сегодня воспринимается немного иначе.

Принимая во внимание то, что в мире сейчас разразилась пандемия, я заметил, что моё интернет-соединение стало работать нестабильно. К нашему счастью, благодаря тому, что на страже благополучия интернета стоят прекрасные специалисты, не знающие усталости, большая часть Всемирной сети до сих пор работает нормально. Но в интернете, определённо, что-то происходит. Я пользуюсь соединением на 100 Мбит/с, но у меня возникает такое ощущение, будто я сижу на 3G-модеме.

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

А на сайтах обычно имеется гораздо больше, чем 200 Кб изображений. Страница с несколькими мегабайтами картинок — это обычно дело. Многие разработчики (и я тоже!), как правило, совсем не задумываются о размерах медиа-материалов.

Но, что очень хорошо, оптимизировать изображения, используемые на веб-страницах, не так уж и сложно. В этом материале мы поговорим о том, как пользоваться современными графическими форматами вроде WebP. Изображения, сохранённые в таких форматах, часто оказываются в 2-3 раза меньше, чем те, для хранения которых используются всем известные и всеми любимые старые форматы (вроде JPG и PNG). Применение новых форматов может серьёзно изменить ситуацию в лучшую сторону.

Общий обзор современных графических форматов

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

Много ли можно выиграть, пользуясь альтернативными графическими форматами?

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

Изображение, использованное в одном материале

Я провёл некоторые эксперименты, рассмотрев использование форматов JPG и PNG для хранения исходного изображения. Я оптимизировал варианты изображения с использованием imagemin для того чтобы узнать о том, что мне может дать применение WebP вместо этих «ретро»-форматов.

Результаты оказались прямо-таки невероятными.

Я проводил подобные эксперименты с множеством изображений. Практически всегда оказывалось, что WebP-файлы были на 30-70% меньше чем даже оптимизированные версии графических файлов других форматов.

Тут может возникнуть вопрос о том, как преобразование в WebP может повлиять на SVG-изображения. Я подобных экспериментов с SVG не проводил. SVG — это векторный формат. Это значит, что изображения в нём строятся на основе математических инструкций, а не на основе сведений о цвете отдельных пикселей. Преобразовать SVG-изображение в WebP — значит отказаться от возможностей по масштабированию SVG-изображений, что, полагаю, недопустимо. К тому же, я подозреваю, что подобное преобразование, в большинстве случаев, приведёт к увеличению размеров файлов.

Браузерная совместимость

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

Формат WebP пользуется поддержкой большинства браузеров.

Поддержка формата WebP браузерами

Хоть уровень поддержки этого формата и весьма высок, очень плохо то, что его не поддерживают Safari и Internet Explorer.

А вот — сведения о поддержке JPEG 2000.

Поддержка формата JPEG 2000 браузерами

Так, теперь Safari на нашей стороне, а вот Internet Explorer опять остался не у дел.

А как насчёт JPEG XR?

Поддержка формата JPEG XR браузерами

А тут отличился именно Internet Explorer. В результате, пользуясь этими тремя форматами, мы перекрываем все существующие браузеры (KaiOS Browser не поддерживает ни один из этих форматов, и я приношу ему свои извинения за то, что обхожу его вниманием, но я даже не знаю о том, что это за браузер).

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

Элемент picture спешит на помощь

Вот как выглядит HTML-код, в котором применяется элемент picture :

В Chrome, например, после обработки вышеприведённой разметки, браузер придёт к чему-то, более или менее эквивалентному следующему коду:

Использование набора следующих друг за другом элементов source означает, что в каждом браузере подходящим окажется хотя бы один из них. Так, большинство браузеров используют webp-изображение, Safari загрузит jp2-изображение, IE — jxr-изображение.

Упрощённая альтернатива

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

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

Лишь очень немногие посетители моего блога пользуются Internet Explorer (за последние 7 дней его попытались посмотреть лишь 3 человека с IE, что составило 0.02% трафика). Поэтому я решил воспользоваться упрощённым вариантом вышеописанного решения:

Я отдаю компактное webp-изображение тем браузерам, которые поддерживают этот формат (Chrome, Firefox, Edge), а браузерам, которые этого формат не поддерживают (IE, Safari), предлагаю наследие прошлого — jpeg-картинку.

С моей точки зрения это — пример прогрессивного улучшения. Проект остаётся работоспособным на старых браузерах, хотя загрузка изображений и занимает больше времени. Это — компромисс, который меня устраивает. (Правда, я надеюсь, что поддержка WebP скоро появится и в браузерах от Apple).

Проверка работоспособности решения

Преобразование графических файлов в формат WebP

Компания Google создала набор инструментов, направленный на работу с webp-файлами. Один из таких инструментов называется cwebp. Он позволяет преобразовывать в WebP графические файлы других форматов.

Если вы пользуетесь MacOS, установить этот набор инструментов можно с помощью Homebrew:

На других платформах, полагаю, нужно будет загрузить подходящий libwebp-пакет из репозитория.

После установки инструментов пользоваться ими можно так:

Рассмотрим эту команду:

Использование современных графических форматов в React-приложениях

. Я пользуюсь для этого React-компонентами. На мой взгляд, это очень удобно. Вот как это выглядит:

Использование компонента ImgWithFallback очень похоже на работу с обычным тегом img :

Применение современных графических форматов со стилизованными компонентами

Использование пакета gatsby-image

Если этот пакет вам интересен — взгляните на его документацию.

Минусы WebP

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

Большинство настольных пакетов для работы с изображениями пока его не поддерживают. Например, я не могу открывать webp-файлы в Preview на MacOS. Это значит, скажем, что если я сохраню webp-изображение с веб-страницы, я не смогу просмотреть его на компьютере!

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

Итоги

Мне очень нравится то, что благодаря использованию webp удалось сократить размер изображений в моём блоге примерно на 50%. Помимо того, что в наше непростое время это улучшает впечатления пользователей от работы с ним, я ещё надеюсь на то, что это позволит мне немного сэкономить на оплате трафика.

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

Создатели веб-проектов обычно не особенно интересуются особенностями применения новых графических форматов. Но я полагаю, что разбираться в этом вопросе весьма полезно. Ведь использование WebP — это, вероятно, самый простой способ сократить размеры веб-проекта на сотни килобайт.

Уважаемые читатели! Пользуетесь ли вы форматом WebP?

Источник