Сжатие изображений для веб-разработчиков

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

Почему сжатие изображений важно для веб-разработчиков?

Одним из факторов, оказывающих влияние на уровень удовлетворения посетителя сайта, является время загрузки страницы. Медленные загрузки изображений могут отпугнуть посетителей и привести к потерям трафика.

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

Как сжимать изображения?

Существует несколько способов сжатия изображений для веб-разработки:

1. Использование онлайн-сервисов

Существует множество онлайн-сервисов, которые позволяют сжимать изображения прямо в браузере. Просто загрузите изображение на сервис, выберите нужные настройки сжатия и скачайте оптимизированную версию изображения.

2. Использование программ для сжатия изображений

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

3. Использование плагинов для CMS

Если вы используете CMS (Content Management System), такую как WordPress, Joomla или Drupal, то вы можете найти плагины, специально разработанные для сжатия изображений. Эти плагины автоматически оптимизируют изображения при загрузке на сайт.

Настройки сжатия изображений

При сжатии изображений необходимо учесть несколько важных факторов:

• Качество изображения: необходимо найти баланс между качеством и размером файла. Часто бывает достаточно сжать изображение на уровне 70-80% от исходного качества.
• Формат изображения: выбор правильного формата изображения также может помочь в сжатии. Например, для небольших иконок можно выбрать формат PNG с прозрачностью, а для фотографий — формат JPEG.
• Разрешение изображения: не загружайте изображения большего разрешения, чем они будут отображаться на сайте. Необходимо подгонять размер изображений под их использование на сайте.

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

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

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

Совет. Контрольный список сжатия изображения

• Сжимайте изображения в правильном формате с минимально приемлемым качеством: отрегулируйте уровень сжатия всех изображений вручную, если это возможно. Автоматизируйте сжатие остальных изображений, чтобы достичь максимально возможного качества. Это поможет улучшить пользовательский опыт на сайте; Узнайте о других забавных способах достижения лучшего сжатия или четкости. Мыслите нестандартно.

Почему важно быть маленьким

Проще говоря, чем больше страница, тем больше времени требуется для загрузки. Есть много исследований, показывающих, что медленные пользователи страницы проводят меньше времени на странице, меньше нажимают на ссылки и рекламу и тратят меньше денег. Небольшие сайты, такие как AutoAnything, которые вдвое сократили время загрузки страниц, продемонстрировали рост доходов на 13 процентов . Исследования крупных сайтов, таких как Amazon, показали, что их доход упал на 1 процент за каждые 100 миллисекунд времени загрузки .

Что хуже, чем заставлять пользователей платить за страницы

Помимо того, что большие страницы негативно влияют на производительность настольных компьютеров, больше всего страдают пользователи мобильных устройств. Страница размером 1 МБ не только загружается на неопределенный срок, но и может существенно повлиять на ваш счет.

Даже так называемые "неограниченные" мобильные планы фактически не имеют таких эффект. Большинство из них предоставляют около 2 ГБ за фиксированную плату, и за превышение этого лимита может взиматься дополнительная плата. Не говоря уже о том, что в мире есть много мест, где нет безлимитных планов и где стоимость загрузки информации является серьезной проблемой для пользователей.

Большие изображения — большая проблема

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

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

Взгляды на алгоритмы сжатия

В основном существуют две степени сжатия изображения: с потерями и без потерь. Алгоритмы сжатия с потерями будут манипулировать исходным потоком данных таким образом, чтобы потерянные данные не могли быть воссозданы во время декомпрессии.

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

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

Если вы ищете что-то более универсальное среди форматов изображений, стоит обратить внимание на. Он использует сжатие, как с потерей, так и без потерь данных, и во многом так же, как формат JPG, позволяет вам определить подходящий уровень качества и размера файла.

Конечно, новый формат пока не поддерживается всеми браузерами , поэтому веб-разработчики, которые уже внедрили его, сейчас сталкиваются с проблемами юзабилити. Несмотря на это 30% экономия, по сравнению с JPG наряду с использованием адаптации формата на уровне сервера доказывают, что WebP — доминирующий формат для любых, где размер изображений представляет.

Рис. 3 — Особенности некоторых форматов поддерживаемых браузерами

Компромисс между качеством и размером

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

Кроме того, как показывает проект imgmin как правило, при сжатии JPG на уровне от 75 до 100 восприятие качества изменяется незначительно:

• для среднего изображения JPEG * видимое * изменение качества от 100 до 75 зачастую незначительно, зато очень заметна разница в размере файла на каждом уровне.

Это значит, что многие изображения выглядят хорошо для обычного пользователя на уровне качества 75 но вдвое меньше размером, чем, если они были на уровне качества 95.
Следующая таблица показывает, сколько крупных веб-сайтов уровень качества колеблется около 75 практически для всех их изображений JPG:

