Формат изображений для html

Форматы изображений для веба

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

Растровые форматы

Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP.

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

GIF (Graphics Interchange Format)

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

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

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

Таким образом, формат GIF подходит если:

JPEG (Joint Photographic Experts Group)

Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.

Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).

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

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

Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.

Таким образом, формат JPEG лучше подходит для:

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

PNG (Portable Network Graphics)

PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.

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

Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.

Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.

Итак, формат PNG подходит для:

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

WebP

WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.

Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.

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

• сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
• сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
• поддерживает прозрачность (альфа-канал).

Иногда WebP сжимает изображение даже лучше, чем заявляет Google.

Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.

Векторные форматы

GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур).

SVG (Scalable Vector Graphics)

SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.

Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.

SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.

Формат SVG отлично подходит для малоцветных схем, логотипов и иконок, например, таких:

Таким образом, формат SVG подходит если:

• нужно анимировать части изображения;
• изменять цвет элементов изображения;
• необходимо масштабировать изображение без потерь.

Форматы в зависимости от цели использования

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

HTML изображения

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

Обязательные атрибуты тега

Атрибут src является обязательным, так как он указывает путь к изображению. Значением атрибута src может быть как имя файла, так и его URL.

img src="example.jpg"> или img src="https://www.example.com/images/example.jpg">

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

Синтаксис тега с обязательными атрибутами src и alt будет выглядеть так:

img src="https://ru.w3docs.com/" alt="Самоучитель HTML">

Мы рекомендуем использовать атрибут alt и включать в альтернативный текст ключевые слова. Это позволит улучшить ранжирование веб-сайта в поисковых системах.

Рекомендуемые атрибуты тега

С тегом рекомендуется использовать атрибуты width и height , которые определяют ширину и высоту изображения соответственно. Браузер сначала загружает текст на странице, а потом уже изображения. Когда указана высота и ширина изображения, браузер резервирует место для изображения (на странице мы видим пустой квадрат). Если же эти параметры не указаны, то браузер не будет знать размеры изображения и покажет маленький квадратик. После того, как изображение загрузится, это приведет к перемещению текста и других объектов на странице, что скажется на скорости загрузки сайта и приведет к неудобствам.

img src="https://ru.w3docs.com/" alt="HTML tutorial" width=”200” height=”120”>

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Место для заголовка h1> p>Это фото малыша p> img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/> body> html>

Результат

Вместо того, чтобы использовать width and height, можно установить размер, используя свойства CSS max-width или max-height для дополнительной гибкости. Это может препятствовать тому, чтобы большие изображения разрушили расположение на устройстве с маленьким экраном.

Обтекание изображения текстом

Положение изображения относительно текста можно регулировать при помощи CSS свойства float.

Для того, чтобы разместить изображение слева, а текст справа, необходимо добавить к тегу style=»float:left» .

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Место для заголовка h1> img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/> p>Это фото малыша p> body> html>

Результат

Если добавить style=»float:right» к тегу , то текст будет размещен слева, а изображение справа.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Место для заголовка h1> img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/> p>Это фото малыша p> body> html>

Результат

Как добавить к изображению гиперссылку.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> a href="https://ru.w3docs.com/" aria-label="w3docs homepage"> img src="/uploads/media/default/0001/01/910a300bcc9d9885ea035805ac6cac5d719bc43e.jpeg" alt="logo" width="200" height="150"/> a> body> html>

Результат

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

Форматы изображений

На веб-сайтах обычно используются цифровые изображения трех форматов:

• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

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

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

Формат PNG сочетает преимущества форматов JPEG и GIF. Он поддерживает миллионы цветов и позволяет сжимать изображения без потери качества. Этот формат подходит для сохранения изображений, где требуется предельная четкость (чертежи, графики, сложные диаграммы и т.д.)

Современные форматы

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

Разработанный Google формат WebP приходит на смену JPEG: при такой же степени сжатия он обеспечивает лучшее качество.

Еще один формат, который превосходит классический JPEG в сохранении лучшего качества при том же уровне сжатия, BPG (Better Portable Graphics).

Apple в 11-ой версии iOS вместо JPEG использует формат HEIC, который позволяет сохранять изображения высокого качества, которые при этом не занимают много места.

Источник