Основы веб-графики

Какой формат изображения лучше для сайта?

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

JPEG или PNGСкорость загрузкиКачество изображения
Сравнение форматов JPEG и PNG для изображений на сайте

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

Что требуется от формата для сайта

  • Сохранять важные детали.
  • Обеспечивать разумный размер файла.
  • Работать в распространённых браузерах и на разных устройствах.

Для большинства сайтов достаточно двух привычных форматов: JPEG (.jpg) и PNG (.png). Выбор зависит от содержимого изображения.

Выбирайте JPEG для фотографий и градиентов

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

Цветная фотография ресторана в формате JPEG
Этот JPEG занимает 148 КБ. То же изображение в PNG заняло бы 1,52 МБ, то есть более чем в десять раз больше.

Выбирайте PNG для чётких границ и прозрачности

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

Прозрачная схема PNG с чёткими линиями
Этот PNG занимает 41 КБ. Версия JPEG была бы почти вдвое больше и не сохранила бы прозрачность.

Простое правило

Для фотографий и портретов выбирайте JPEG.
Для схем, снимков экрана, документов и логотипов выбирайте PNG.

Публикуйте изображения без сомнений в формате

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