Какво е прогресивен JPEG?

Прогресивното JPEG е метод за кодиране на JPEG изображения, при който данните се съхраняват по такъв начин, че изображението се показва постепенно при зареждане. Първо се зарежда версия с ниска резолюция или по-малко детайли, а след това, с получаването на нови данни, детайлите се подобряват.

Разлики спрямо базовия (Baseline) JPEG:

Прогресивен JPEG	Базов JPEG
Изображението се показва постепенно, с подобрения.	Изображението се зарежда отгоре надолу, на блокове.
Подходящ за бавни връзки.	Подходящ за бързи връзки.
Файлът е малко по-голям.	Файлът е малко по-малък.
Изисква повече процесорно време за декодиране.	Изисква по-малко процесорно време за декодиране.

Приложение във Frontend:

• Подобряване на потребителския опит при бавен интернет.
• Визуално усещане за по-бързо зареждане на съдържанието.
• Може да се комбинира с lazy loading за оптимизация.

Технически, прогресивният JPEG разделя коефициентите на честотата на изображението на няколко скана. Първо се предават нискочестотните коефициенти (общата структура), след това по-високите (детайлите).

Пример за преобразуване на базов JPEG в прогресивен с ImageMagick:

# base.jpg - оригиналният файл
# прогресивен.jpg - резултатният файл
convert base.jpg -interlace Plane прогресивен.jpg

Използването в CSS или HTML не се различава от обикновения JPEG, тъй като това е вътрешен формат за кодиране:

<img src="прогресивен.jpg" alt="Прогресивно изображение">

.background {
  background-image: url('прогресивен.jpg');
}