Рис. 4 — уровень качества JPG, использование на Среднем сайтах.

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

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

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

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

Таким образом, формат изображения SVG отличается от других типов файлов тем, что он является векторный формат, который означает, что окончательное изображение создается процедурно с использованием информации о форме, описанной в файле, до создания конкретного окончательного изображения. Когда изображение SVG загружено, оно преобразуется в растр (двумерный массив пикселей, например растровое изображение) перед рендерингом.

Рисунок 5 — Пример растрового изображения (слева) vs. векторное изображение (справа). Обратите внимание, что векторное изображение намного проще и менее детализировано. Это связано с тем, что этот формат не предназначен для создания высококачественных изображений.

Подумайте о SVG как о формате, который позволяет вам хранить «описание» изображения в очень небольшом объеме памяти и генерировать высокие -качество, независимое от разрешения изображение на клиенте, независимо от размера необработанных данных. Одним из ограничений формата SVG является то, что он может использоваться только для представления определенных типов изображений; Другими словами, векторные изображения должны быть упрощены и использовать набор примитивных типов для определения того, как цвета отображаются на экране.

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

Качество изображения, размер и различные разрешения экрана

Одно из Большая проблема, с которой сталкиваются программисты, — это соотношение количества пикселей на мониторе к размеру создаваемых ими изображений. Это означает, что если автор создает изображения для настольного сайта, они, вероятно, были выбраны для просмотра на больших настольных мониторах. Однако мобильные устройства представляют собой проблему, поскольку их экраны намного меньше, а трафик на них намного дороже. Следовательно, пользователи будут загружать изображения большего размера, чем им нужно или которые они могут просматривать.

Есть несколько решений этой проблемы.

Одно из них — предварительно рассчитать размер изображения для каждого возможного разрешения, офлайн. Большинство статических веб-сайтов могут легко сделать это во время сборки, возможно, изменив размер изображений с помощью таких инструментов, как Grunt .

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

Эдди Османи:

Если вы заинтересованы в использовании почвы, чтобы создать этот контент, рекомендую попробовать наш путь к создание адаптивных изображений с использованием шага наряду с ImageAmagic для автоматического генерации до размер изображения. Для тех, кто использует узел / Express, Express-PlancemageImage — это альтернатива, или вы можете создать сценарий, который будет вызывать ImageMagick для вас.

• один нерешенных проблем , но все еще с этим подходом, однако, чтобы найти хорошее решение для управления ростом объема данных. Когда дело доходит до логики, есть надежда, что атрибут srcset решит эту проблему (WebKit Engine, как вы знаете, поддерживает его, Blink намерен реализовать поддержку, FF будет работать в iOS). В то же время, вы можете использовать polyfill для srceset в качестве промежуточного шага.

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

В Reality вы можете сохранить изображение в два раза выше разрешение (масштабирование), но при экспорте в формат с потерями, вы выбираете очень низкое качество (что приводит к лучшей компрессии). Точка состоит в том, чтобы выбрать уровень качества, когда сжатое увеличение изображения меньше, чем сжатое меньшее изображение.

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

Размер изображения, впечатления пользователя и время зарядки

Единственное, что имеет значение — Тот факт, что пользователь воспринимает, что страница загружается быстро. Быть быстрым означает быструю загрузку, поэтому воспринимаемая производительность важнее, чем фактическая скорость.

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

Браузеры не могут использовать первый вариант, поскольку он вызывает медленную загрузку страницы.  Большинство веб — сайтов в сети построены на основе второго варианта. Я уверен, что мы все знаем постепенное «расширение» сверху вниз. Это связано с тем, что изображения обычно хранятся в растрочной последовательности, другими словами, первые байты изображения, которое принимает браузер, можно найти в верхнем левом углу изображения и дальше в горизонтальном порядке. Конечно, если мы храним изображение в противном случае, мы можем изменить последовательность битов изображения, которые изменит способ, которым изображение появится на экране. TA " Прогрессивный" метод кодирования может иметь положительное влияние на пользователя, заставляя вас думать, что страница загружается, быстрее (обратите внимание, что это утверждение и обсуждение зависит от пользователя). Это достигается за счет кодирования нескольких дополнительных версий изображения более низкого разрешения, которое может быть доставлено пользователю быстрее, что позволяет пользователю видеть контуры изображения, так как постепенно становится более четкой, как он загружает.

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

Если вам не нравятся единороги, вы также можете увидеть более подробный пример в блоге Патрика Минан или даже протестируйте свои изображения с помощью интерактивного тестера Патрика.

