Сжатие с потерями и без потерь: руководство для начинающих по обоим форматам
Опубликовано: 2022-01-15Цифровые изображения — неотъемлемая часть Интернета, и трудно создать какой-либо контент без каких-либо медиа. Скромное неподвижное изображение — отличный способ придать дополнительный контекст вашему письму.
Однако размер файла изображения может быть огромным без оптимизации. Сжатие с потерями и сжатие без потерь является распространенным соображением, потому что каждое из них может уменьшить размер изображения, хотя также необходимо учитывать компромиссы в отношении качества.
Вам почти всегда нужно применить некоторое сжатие к изображению. Это поддерживает качество на том уровне, который вы указали как приемлемый, при сохранении размера файлов. Выбор правильного уровня сжатия будет зависеть от ваших конечных целей и требований.
В этом посте мы рассмотрим сжатие с потерями и без потерь. Далее мы будем говорить о процессе, который требуется изображению, чтобы «привести его в форму», о том, что такое сжатие, и о многих других аспектах оптимизации ваших изображений.
Различия между потерями и без потерь
Когда дело доходит до любого сжатия цифровых изображений, есть несколько различных форматов на выбор. Иногда они будут иметь другие названия в зависимости от многих факторов. Однако на базовом уровне вы найдете два типа:
- Сжатие с потерями: целью здесь является обеспечение наименьшего возможного размера файла для изображения. Таким образом, качество изображения часто находится в конце списка приоритетов.
- Сжатие без потерь: вы по-прежнему обнаружите значительное уменьшение размера файла с этим форматом сжатия, но изображение не будет страдать от артефактов и других проблем.
В большинстве случаев ваше решение о том, какой формат использовать, будет зависеть от вашей конечной цели: вам нужны крошечные файлы или вы сосредоточены на сохранении качества?
Сжатие с потерями навсегда удалит данные, которые считает ненужными, из изображения. Для этого используется множество различных методов, что приводит к гораздо меньшим размерам файлов.
Сжатие без потерь также удаляет данные, но при необходимости может восстановить оригинал. Цель состоит в том, чтобы сохранить высокое качество, но уменьшить размер файла.
Есть несколько способов добиться этого, но результат часто один и тот же. Чтобы найти правильный вариант для ваших нужд, давайте сначала сделаем шаг назад и рассмотрим основы изображений и сжатия в целом.
Элементы цифрового изображения
Подобно программному обеспечению и веб-разработке, часто существует «стек» для передачи изображения с камеры в Интернет.
Изображение начинается как «сырые» данные (отсюда и название RAW). Это похоже на код приложения: фрагменты, строки и значения преобразуются в фон с цветом, заполнителями изображений, динамическими элементами и многим другим.
Для изображения файл RAW представляет несколько иное представление изображения в зависимости от производителя камеры, программного обеспечения для редактирования, алгоритма цветового пространства и многого другого. Оттуда вы редактируете изображение и экспортируете его в один из нескольких форматов файлов (подробнее об этом позже):
Стандартное цифровое изображение состоит из нескольких различных элементов:
- Тип файла: различные типы обеспечивают качество, которое может подходить или не подходить для окончательного изображения. Главное — выбрать наиболее подходящий тип файла для приложения.
- Разрешение: вы часто будете видеть, что это выражается в мегапикселях (MP), но вы также будете использовать пиксели на дюйм (PPI) или точки на дюйм (DPI). Более высокие разрешения обеспечивают лучшее качество, но они также увеличивают исходный размер файла.
- Битовая глубина: этот аспект определяет цветовую информацию в изображении. Низкая битовая глубина будет отображать только несколько цветов, в то время как высокая битовая глубина потенциально может отображать миллионы цветов одновременно. Как правило, чем выше, тем лучше.
- Размеры: это физическое пространство, которое занимает изображение. Например, 1000 пикселей x 500 пикселей могут определять общий размер изображения.
- Цветовое пространство: это алгоритм, который определяет, как отображаются цвета. Каждое цветовое пространство настроено по-разному, и это часто зависит от предпочтений фотографа.
Сочетание этих элементов позволяет получить финальное изображение разного качества. Например, большая фотография в формате JPEG с высоким разрешением и большой глубиной цвета обеспечит высочайшее качество и резкость:
Напротив, даже изображение с большими размерами и возможностью отображения большого количества цветов может выглядеть плохо при низком разрешении:
Этот баланс заключается в том, как вы разрабатываете основной образ перед применением сжатия. Тем не менее, формат, который вы используете для изображения, имеет большую роль в конечном качестве.
Как работает оптимизация веб-изображений
Поскольку сжатие изображений в общем смысле остается тем же самым, вы можете применять стандартные правила к тому, как вы оптимизируете изображения для Интернета.
Мы освещаем многие из этих концепций в других местах блога Kinsta, но стоит дать краткое описание для справки:
- Используйте разрешение 72 PPI, так как это стандарт для Интернета. Вы можете использовать более высокое значение PPI/DPI по причинам архивации, но мы предполагаем, что вы публикуете в Интернете.
- Установите «длинный край» изображения на 2048 пикселей, так как это оптимально для многих различных приложений.
- Используйте 8-битную глубину цвета, если у вас есть такая возможность.
- Перед публикацией пропустите изображение через инструмент сжатия и оптимизации.
Это простой формат, который может дать вам стабильные результаты, хотя сжатие и оптимизация — это то, о чем мы поговорим в оставшейся части этой статьи.
С этой целью давайте рассмотрим преимущества и недостатки сжатия с потерями и без потерь.
Как сжатие изображений может помочь вашим веб-изображениям
В общих чертах, «сжатие» сжимает минимум и максимум ближе друг к другу. Например, сжатие увеличивает самую низкую громкость в музыке и уменьшает самую высокую. Это делает средний уровень громче для уха.
Для изображений сжатие — это скорее восстановительный процесс. Это означает, что больше внимания уделяется удалению данных из вашего изображения, чтобы уменьшить размер файла, сохраняя при этом максимально высокое качество.
Существует множество различных проприетарных алгоритмов, помогающих уменьшить размер файла изображения. Во многих случаях они являются собственностью конкретной компании. Вы найдете множество стандартов сжатия «с потерями» и «без потерь», каждый из которых имеет уникальные дескрипторы:
Все это говорит о том, что применение сжатия изображений имеет множество преимуществ, которые не являются эксклюзивными для определенного формата:
- Вы можете уменьшить размер файлов, что повысит производительность вашего сайта.
- Кроме того, у сервера вашего сайта будет меньше работы, что повлияет на производительность.
- Небольшие размеры файлов помогают сократить выбросы сервера. Таким образом, вы помогаете внести свой вклад в устойчивое и этичное будущее.
- Вы можете отображать почти идеальное и сравнимое качество в зависимости от выбранного вами алгоритма и качества сжатия.
Подобно созданию общедоступного изображения, игре с различными значениями сжатия, использованию конкретной компании и выбору правильного алгоритма жизненно важно найти результаты, которые работают для вас.
Плюсы и минусы сжатия с потерями
Сжатие с потерями уменьшает размер файла изображения почти до исключения всех других аспектов. Принцип работы алгоритма заключается в постоянном удалении данных. Это может быть столь же разрушительным, как это звучит.
Хотя мы не будем слишком углубляться в детали, знайте, что некоторые из удалений сжатия с потерями данных видны на изображении. Идея состоит в том, чтобы предложить наилучшее представление исходного высококачественного изображения с меньшим весом, а это означает, что некоторые данные не будут включены.
В целом, использование сжатия с потерями имеет несколько преимуществ:
Хотите знать, как мы увеличили наш трафик более чем на 1000%?
Присоединяйтесь к более чем 20 000 других пользователей, которые получают нашу еженедельную рассылку с советами по WordPress, посвященными инсайдерской информации!
- Размеры файлов будут небольшими — в некоторых случаях менее 10 килобайт (КБ).
- Потеря качества во многих случаях будет приемлемой, несмотря на наличие артефактов.
Это подводит нас к недостаткам использования сжатия с потерями — качество изображения снижается при любом уровне сжатия:
Вы обнаружите эти цветовые полосы — когда цветовые оттенки не отображаются должным образом — и в некоторых случаях будет видна потеря четкости краев. Изображения с меньшим количеством цветов будут показывать меньше этого, но снижение четкости все равно будет присутствовать.
Кроме того, ухудшение качества изображения является постоянным свойством процесса сжатия. Это означает, что нет никакого способа отменить эффекты на более позднем этапе.
Несмотря на недостатки, сжатие с потерями отлично подходит для Интернета и производительности вашего сайта. Крошечные размеры файлов не всегда приводят к зернистости изображений, хотя вы можете (конечно) довести дело до крайности:
Однако с потерями — не единственный вариант. Сжатие без потерь — альтернатива для владельцев сайтов, заботящихся о качестве.
Плюсы и минусы сжатия без потерь
Сжатие без потерь делает то, что написано на этикетке: максимально сжимает размер файла изображения, не влияя на видимое качество. Он делает это, удаляя метаданные изображения, которые могут занимать лишнее место:
Алгоритм сжатия без потерь также ищет повторяющиеся последовательности пикселей, а затем кодирует ярлык для их отображения. Например, возьмем «Интерфейс командной строки». Вы часто будете определять его аббревиатуру один раз, а затем использовать «CLI» (или выбранную вами аббревиатуру), чтобы молниеносно ссылаться на нее.
Сжатие без потерь работает точно так же, но менее разрушительно. Хотя удаление метаданных не будет обратимым, некоторое сжатие будет, что делает его гибким алгоритмом для многих применений.
Плюсы использования сжатия без потерь связаны с сохранением качества:
- Сжатие без потерь сохраняет максимальное качество изображения по сравнению со всеми другими алгоритмами.
- Lossless отлично подходит для архивных целей. Например, фотограф может сбалансировать ресурсы хранения с изображением, которое сохраняет больше всего данных.
- Lossless является предпочтительным алгоритмом сжатия для изобразительного искусства: фотографии, графического дизайна, цифрового искусства и многого другого. Комбинируя алгоритм без потерь с надлежащей глубиной и разрешением, можно получить копию «один к одному».
Тем не менее, следует отметить, насколько хорошо сжатие без потерь служит определенным нишам: диапазон приложений невелик. Это снижает его общую доступность.
Все планы хостинга Kinsta включают круглосуточную поддержку наших опытных разработчиков и инженеров WordPress. Общайтесь с той же командой, которая поддерживает наших клиентов из списка Fortune 500. Ознакомьтесь с нашими планами!
Вот некоторые другие недостатки сжатия без потерь, которые следует учитывать:
- Если на веб-сайте используется много изображений, сжатие без потерь может быть не оптимальным для их отображения. Это связано с тем, что в большинстве случаев вы захотите использовать меньшие размеры файлов в подобных ситуациях.
- Хотя сжатие уменьшает размер файла, алгоритмы без потерь не изменяют данные изображения так сильно, как с потерями. Из-за этого вы можете увидеть только незначительное уменьшение размера, а не экстремальные результаты похудения.
Далее мы рассмотрим самый быстрый (и потенциально лучший) способ сделать это.
Как выбрать между потерями и без потерь
На этом этапе вы понимаете разницу между сжатием с потерями и сжатием без потерь. Однако вы все еще можете не знать, какой алгоритм лучше всего использовать на вашем сайте.
Следует рассмотреть две ситуации:
- Для большинства случаев использования в Интернете приемлемо сжатие с потерями.
- Если вы хотите отобразить фотографию или сфотографированное искусство, сжатие без потерь подойдет вам лучше.
Эти соображения основаны на использовании одного из стандартных форматов веб-изображений, таких как JPEG, PNG или GIF. Однако ваши потребности в сжатии могут отличаться в зависимости от более современных форматов, таких как HEIC и WebP.
Мы бы даже сказали, что если вы не размещаете фотографии на своем сайте, сжатие с потерями должно быть вашим выбором по умолчанию. WordPress сжимает изображения по умолчанию, что свидетельствует о том, что сжатие с потерями подходит практически для любого приложения.
Использование онлайн-сервиса сжатия для оптимизации изображений
Существует множество способов сжатия изображений перед их размещением на сайте. Например, вы можете применить сжатие на этапе редактирования. В любом случае это может быть побочным продуктом конвертации из форматов RAW.
Тем не менее, популярным выбором является один из многих онлайн-сервисов. Каждый из них будет предлагать набор алгоритмов и примерный пользовательский интерфейс (UI). Более того, у большинства из них есть бесплатные услуги, по крайней мере, для того, чтобы опробовать приложение, прежде чем совершить его.
Мы рассмотрим несколько вариантов в нашей статье об оптимизации изображений, хотя это плагины для WordPress, которые подключаются к интерфейсу прикладного программирования (API). Хорошая новость заключается в том, что многие из этих плагинов также предоставляют онлайн-интерфейс. Например, рассмотрим ShortPixel:
Здесь вы будете перетаскивать изображения в загрузчик, а затем ждать, пока приложение их сожмет и обработает. Однако сначала вам нужно выбрать алгоритм, так как процесс начнется сразу.
Выбор прост: две формы сжатия с потерями («с потерями» и «глянцевая») и вариант без потерь. Интерфейс ShortPixel хорошо объясняет разницу между каждым алгоритмом, и вы можете загружать изображения за считанные секунды.
Хотя оба могут справиться с вашими требованиями, интерфейс Imagify выглядит изящнее и профессиональнее, чем у ShortPixel. Здесь также есть три «уровня сжатия» — Нормальный, Агрессивный и Ультра:
Небольшая разница здесь в том, что Imagify начинает со сжатия без потерь и доходит до алгоритма с потерями и сильными артефактами. Однако есть несколько других опций, которых вы не найдете в других решениях.
Во-первых, вы можете сохранить данные EXIF для своего изображения и даже изменить их размер после преобразования. Иногда это бесценно, особенно если вы хотите применить уровень сжатия, который в противном случае может удалить данные EXIF или ограничить изменение размера изображения.
Как и его мифический тезка, Kraken может обрабатывать ваши изображения и применять различные типы сжатия. Большинство пользователей выберут либо Lossy, либо Lossless типы.
Однако есть и экспертный режим:
Это позволяет вам настроить сжатие в соответствии с вашими потребностями, среди других опций. Например, вы можете настроить уровни сжатия JPEG и PNG, выбрать сохранение метаданных изображения и даже работать с подвыборкой цветности для дальнейшего изменения цветов.
Резюме
Изображения могут показаться простым аспектом вашего сайта: вы берете файл, загружаете его в WordPress, а затем добавляете блок изображения для его отображения.
Однако в процесс подготовки изображения для Интернета входит гораздо больше, чем вы можете себе представить. Выбранный формат сжатия может повлиять на размер файла, качество изображения и многое другое.
В этом посте мы рассмотрели сжатие с потерями и без потерь и резюмировали, какой из них вам следует выбрать. Несмотря на баланс между качеством и размером, сжатие с потерями идеально подходит для большинства случаев использования в Интернете. Фотографы или те, кто беспокоится о вмешательстве в качество изображений, захотят использовать сжатие без потерь, хотя в отношении размера файла преимуществ меньше.
На какой стороне вы стоите в битве между сжатием с потерями и сжатием без потерь? Дайте нам знать ваши мысли в разделе комментариев ниже!