Оптимизация JPEG для Интернета - полное руководство

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

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

Избегайте всегда экономить на 100%

Вы почти никогда не должны сохранять изображения в формате JPEG со 100% качеством. Это будет не произвести максимально возможное “оптимизированный” образ. На самом деле он рассчитывается по формуле предела оптимизации, которая непомерно увеличивает размер вашего файла. Даже по сравнению с качеством 90% или 95% вы увидите значительное уменьшение размера файла.

В большинстве случаев вам рекомендуется сохранять изображения с качеством ниже 90%. Если вы откроете диалоговое окно «Сохранить для Web» в Photoshop, вы заметите, что они предлагают предустановленные значения, которые вы можете выбрать. Я добавил возможные значения JPEG ниже - обратите внимание на присущие соглашения об именах.

Низкий - 10%
Средняя - 30%
Высоко - 60%
Очень высоко - 80%
максимальная - 100%

Даже в Adobe Photoshop качество изображения на 60% считается «высоким». Многие веб-разработчики ручаются от 50% до 70% - это безопасный диапазон.

Как низко слишком низко?

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

Я бы сказал, что ниже 30% вы действительно снижаете качество изображения. Другие дизайнеры будут ругаться на 50% “предел” для уменьшения оптимального значения. Но лучший совет здесь - просто попробовать разные настройки и посмотреть, что выглядит лучше всего! Вы не ошибетесь, проведя несколько тестовых исследований по оптимизации изображений JPEG для Интернета..

Параметры сжатия

Сначала мы должны уточнить два термина «сжатие» и «качество», которые обратны друг другу. Это означает, что если вы сохраните JPEG при 40% -ном сжатии, вы получите 60% -ое качество (по сравнению с максимальным 100% -ным качеством без сжатия).

Это самые основные варианты использования - и их должно быть достаточно при сохранении для Интернета. Обычные пользователи не попадают в более глубокие настройки. Сэмплирование приводит к более сложным вопросам, когда вы конвертируете изображения RGB в YCbCr (Luminance, Chroma Blue, Chroma Red).

(Источник изображения: Кара Монро)

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

(Источник изображения: Дерек Хэтфилд)

В качестве интересного примечания Adobe Photoshop не всегда использует субсэмплинг для сжатия. Любые изображения, сохраненные с помощью “Сохранить для Интернета” диалог будет использовать только подвыборку цветности ниже 50% значения качества.

Отличающиеся веб-медиа

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

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

Планирование графической модели

Вы хотите иметь организованную файловую систему, которая достаточно проста для поиска. Некоторые веб-мастера предпочитают размещать свои фотографии в других местах в Интернете, например, в Flickr или Picasa. Тем не менее, вы все равно захотите использовать какой-нибудь инструмент сжатия, чтобы уменьшить размеры изображений, но способ их отображения на вашем сайте будет отличаться. Это особенно верно с ростом популярности мобильных устройств с доступом к Интернету..

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

Еще один интересный инструмент, чтобы проверить это Yahoo! Smush.it. Это веб-приложение на основе браузера, в котором вы можете загрузить изображение, а Smush.it удалит все лишние лишние байты для оптимизации размера файла. Это 100% без потерь, что означает, что качество изображения не будет ухудшаться вообще. И что еще лучше, вы можете загружать изображения с прямых URL-адресов, если они размещены на вашем веб-сайте или на стороннем сервере..

Дополнительные инструменты

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

IrfanView

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

Что еще лучше, так это поддержка плагинов от сторонних разработчиков. Одним из таких примеров является RIOT (Radical Image Optimization Tool). Этот плагин работает для других подобных графических редакторов с открытым исходным кодом, таких как GIMP. Он предлагает просмотр двух изображений, где вы можете вручную настроить параметры сжатия для каждого из ваших изображений.

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

ImageOptim для Mac

Если вы работаете в OS X и вам нужно мощное приложение для сжатия, тогда не смотрите дальше. ImageOptim - это мощный инструмент для сжатия изображений в Интернете - иногда даже лучше, чем Photoshop.

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

Были некоторые незначительные проблемы с последней стабильной версией 1.3.3 при рендеринге пиксельных изображений JPEG в Opera. Попробуйте проверить все ваши оптимизированные изображения в 4 основных браузерах - Chrome, Safari, Firefox и Opera (и, возможно, IE). Если что-то выглядит искаженным, вы можете попробовать загрузить ImageOptim 1.3.0, который немного чище.

Полезные ресурсы

JPEG 101: руководство для ускоренного курса по JPEG
Правильные настройки сжатия для сохранения изображений JPG для WordPress
Умные Методы Оптимизации JPEG
Как оптимизировать изображения JPEG для веб-сайтов
Все, что вам нужно знать о сжатии изображений

Заключение

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

Я все еще должен рекомендовать Adobe Photoshop в качестве моей первой программы для редактирования изображений. Есть другие примеры, возможно, лучше для процесса оптимизации JPEG. Но веб-дизайнеры могут обойтись даже с менее известными решениями с открытым исходным кодом. Если у вас есть похожие трюки или идеи относительно сжатия JPEG, пожалуйста, поделитесь с нами в разделе пост-обсуждения ниже.