Использовать эту функцию для изображений чрезвычайно просто: просто сохраните изображения GIF или PNG с параметром « чересстрочный » или изображения JPEG с параметром « прогрессивный "option span" и вашим посетителям станет нравиться время загрузки вашей страницы. Тем не менее, стоит уточнить, что прогрессивные изображения еще не поддерживаются во всех браузерах, и загрузка прогрессивных изображений на таких платформах может фактически снизить производительность.

Прогрессивные изображения

Интернет полон блестящей сети разработчиков, поэтому ни одна статья о сжатии изображений не будет полной без упоминания некоторых замечательных приемов, обходных решений и в целом впечатляющих вещей, сделанных этими разработчиками, которые позволили им создавать впечатляющие небольшие, но высококачественные изображения. К сожалению, это заставляет вас создавать изображения PNG для обеспечения прозрачности. Однако несколько разработчиков придумали обходной путь для этой проблемы. пути для лучшего сжатия и четкости изображения. Например, вы можете разделить данные цвета и прозрачности на два разных файла изображений (например, два файла JPG) и повторно сжать их на клиенте с помощью CANVAS. Хотя это увеличивает количество запросов в сети, экономия размера изображения может быть значительной для разработчиков, у которых на сайте много прозрачных изображений.

Джейк Арчибальд :

Стоит отметить, что может быть быстрее просто использовать -webkit-mask там, где это поддерживается, вместо всего безумия с холстом. К счастью, я создал библиотеку , чтобы помочь вам в этом.

Увеличить сжатие PNG за счет лучшей обработки.

Параметр Deflate в PNG — это кодировщик без потерь, но это не должно останавливать вас от использования предварительной обработки с потерями, если вы хотите. Инструменты обработки изображений, такие как ImageAlpha и ImageOptim , могут сжимать изображение PNG, используя метод с потерями в качестве препроцессора, перед его кодированием в формате PNG. Это создает двухэтапный процесс, в котором сжатие с потерями и без потерь обрабатывается двумя разными приложениями. Результаты впечатляют: уменьшение цветового пространства позволяет сжатию без потерь находить и обрабатывать больше совпадений в файле, что приводит к лучшему сжатию.

После сохранения изображения в формате PNG вы можете переупаковать данные PNG с помощью более продвинутых компрессоры для создания файла PNG меньшего размера. Такие инструменты, как advPNG , возьмут ваш PNG-файл и передадут его через усовершенствованный компрессор Deflate, чтобы получить файл меньшего размера. Вы также можете комбинировать PNGOUT с такими инструментами, как OptiPNG или Zopfli , чтобы получить тот же эффект. Очевидно, что каждая из этих систем дает несколько разные результаты в зависимости от входных данных, поэтому разумно использовать систему, которая сжимает несколько компрессоров и выбирает самый маленький файл. Если вам лень создавать его, ScriptPNG сделает что угодно.

Не все анимации создаются .

Команда SublimeText запустила веб-сайт, на котором они хотели широко использовать анимацию для показать функцию их редактора. Вместо того, чтобы использовать видео или стандартный GIF, они создали свою собственную систему анимации и сжатия для создания красивой анимации с гораздо меньшим размером файла. Этот метод позволяет им отображать высококачественную анимацию на нескольких платформах без необходимости использования сложных плагинов для видео или Flash.

Существует несколько способов создания адаптивных изображений .

Наряду с этим опытомХотя пользователь является наиболее важным элементом веб-сайта, существуют и другие способы создания «адаптивных» веб-сайтов. Недавно они изменили свой подход к работе с адаптивными изображениями. Их метод позволяет клиенту сначала загрузить небольшое изображение (для создания видимости изображения), а затем, при необходимости, получить изображения высокой четкости, используя отложенную загрузку . Вы можете найти более подробное описание этого метода, а также версию с открытым исходным кодом , чтобы попробовать на своем веб-сайте.

Итог

Изображения — это коварный тип контента, который может улучшить качество и удобство использования вашего сайта, но также может помешать вашим усилиям по быстрой загрузке и быстрому реагированию. Прежде чем разместить свой сайт в Интернете, убедитесь, что он соответствует контрольному списку сжатия изображений:

• Сжимайте изображения в правильном формате с минимально приемлемым качеством: по возможности вручную настройте уровень сжатия всех изображений.
• Автоматически сжимайте все оставшиеся картинки для лучшей производительности
• Рассмотрите возможность использования WebP для ваших изображений;
• Сохраняйте изображения с настройками прогрессивной развертки. Это поможет улучшить пользовательский опыт на сайте;
• Узнайте о других способах достижения лучшего сжатия или четкости. Мыслите нестандартно.