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

В статье рассмотрим три распространённых формата: JPEG, PNG и WebP. Каждый из них имеет свои сильные и слабые стороны. Выбор правильного формата зависит от специфики вашего сайта и изображений, с которыми вы работаете. Узнаем особенности форматов и в каких случаях их лучше использовать.

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

JPEG

Формат JPEG (Joint Photographic Experts Group) был разработан в 1992 году для сжатия фотографий или других изображений с большим количеством цветов и плавными переходами между оттенками. Изображения в формате JPEG широко используются в вебе. Большинство красочных картинок, которые мы видим в интернете, имеют именно этот формат.

Изображение в формате JPG.

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

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

PNG

Формат изображений PNG (Portable Network Graphics) часто используется для графики и логотипов. В отличие от JPEG, в PNG сжатие происходит без потерь — изображение сохраняет первоначальное качество даже после многократного редактирования или изменения размера. Это делает PNG отличным выбором для логотипов, иконок и других графических изображений, которые должны всегда оставаться чёткими.

Пример изображения PNG. Источник

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

В PNG есть многослойность. За счёт наложения слоёв и варьирования их прозрачности можно создавать интересные эффекты с тенями и градиентами.

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

Недостаток PNG — размер файла в нём обычно больше, чем в JPEG, что может привести к замедлению загрузки сайтов.

WebP

Формат WebP был разработан компанией Google в 2010 году. Он был создан для улучшения скорости загрузки страниц и экономии места на сервере.

WebP имеет ряд преимуществ по сравнению с другими форматами изображений. Он позволяет уменьшить размер файлов изображений на 25-35% по сравнению с JPEG, сохраняя при этом качество изображения. WebP обеспечивает поддержку прозрачности, анимации и многоканальности. Это делает формат идеальным для использования на сайтах, где важно быстрое время загрузки, например, в интернет-магазинах или на сайтах с множеством изображений.

Пример изображения в формате WebP

Недавно Google выпустил новую версию формата — WebP Lossless. Она использует алгоритм, который позволяет сжимать изображения без потерь качества, предыдущие же версии использовали только сжатие с потерями.

✅ Если вам понадобится использовать лёгкие изображения для вёрстки сайта, то для преобразования в формат WebP рекомендуется использовать онлайн-конвертеры. Например:

  1. Convertio — конвертер изображений, позволяющий преобразовывать JPEG, PNG и другие форматы в WebP.

  2. Online-Convert — сервис, который позволяет конвертировать изображения, видео, аудио и другие файлы в различные форматы, включая WebP.

  3. Squoosh — онлайн-приложение для оптимизации изображений, которое также позволяет сохранять их в формате WebP.

Как выбрать формат изображения

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

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

✅ Выбор формата изображения:

  • определите задачи сайта и каждого изображения;

  • для логотипов и графических изображений с мелкими деталями рекомендуется использовать формат PNG. Также для этих целей подойдёт WebP;

  • для декоративных и красочных изображений подойдёт JPEG;

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

Материалы по теме:


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

ТелеграмПодкастБесплатные учебники

Читать дальше

Что писать в атрибуте alt

Что писать в атрибуте alt

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

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

Читать дальше
HTML
  • 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

<img src="picture.jpg" loading="lazy">

<iframe src="supplementary.html" loading="lazy"></iframe>

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

Читать дальше
HTML
  • 22 ноября 2023
Знакомство с HTML

Знакомство с HTML

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

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

Читать дальше
HTML
  • 1 ноября 2023
Специальные символы в HTML

Специальные символы в HTML

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

Читать дальше
HTML
  • 23 октября 2023
Зачем нужен метатег viewport

Зачем нужен метатег viewport

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

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

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

Читать дальше
HTML
  • 18 сентября 2023
Атрибут class в HTML на примерах

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

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

<!-- Один класс -->
<div class="container">
  <!-- ... -->
</div>

<!-- Несколько классов -->
<div class="container special-box">
  <!-- ... -->
</div>
Читать дальше
HTML
  • 14 сентября 2023
Как отличить h1, h2 и h3

Как отличить h1, h2 и h3

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1> до <h6>. Каждый уровень заголовка имеет свой семантический вес, где <h1> имеет наибольший вес, а <h6> — наименьший.

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

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

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

Читать дальше
HTML
  • 8 июня 2023
Как правильно вставлять SVG

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

�PNG
IH�aV
PLTE�������0�
IDAcZ�d���� �W=
S�3�o;���]P
���IEND�B`�~

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

<svg width="20">
  <rect fill="#fc0"
    width="20"
    height="20"/>
  <line stroke="black"
    x1="0" y1="0"
    x2="20" y2="20"/>
</svg>

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

Читать дальше
HTML
  • 1 июня 2023