Прикладные техники оптимизации JPEG
Существует не так много базовых советов по оптимизации JPEG, которые реально дают эффект без ухудшения качества. В этой статье я расскажу обо всех этих методах и их эффективности, а также предложу несколько продвинутых техник, которые позволят сократить ваши изображения в размере еще сильнее.
Сразу оговорюсь, что формат JPEG (в силу DCT-кодирования и таблиц Хаффмана) изначально подразумевает потерю качества. И даже сохранение в режиме "100%" не устранит потерь. Но эти потери можно сделать незаметными для глаза или допустимыми в конкретном случае использования. Или использовать некоторые особенности формата, чтобы кодировать JPEG совсем без потерь.
1. Оптимизация для Web
Базовый совет: при сохранении в любом редакторе (Photoshop, Gimp и др.) используйте отдельную опцию «Сохранить для Web». Это сделает изображение совместимым по цветовой палитре со всеми браузерами. А также удалит из него некоторую дополнительную информацию (например, превью-изображения), которая необходима обычным редакторам для быстрого просмотра множества изображений, но совершенно не подходит браузерам (которые не используют превью в JPEG-изображениях ни в каком виде).
Естественно, что фактические размеры изображения должны соответствовать максимальным размерам, используемым на сайте. Наиболее частая ошибка в работе с картинками на сайте: взять их в исходном виде, без приведения к нужным размерам. Это многократно увеличивает размер сайта и существенно замедляет его загрузку.
2. Удаление мета-информации
Лучшей в данном классе утилит
Удаление мета-информации и EXIF-чанков производится вне основных данных изображения (DCT-преобразования и таблиц Хаффмана) и гарантирует сохранение качества.
3. «Последовательная» оптимизация
«Последовательные» JPEG улучшают пользовательское восприятие при загрузке больших файлов (сначала показывается смазанная копия, затем она улучшается в поступлением данных) и обладают меньшим размером (в среднем, если JPEG изображение больше 10 Кб).
Сейчас «последовательные» JPEG файлы поддерживаются всеми браузерами, и нет никаких причин их не использовать. Не всегда такие файлы будут меньше обычных, но проверку на размер обычной и «последовательной» версии необходимо выполнять при сохранении или оптимизации файлов.
Выигрыш в размере «последовательных» JPEG обычно не больше 20% от исходного размера файла.
4. Сохранение не в 100% качестве
Для этого необходимо в используемом графическом редакторе (или консольной утилите) задать степень сжатия на 5-10% меньше максимального. Например, при шкале от 0 до 100 оптимальным будет уровень 90-95. При шкале от 1 до 12, оптимальным будет 11.
Как видно из графика выше, даже использование качества 95 вместо 100 обычно позволяет сократить размер в 1,5-2 раза.
5. Использование другого формата
Правильное определение формата изображение может сократить размер в 2-3 раза.
6. Оптимизация для Retina-устройств
На примере выше более высокая степень сжатия для изображения с двойной плотностью пикселей дало 30% выигрыша в размере без видимой потери качества.
Описанные методики позволяют существенно (иногда в несколько раз) сократить размер JPEG-изображения и применить к ним другие, продвинутые техники оптимизации.
Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой
-
Самый базовый и быстрый способ, которым пользуюсь уже надцать лет, это открыть изображение в Microsoft Office Picture Manager, Открыть пункт меню Рисунок -> Сжать рисунки, справа выбрать галочку для документов, и нажать на кнопку ОК там же справа внизу. И тут же видно результат насколько сжался фай, затем при закрытии файла нажать кнопку сохранить, ну или не сохранять, если результат неудовлетворительный. При определенной сноровке вся операция занимает отсилы 30 сек - минута.
![](/images/avatar/8.png)
![](/upload/resize_cache/main/40b/60_60_2/40ba9e6ccd40245b03725d4fb1487296.jpg)
![](/upload/resize_cache/main/713/60_60_2/713cf673b9cc25f51e3ab30512c44960.jpg)
![](/images/avatar/5.png)
![](/upload/resize_cache/main/713/60_60_2/713cf673b9cc25f51e3ab30512c44960.jpg)
![](/images/avatar/9.png)
![](/images/avatar/8.png)
![](/images/avatar/9.png)
![](/upload/resize_cache/main/076/60_60_2/07676f60d798d16ad8207d78bc007548.jpeg)
![](/upload/resize_cache/main/40b/60_60_2/40ba9e6ccd40245b03725d4fb1487296.jpg)
![](/images/avatar/3.png)
![](/images/avatar/4.png)
![](/images/avatar/7.png)
![](/upload/resize_cache/main/585/42_42_2/585f431424743e842039591d897b0018.jpg)
![](/upload/resize_cache/main/a7d/42_42_2/a7d58966649e99f3a4bc367b19fdace1.jpg)
![](/upload/resize_cache/main/713/42_42_2/713cf673b9cc25f51e3ab30512c44960.jpg)
![](/upload/resize_cache/main/a8f/42_42_2/a8fff0ebc3ae749f6c6e9235ee028d04.jpg)
![](/images/avatar/2.png)
![](/upload/resize_cache/main/517/42_42_2/5176ed0818edf65ffafd8091d485a4ef.png)
![](/images/avatar/9.png)
![](/upload/resize_cache/main/06d/42_42_2/06deae019622f209c1d2dbf0b02efa26.jpg)
![](/upload/resize_cache/main/c81/42_42_2/c816924d3b35c0fb60ed8597fcf48a5c.jpg)
![](/upload/resize_cache/main/802/42_42_2/802244fb8bbbdf42e704c3d7629712a7.jpg)
![](/upload/resize_cache/main/213/42_42_2/2131d1f6eb6785d43aa67c97635ba6a0.png)
![](/upload/resize_cache/main/d35/42_42_2/d3592bbe1f46c09319b2e411691696ae.jpg)
![](/upload/resize_cache/main/e73/42_42_2/e73ce1fffeff410ec230dab60b43bb2c.jpg)
![](/images/avatar/2.png)
![](/upload/resize_cache/main/974/42_42_2/9748368d2314dfb79ed5da3eaf65c5c4.jpg)
![](/upload/resize_cache/main/950/42_42_2/95075458576d86f53a212f253fa06fae.png)
![](/upload/resize_cache/main/0bc/42_42_2/0bc9321f23deb17434fdc831ed3f9242.jpg)
![](/upload/resize_cache/main/52c/42_42_2/52c72b135acd8f0d14938c084ad5c668.png)
![](/images/avatar/9.png)
![](/images/avatar/3.png)
![](/upload/resize_cache/main/527/42_42_2/5270eff60c8599d94be00b89d941c224.png)