Сжатие изображения встречается в любом родном формате мультимедиа. Однако разница между GIF, PNG и JPEG заключается в том, как информация сжимается и отображается на экране.
В Интернете опубликовано так много советов по созданию великолепных графических медиа, и все же многие дизайнеры до сих пор не понимают некоторые основные принципы.
В этом руководстве мы хотели бы поделиться несколькими идеями для правильного сжатия JPEG. Вам необходимо оптимизировать свои изображения, чтобы уменьшить время загрузки веб-страницы, сохраняя при этом достойный уровень качества. Все дело в поиске баланса между размерами файлов и отображением экрана. И для дизайнеров не существует идеального решения.
Требуется немного начальной практики, но как только вы поймете процесс сжатия JPEG, в будущем станет намного проще разрабатывать веб-сайты.
Избегайте сохранения на 100%
Вы должны стараться избегать сохранения изображения в формате JPEG со 100% качеством. Это не приведет к получению максимально возможного «оптимизированного» изображения. Подобный метод фактически рассчитывается по формуле предела оптимизации, которая непомерно увеличивает размер вашего файла.
Даже по сравнению с качеством 90% или 95% вы увидите значительное уменьшение размера файла.
В большинстве случаев рекомендуется сохранять изображения с качеством ниже 90%. Если вы откроете диалоговое окно «Сохранить для Web» в Photoshop, вы заметите, что программа предлагает предустановленные значения, которые вы можете выбрать.
- Низкое — 10%
- Среднее — 30%
- Высокое — 60%
- Очень высокое — 80%
- Максимальное — 100%
Даже в Adobe Photoshop качество изображения на 60% считается «высоким». В то же время, многие веб-разработчики считают безопасным диапазоном качества от 50% до 70%.
Когда низкое качество считается слишком низким?
Значения, которые вы выбираете для оптимизации, полностью зависят от текущего проекта. Вам необходимо учесть, какие типы изображений будут отображаться в максимальном размере – именно они действительно нуждаются в сжатии.
Можно сказать, что значение ниже 30% действительно снижаете базовое качество изображения. Опять же, некоторые дизайнеры уверяют, что 50% является пределом для уменьшения оптимального значения.
Но лучший совет в данном случае, просто попробовать разные настройки и посмотреть, что выглядит лучше всего! Вы не ошибетесь, проведя несколько тестовых исследований по оптимизации изображений JPEG для Интернета.
Варианты сжатия
Сначала мы должны уточнить два термина — «сжатие» и «качество», которые противоположны друг другу.
Это означает, что если вы сохраните JPEG при 40% сжатии, вы получите качество 60% (по сравнению с максимальным качеством 100% без сжатия).
Такие значения являются основным вариантом использования, и их должно быть достаточно при сохранении изображения для Интернета. Обычным пользователям незачем вникать в более глубокие настройки.
Сэмплирование приводит к более сложным вопросам, когда вы конвертируете изображения RGB в YCbCr.
Настройка яркости всегда поддерживается на максимально возможном уровне при сжатии JPEG. С этим значением яркости на отдельном канале легче оптимизировать отдельные значения цвета красного и синего.
Данный алгоритм сжатия известен как подвыборка цветности. Дизайнеры, которые не боятся испачкать руки, с удовольствием прочитают немного больше о данном методе.
В качестве интересного примечания, стоит сказать, что Adobe Photoshop не всегда использует подвыборку для сжатия. Любые изображения, сохраненные в диалоговом окне «Сохранить для Web», будут использовать только подвыборку цветности ниже значения качества 50%.
Различные интернет-ресурсы
В интернете также полно различных видов носителей изображения. У вас могут быть фотографии, иконки, кнопки, значки и тонны другой графики. Однако следует заметить, что сравнивать качество между кнопкой и фотографией просто не имеет смысла.
При использовании фотографий или подробных изображений рассмотрите возможность ссылки на отдельный менее сжатый файл JPEG. Затем вы можете настроить эскизы на вашем сайте с более высокой степенью сжатия и гораздо меньшими размерами файлов.
Единственным недостатком является то, что вам необходимо предоставить два набора изображений для медиа-галереи. Обратите внимание на множество различных графических элементов и рассмотрите методы оптимизации для каждого из них в отдельности.
Использование инструментов сжатия
Возможно, вы захотите организовать файлы изображений, которые можно будет легко найти на вашем сайте. Вы также можете разместить свои фотографии в облачном сервисе, таком как Amazon S3, Google Cloud Storage, или через CDN, что позволит ускорить доставку изображения. Тем не менее, вам нужно использовать какой-нибудь инструмент сжатия, чтобы уменьшить размеры изображений. Любые дополнительные байты, которые вы можете уменьшить для каждого размера файла, имеют решающее значение. И вот некоторые из инструментов, которые вам стоит проверить:
TinyJPG
TinyJPG — это браузерное веб-приложение, в котором вы можете загрузить изображение и убрать все ненужные дополнительные байты для оптимизации размера файла. Инструмент производит сжатие на 100% без потерь, что означает, качество изображения не ухудшится вообще. Вы можете загрузить до 20 изображений за раз.
Если ваш сайт находится на WordPress, вы можете использовать официальный плагин Compress JPEG & PNG images. Этот плагин также подключается к дочернему сайту TinyPNG, который позволит вам оптимизировать изображения в формате PNG.
IrfanView
Это бесплатное программное обеспечение для Windows, которое позволяет просматривать и оптимизировать любой набор больших изображений. Вам понравится этот инструмент, потому что он поддерживает пакетное преобразование из изображений в нескольких каталогах. Вы можете автоматически применять одни и те же функции к сотням изображений JPEG.
Что еще лучше, так это плагины поддержки от сторонних разработчиков. Одним из таких примеров является RIOT (Radical Image Optimization Tool). Этот плагин работает для других подобных графических редакторов с открытым исходным кодом, таких как GIMP.
Он предлагает двойной вид изображения, где вы можете вручную настроить параметры сжатия для каждого из ваших изображений.
Программная поддержка великолепна, а функции RIOT очень просты в использовании. Наряду со сжатием изображений у вас также есть доступ к удалению дополнительных метаданных, таких как EXIF и Adobe XMP. Эти дополнительные куски данных могут только добавить вес к общему размеру вашего файла, и они редко нужны.
ImageOptim для Mac
Если вы используете OS X и вам нужно мощное приложение для сжатия, можете прекратить поиски. ImageOptim — это мощный инструмент сжатия изображений для Интернета — иногда даже лучше, чем Photoshop.
Приложение поддерживает функцию перетаскивания, что позволяет легко оптимизировать большие наборы изображений. Аналогичным образом вы можете запускать команды прямо из терминала и настраивать скрипт оболочки.
Заключение
Несмотря на то, что наши современные скорости подключения к интернету увеличиваются с 4G и предстоящим 5G, вам придется уменьшать размер веб-страниц. Каждый байт в конечном итоге будет стоить чего-то вашим пользователям, а в некоторых странах эта стоимость может быть весьма значительной.
В этой статье мы увидели, как сжимать изображения для уменьшения их размера на веб-странице. Сжатие изображения раньше было чем-то сложным, так как вам необходимо было найти правильный баланс между качеством и содержанием. Также не было и выбора инструментов. Однако теперь, имеется куча вариантов, которые более продвинуты и просты в использовании.
Всем успешной работы и творчества!
0 комментариев