При нахождении на сайте Вы соглашаетесь с политикой обработки персональных данных.
Всё понятно!
JPEG: Joint Photographic Expert Group
JPEG (Joint Photographic Experts Group) — формат хранения графических файлов со сжатием с потерями и высокой степенью сжатия. Чаще всего его применяют для фотографий; файлы имеют расширения .jpg и .jpeg.
Кратко
- JPEG сжимает изображение с потерями: часть данных удаляется безвозвратно, поэтому файл получается небольшим, но при повторных сохранениях качество падает.
- Формат подходит для фотографий и плохо подходит для логотипов, текста и схем: у резких границ появляются артефакты. Прозрачности в JPEG нет.
- Картинки часто составляют наибольшую часть веса страницы, поэтому вес JPEG напрямую влияет на скорость загрузки сайта.
- Для фото на сайте современные форматы WebP и AVIF обычно легче; JPEG остаётся запасным вариантом, который поддерживают все браузеры.
Кому и зачем это знать
С запросом «JPEG» приходят люди с разными задачами. Найдите свою ситуацию.
Владелец сайта или бизнесаСитуация: Страницы открываются медленно, и подрядчик говорит, что виноваты «тяжёлые картинки».Зачем: Картинки, по данным справки Google, часто дают наибольший вклад в вес страницы, и это одна из самых простых причин медленной загрузки.Что сделать: Попросите подрядчика показать вес самых тяжёлых картинок на главной и в каталоге и срок исправления. Результат проверяйте не по ощущениям, а по скорости загрузки до и после. Не требуйте «убрать фото»: качество фото нужно клиентам.
Маркетолог, SEO-специалистСитуация: В аудите сайта написано «оптимизируйте изображения», и нужно поставить понятную задачу.Зачем: Картинки влияют и на скорость, и на показ в поиске по изображениям: Google Search поддерживает JPEG среди форматов изображений.Что сделать: Поставьте задачу из трёх пунктов: подобрать размер под реальное место на странице, выбрать формат по типу изображения, добавить alt-текст и понятные имена файлов. Верхнее изображение страницы нельзя загружать отложенно: это ухудшает показатель загрузки главного блока.
Контент-менеджерСитуация: Загружаете фото в статьи и карточки прямо с телефона или от фотографа.Зачем: Файл с камеры часто в разы больше, чем нужно странице, а повторное сохранение JPEG ухудшает его качество.Что сделать: Перед загрузкой уменьшите размеры до нужных на странице, экспортируйте JPEG один раз из исходного файла и не пересохраняйте готовую копию. Логотипы и скриншоты с текстом сохраняйте в PNG, а не в JPEG.
РазработчикСитуация: Нужно отдавать изображения быстро и в разных форматах.Зачем: Для фото WebP и AVIF по данным MDN обычно легче JPEG, но не все окружения их поддерживают, поэтому JPEG нужен как запасной вариант.Что сделать: Используйте элемент picture: сначала AVIF, затем WebP, в конце img с JPEG, как в примере MDN. Задавайте в img ширину и высоту и всегда указывайте запасной адрес в атрибуте src: так изображение увидят и браузеры, и сканеры без поддержки picture.
Новичок, студентСитуация: Встретили JPEG в задании по веб-дизайну или в требованиях к файлу.Зачем: Форматы путают: JPEG, JPG, PNG, GIF, WebP.Что сделать: Запомните: JPEG и JPG это один формат, он с потерями и для фотографий; PNG без потерь и с прозрачностью; GIF и SVG решают другие задачи. Прорешайте пример с весом страницы ниже.
Как JPEG сжимает изображение
JPEG использует сжатие с потерями. Изображение делится на блоки 8×8 пикселей, к каждому блоку применяют дискретное косинусное преобразование (DCT), после чего часть информации отбрасывают на этапе квантования. Отброшенное восстановить нельзя, по описанию Wikipedia.
- Степень сжатия выбирается. Кодировщик позволяет обменять размер файла на качество: чем сильнее сжатие, тем меньше файл и тем заметнее потеря деталей и артефакты.
- Типичное сжатие около 10:1. Wikipedia пишет, что JPEG обычно достигает такого сжатия при заметной, но в целом приемлемой потере качества.
- Повторное сохранение ухудшает качество. При каждом пересжатии часть качества теряется, поэтому редактируют исходник без потерь, а в JPEG экспортируют в самом конце.
- Прогрессивный JPEG. Данные записаны в несколько проходов с нарастающей детализацией, так что грубый вариант изображения появляется до полной загрузки.
JPEG и другие форматы: PNG, WebP, AVIF, SVG, GIF
Формат выбирают по типу изображения. Данные взяты из руководства MDN по форматам изображений.
| Формат | Сжатие | Прозрачность | Когда выбирать |
|---|---|---|---|
| JPEG | с потерями | нет | фотографии; запасной вариант для WebP и AVIF |
| PNG | без потерь | да | логотипы, скриншоты, изображения с текстом и прозрачностью |
| WebP | с потерями или без | да | фото и графика; файлы с потерями в среднем на 25–35% меньше JPEG при том же качестве |
| AVIF | с потерями или без | да | фото, когда нужен минимальный вес; файлы с потерями примерно на 50% меньше JPEG; нужен запасной вариант |
| SVG | векторный | да | логотипы, иконки, схемы, которые масштабируются; для фото не подходит |
JPEG плохо подходит для линейных рисунков, текста и значков: у резких границ появляются заметные артефакты, поэтому для них берут PNG, GIF или SVG.
JPEG, скорость сайта и SEO
Картинки часто составляют наибольшую часть веса страницы, и справка Google прямо пишет, что они делают страницы медленными и дорогими для загрузки.
- Меньше вес, быстрее картинка. По руководству web.dev, быстрее показать изображение можно только уменьшив его передаваемый размер, при этом качество значимого контента не стоит приносить в жертву скорости.
- Главное изображение влияет на показатель загрузки. По web.dev, более чем на 70% страниц самым большим элементом первого экрана является картинка. Для картинок в верхней части страницы не используйте отложенную загрузку (loading=lazy): это сильно ухудшает показатель LCP.
- Формат поддерживается поиском. Google Search поддерживает изображения в форматах BMP, GIF, JPEG, PNG, WebP, SVG и AVIF.
- Описание и имя файла. Alt-текст Google называет самым важным атрибутом для метаданных изображения, имена файлов советует делать короткими и описательными, а не вроде image1.jpg.
Пример: сколько весит страница с фотографиями
Условный пример, цифры выдуманы для иллюстрации, это не данные клиента. На странице каталога пять фотографий, загруженных с камеры без обработки, по 2 МБ каждая.
| Вариант | Вес одной фото | Вес пяти фото |
|---|---|---|
| Без обработки | 2 МБ | 10 МБ |
| Размер под страницу, экспорт JPEG один раз | 300 КБ | 1,5 МБ |
Экономия на одной странице составляет 8,5 МБ, то есть вес пяти фотографий уменьшился примерно в 6,7 раза. Пользователю на мобильном интернете это разница между мгновенным открытием и ожиданием. Реальный вес зависит от размера кадра, содержания и выбранного качества, поэтому проверяйте на своих файлах.
Что делать с JPEG на сайте
| Ситуация | Что сделать |
|---|---|
| Фото с камеры загружено как есть | Уменьшить размеры под реальное место на странице и экспортировать JPEG один раз из исходника |
| Логотип или скриншот с текстом в JPEG | Заменить на PNG или SVG: у текста и резких границ JPEG даёт артефакты |
| Нужна прозрачность | Использовать PNG, WebP или AVIF; JPEG прозрачности не поддерживает |
| Страница тяжёлая и медленная | Подготовить WebP и AVIF с запасным JPEG через picture и проверить скорость до и после |
| Главное изображение первого экрана грузится поздно | Убрать для него отложенную загрузку и задать высокий приоритет |
| У картинок нет описаний | Добавить alt-текст и понятные имена файлов |
Типичные ошибки
- Пересохранять один и тот же JPEG несколько раз: качество падает при каждом сжатии.
- Использовать JPEG для логотипов, графиков и скриншотов с текстом.
- Загружать фото с камеры без уменьшения размера.
- Включать отложенную загрузку для главной картинки на первом экране.
- Ждать от JPEG прозрачного фона: такого формата возможности нет.
- Подбирать картинки по весу и забывать про alt-текст и понятное имя файла.
Частые вопросы
Что такое JPEG простыми словами?
Формат изображений, который уменьшает размер файла, отбрасывая часть деталей. Хорошо подходит для фотографий.
Чем отличается JPEG от JPG?
Это один и тот же формат: файлы JPEG обычно имеют расширение .jpg или .jpeg.
Как расшифровывается JPEG?
Joint Photographic Experts Group, по названию группы, выпустившей первый стандарт в 1992 году.
JPEG сжимает с потерями или без?
С потерями. Часть информации удаляется безвозвратно, поэтому качество падает при сильном сжатии и повторных сохранениях.
Поддерживает ли JPEG прозрачность?
Нет, у него нет альфа-канала. Для прозрачности используют PNG, WebP или AVIF.
Какой формат лучше для фото на сайте?
MDN рекомендует для фотографий WebP или AVIF, а JPEG оставлять запасным вариантом, потому что его поддерживают все браузеры.
Влияет ли формат картинки на SEO?
Косвенно: вес картинок влияет на скорость загрузки, а alt-текст и имя файла помогают Google понять изображение. Google Search поддерживает JPEG.
Когда JPEG не подходит?
Для логотипов, схем, текста и всего, где нужны чёткие границы или прозрачность.
Связанные термины
- GIF: Graphic Interchange Format: другой растровый формат: для линейных рисунков и значков Wikipedia называет подходящими GIF и PNG, а не JPEG
- Color Depth: глубина цвета, то есть сколько цветов хранит каждый пиксель, а не способ сжатия файла
- Альтернативный текст: описание изображения для людей и поисковых систем, которое нужно любому формату
- Hero Image: главное изображение первого экрана: на большинстве страниц именно картинка определяет скорость показа главного блока
Страницы медленно открываются, и вы подозреваете тяжёлые изображения? Мы найдём причины и ускорим загрузку.
Ускорение загрузки сайта