Форматы изображений для веба
- 29 сентября 2016
Хороший верстальщик должен уметь правильно выбирать форматы изображений для своей вёрстки, чтобы изображения отображались без погрешностей и имели оптимальный размер при загрузке. Давайте разберёмся, какие бывают форматы изображений и в каких ситуациях лучше выбрать тот или иной формат.
Растровые форматы
Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP.
Основные характеристики, которые нас будут интересовать при выборе формата — это качество изображения, вес и количество цветов. В вебе тяжёлые изображения непрактичны, поскольку они долго загружаются. Чтобы уменьшить вес файла, используются алгоритмы сжатия. Сжатие может быть с потерями и без потерь. При выборе подходящего формата изображения, нам нужно найти баланс между весом файла и качеством картинки, так как некоторые алгоритмы сжимают изображения с потерей качества. Теперь рассмотрим каждый из форматов подробнее.
GIF (Graphics Interchange Format)
Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.
Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.
Особенностью GIF является поддержка анимации, то есть этот формат может хранить несколько кадров, которые сменяют друг друга с определённой частотой.
![Пример изображения в формате GIF. Источник](https://cs1.htmlacademy.ru/blog/html/image-formats/d813dc275e27d96e96104102aa06e792.gif)
Таким образом, формат GIF подходит если:
- изображение не многоцветное;
- нужна простейшая прозрачность;
- нужна анимация.
JPEG (Joint Photographic Experts Group)
Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.
Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).
![Пример изображения в формате JPEG с неоптимальной степенью сжатия. Качество: 10. Вес: 20 килобайт](https://cs1.htmlacademy.ru/blog/html/image-formats/28f6862b5fbc0fa03cada135ae7934cf.jpeg)
Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.
![Пример изображения в формате JPEG с оптимальной степенью сжатия. Качество: 60. Вес: 65 килобайт](https://cs1.htmlacademy.ru/blog/html/image-formats/643cfb3b5ddca5f67983abd772572b8a.jpeg)
Вторая картинка с уровнем качества 60 весит чуть больше первой — 65 килобайт, но выглядит уже хорошо.
![Пример изображения в формате JPEG с минимальной степенью сжатия. Качество: 95. Вес: 169 килобайт](https://cs1.htmlacademy.ru/blog/html/image-formats/9cc530d08049b23aea45dfbda916364c.jpeg)
Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.
Таким образом, формат JPEG лучше подходит для:
- полноцветных изображений, фотографий;
- изображений, с плавным переходом яркости и контраста;
- рисунков с большим количеством разноцветных деталей.
PNG (Portable Network Graphics)
PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.
PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.
Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.
Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.
![Пример изображения в формате PNG. Источник](https://cs1.htmlacademy.ru/blog/html/image-formats/618353391265c3998feea3cc13ca6e28.png)
Итак, формат PNG подходит для:
- изображений с прозрачностью и полупрозрачностью;
- когда необходима повышенная точность полноцветных изображений;
- изображений с резкими переходами цветов.
WebP
WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.
Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.
Формат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.
Особенности WebP:
- сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
- сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
- поддерживает прозрачность (альфа-канал).
Иногда WebP сжимает изображение даже лучше, чем заявляет Google.
![JPEG: 44 килобайт](https://cs1.htmlacademy.ru/blog/html/image-formats/c5a87193e0a836650a901ea06193b7cd.jpeg)
![WebP: 26 килобайт. Если изображение не видно, значит ваш браузер не поддерживает формат WebP](https://cs1.htmlacademy.ru/blog/html/image-formats/0716ac36a1a398507bd97a7fe3f56b6d.webp)
Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день 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 отлично подходит для малоцветных схем, логотипов и иконок, например, таких:
![Источники изображений: Roundicons Freebies и HTML Academy](https://cs1.htmlacademy.ru/blog/html/image-formats/85bfa560f874d490115fac0fda6a4ebb.png)
Таким образом, формат SVG подходит если:
- нужно анимировать части изображения;
- изменять цвет элементов изображения;
- необходимо масштабировать изображение без потерь.
Форматы в зависимости от цели использования
Под фотографическими изображениями понимаются полноцветные фотографии, чёрно-белые фотографии, полноцветные изображения, рисунки с большим количеством разноцветных деталей. Под графикой, логотипами, иконками — графика со множеством сплошных цветов, с небольшим количеством цветов (до 256 цветов), с текстом или линиями, с прозрачностью.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
![Какой формат выбрать — WebP, PNG или JPG](https://cs1.htmlacademy.ru/blog/html/which-format/preview.png)
Какой формат выбрать — WebP, PNG или JPG
Существует множество форматов изображений, с некоторыми из них разработчики сталкиваются постоянно, с другими крайне редко.
В статье рассмотрим три распространённых формата: JPEG, PNG и WebP. Каждый из них имеет свои сильные и слабые стороны. Выбор правильного формата зависит от специфики вашего сайта и изображений, с которыми вы работаете. Узнаем особенности форматов и в каких случаях их лучше использовать.
- 20 января 2025
HTML-коды популярных эмодзи
Эмодзи давно вышли за пределы мессенджеров и социальных сетей, став важной частью веб-дизайна и пользовательского интерфейса. Они помогают сделать ваш сайт живым, ярким и эмоциональным. Но как добавить эмодзи в HTML-код без потери качества? В этой статье мы собрали для вас список из 50 самых популярных эмодзи с их названиями, значениями и HTML-кодами для вставки.
Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты. Узнайте, как просто интегрировать эмоции в свой сайт с помощью одной строки HTML!
Эмодзи | Название | HTML-код |
---|---|---|
😀 | Улыбающееся лицо | 😀 |
😂 | Лицо со слезами радости | 😂 |
😍 | Лицо с глазами в форме сердца | 😍 |
😎 | Лицо в солнцезащитных очках | 😎 |
😭 | Плачущий | 😭 |
😊 | Смущённая улыбка | 😊 |
😢 | Грустное лицо | 😢 |
😅 | Лицо с каплей пота | 😅 |
🤔 | Задумчивое лицо | 🤔 |
👍 | Большой палец вверх | 👍 |
👎 | Большой палец вниз | 👎 |
👏 | Аплодисменты | 👏 |
🙏 | Сложенные руки | 🙏 |
❤ | Красное сердце | ❤ |
💔 | Разбитое сердце | 💔 |
🔥 | Огонь | 🔥 |
💯 | Сто баллов | 💯 |
🎉 | Конфетти | 🎉 |
🎂 | Торт | 🎂 |
🌟 | Звезда | 🌟 |
✨ | Сияние | ✨ |
🌈 | Радуга | 🌈 |
☀ | Солнце | ☀ |
☁ | Облако | ☁ |
🌧 | Дождь | 🌧 |
❄ | Снег | ❄ |
🌍 | Земной шар | 🌍 |
💡 | Лампочка | 💡 |
💤 | Сон | 💤 |
🎵 | Нота | 🎵 |
🎶 | Музыка | 🎶 |
📱 | Телефон | 📱 |
💻 | Ноутбук | 💻 |
🚗 | Машина | 🚗 |
🚀 | Ракета | 🚀 |
✈ | Самолёт | ✈ |
🚲 | Велосипед | 🚲 |
🐶 | Собака | 🐶 |
🐱 | Кошка | 🐱 |
🐭 | Мышь | 🐭 |
🦊 | Лиса | 🦊 |
🐻 | Медведь | 🐻 |
🍎 | Яблоко | 🍎 |
🍕 | Пицца | 🍕 |
🍔 | Бургер | 🍔 |
🍩 | Пончик | 🍩 |
🍉 | Арбуз | 🍉 |
- 15 ноября 2024
![Что писать в атрибуте alt](https://cs1.htmlacademy.ru/blog/html/good-alt/preview.png)
Что писать в атрибуте alt
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 27 февраля 2024
![Что такое Lazy Loading и как её включить на сайте](https://cs1.htmlacademy.ru/blog/html/lazy-loading/preview.png)
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
<img src="picture.jpg" loading="lazy">
<iframe src="supplementary.html" loading="lazy"></iframe>
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
![Знакомство с HTML](https://cs1.htmlacademy.ru/blog/html/introduction-to-html/preview.png)
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
![Специальные символы в HTML](https://cs1.htmlacademy.ru/blog/html/special/preview.png)
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
![Зачем нужен метатег viewport](https://cs1.htmlacademy.ru/blog/html/viewport/preview.png)
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport
.
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport
, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport
, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport
тоже нужен.
- 18 сентября 2023
![Атрибут class в HTML на примерах](https://cs1.htmlacademy.ru/blog/html/class/preview.png)
Атрибут class в HTML на примерах
Атрибут class
используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
<!-- Один класс -->
<div class="container">
<!-- ... -->
</div>
<!-- Несколько классов -->
<div class="container special-box">
<!-- ... -->
</div>
- 14 сентября 2023
![В чём отличия цитат](https://cs1.htmlacademy.ru/blog/html/blockquote-cite-q/preview.png)
В чём отличия цитат
В HTML есть разные теги для цитирования и указания источников. Основные из них: <blockquote>
, <cite>
и <q>
. Давайте разберёмся в их различиях.
- 12 сентября 2023
![Растровая и векторная графика](https://cs1.htmlacademy.ru/blog/html/rastr-vector/preview.png)
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023