Руководство по оптимизации 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 не всегда использует субсэмплинг для сжатия. Любые изображения, сохраненные в диалоговом окне «Сохранить для Web», будут использовать только субсэмплирование цветности ниже 50% значения качества.
Отличающиеся веб-медиа
Интернет также полон различных видов медиа изображений. Вы можете иметь фотографии, значки, кнопки, значки и тонны другой графики. Но примечательно, что сравнивать качество между кнопкой и фотографией просто не имеет смысла.

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

Единственным недостатком является то, что вам нужно предоставить два набора изображений для медиа-галереи. Обратите внимание на множество различных графических изображений, которые вы сшили на веб-сайте, и рассмотрите методы оптимизации для каждого из них в отдельности.
Использование инструмента сжатия
Возможно, вы хотите организовать файлы изображений, которые легко найти на вашем сайте. Вы также можете разместить их фотографии в облачной службе, такой как Amazon S3, Google Cloud Storageили через CDN, который обеспечит более быструю доставку изображения. Тем не менее, вы захотите использовать какой-нибудь инструмент сжатия, чтобы уменьшить размеры изображений. Любые дополнительные байты, которые вы можете уменьшить для каждого размера файла, имеют решающее значение. И вот некоторые из инструментов, которые вы хотите проверить:
TinyJPG
TinyJPG это веб-приложение на основе браузера, в которое можно загрузить изображение и все лишние байты для оптимизации размера файла. Это на 100% без потерь, что означает, что качество изображения не ухудшится вообще. Вы можете загрузить до 20 изображений с 5 МБ все сразу.
Если вы используете WordPress для своего сайта. Вы можете использовать его официальный плагин, Сжатие изображений JPEG и PNG, Этот плагин также подключается к своему дочернему сайту TinyPNG Это позволит вам оптимизировать изображения в формате PNG.
IrfanView
Это бесплатное программное обеспечение для Windows позволяет просматривать и оптимизировать любой набор больших изображений. Мне особенно нравится это программное обеспечение, потому что оно поддерживает пакетное преобразование из изображений в нескольких каталогах. Вы можете автоматически применять одни и те же функции к сотням изображений JPEG.

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

Он предлагает просмотр двух изображений, где вы можете вручную настроить параметры сжатия для каждого из ваших изображений.
Программная поддержка великолепна, а функции RIOT очень просты в использовании. Помимо сжатия изображений у вас также есть доступ к удалению дополнительных метаданных, таких как EXIF ​​и Adobe XMP, Эти дополнительные биты данных могут только добавить к вашему общему размеру файла, и они редко нужны.
ImageOptim для Mac
Если вы работаете в OS X и вам требуется мощное приложение для сжатия, не смотрите дальше. ImageOptim это мощный инструмент для сжатия изображений в Интернете – иногда даже лучше, чем Photoshop.

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

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

Если у вас есть похожие трюки или идеи относительно сжатия JPEG, пожалуйста, поделитесь с нами в разделе пост-обсуждения ниже.