Для чего нужна оптимизация размеров файла
Рекомендации
- Используйте WordPress-плагины, которые сжимают и оптимизируют изображения на внешних серверах. Это снижает нагрузку на ваш собственный сайт.
- Используйте векторные изображения, где это только возможно.
- Используйте CDN для быстрого предоставления изображений посетителям со всего мира.
- Используйте эффекты CSS3 как можно чаще.
- Сохраняйте изображения в подходящем разрешении. При этом помните, что WordPress поддерживает адаптивные изображения для их предоставления без изменения размера с помощью CSS.
- Используйте веб-шрифты вместо текста внутри изображений – они выглядят лучше при масштабировании и занимают меньше места.
- Уменьшайте глубину цвета для использования меньшей цветовой палитры.
- Используйте сжатие с потерей качества, где только возможно.
- Экспериментируйте для поиска наилучших установок для каждого формата.
- Используйте GIF, если вам нужна анимация.
- Используйте формат PNG, если вам требуется высокая детализация и разрешение.
- Используйте формат JPG для фотографий общего вида и скриншотов.
- Автоматизируйте процесс оптимизации изображений.
- Используйте формат WebP в Google Chrome для отображения изображений меньшего размера.
Как только оптимизируете изображения, ваш сайт сразу понравится поисковым системам и будет быстрее загружаться.
Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, отклики, лайки, подписки!
Представляем вашему вниманию действенные советы по оптимизации изображений, которая позволит ускорить работу сайта. Сегодня мы рассмотрим такие темы, как размеры изображения, типы файлов, уровни компрессии, а также дадим некоторые рекомендации по подбору инструментов.
Что же касается сайтов, посвященных фотографии, то здесь наиболее тормозящим фактором являются изображения, в каком бы размере и разрешении они ни были. Поэтому важно уделять отдельное внимание размеру ваших изображений и их оптимизации.
Изменения в Pillow
Флаг Optimize
Это одно из самых простых изменений, которые мы сделали: передать Pillow ответственность за дополнительную экономию размера файла за счёт времени CPU ( optimize=True ). По определению, это никак не отразится на качестве фотографий.
Для JPEG этот флаг означает указание энкодеру найти оптимальный код Хаффмана, сделав дополнительный проход при сканировании каждого изображения. Каждый первый проход, вместо записи в файл, вычисляет статистику вхождений по каждому значению, эта информация нужна для идеального кодирования. В стандарте PNG используется zlib, так что флаг оптимизации в данном случае указывает энкодеру использовать gzip -9 вместо gzip -6 .
Такое изменение было просто сделать, но выяснилось, что оно не является идеальным решением, сокращая размер файлов всего на несколько процентов.
Progressive JPEG
При сохранении JPEG можно выбрать несколько различных типов:
- Baseline JPEG, которые загружаются сверху вниз
- Progressive JPEG, которые загружаются от размытых к чётким. Опцию прогрессирующих изображений легко активировать в Pillow ( progressive=True ). В результате, качество субъективно повышается (так и есть, легче заметить частичное отсутствие изображения, чем его неидеальную резкость)
Пример, как работает рендеринг Baseline JPEG
Пример, как работает рендеринг Progressive JPEG
Выбор правильного формата файла
Существует сразу несколько форматов файлов, которые можно использовать для сжатия изображений:
- PNG – этот формат позволяет получать изображения высокого качества, но при этом размер файла остается большим.
- JPEG – использует оптимизацию с потерями и без потерь качества. Вы можете регулировать уровень качества, чтобы достичь наиболее подходящего баланса.
- GIF – формат поддерживает всего 256 цветов. Это лучшее решение для анимированных изображений. Он использует только сжатие без потерь.
Есть еще несколько форматов, таких как JPEG XR и WebP. Но не все они поддерживаются браузерами. Поэтому лучше использовать JPEG (или JPG) для полноцветных изображений и PNG для простых картинок.
Оптимизатор изображений ShortPixel
Бесплатный плагин ShortPixel Image Optimizer позволяет сжимать 100 изображений в месяц. Он работает с множеством форматов, включая PNG, JPG, GIF, WebP и даже PDF. Он выполняет сжатие изображений с потерями и без потерь. Плагин конвертирует цветовую модель CMYK в RGB. При оптимизации создается резервная копия оригинальных файлов, что позволяет при желании восстановить их вручную. Данный плагин также поддерживает массовую конвертацию файлов.
Заключение
ImageKit упрощает большую часть работы, которую вам пришлось бы делать, независимо от того, обрабатываете ли вы изображения вручную или с помощью специального плагина. Также ImageKit гарантирует, что все изображения сайта будут оптимизированы в полной мере.
Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, дизлайки, отклики!
Google не любит медленные сайты. К счастью, можно уменьшить размер файлов изображений для повышения производительности вашего сайта. Но из-за этого их качество ухудшается. Как решить эту дилемму?
1. Правильный выбор размера изображений
Предположим, что на Unsplash вы ищете несколько изображений для сайта.
Пример фото, которое вы можете найти на Unsplash.
В отличие от платных хранилищ фотографий, которые позволяют выбрать размер или формат загружаемого файла, здесь этого функционала нет.
После скачивания изображения, вы поймете, что нужно изменить его размер.
Оригинальные размеры изображения от Unsplash : 5591×3145 пикселей.
Не нужно использовать на сайте изображения объемом более 1 МБ и размером более 1200 и 2000 пикселей. Кроме этого мобильно оптимизированные сайты отображают изображения различных размеров в зависимости от устройства или браузера, на котором они просматриваются.
Вот чего вы не должны делать:
- Изменять размеры изображений по одному. Это отнимает много времени и будет неэффективно.
- Полагаться на то, что браузер сможет подстроить размер изображения самостоятельно.
Вместо этого лучше интегрировать сервер изображений (на своем веб-хостинге) с ImageKit. Также можно использовать медиа-библиотеку ImageKit для хранения ваших файлов.
Вот как просто загрузить новый файл в медиа-библиотеку ImageKit.
После интеграции ImageKit начнет контролировать размеры используемых изображений.
ImageKit позволяет контролировать размер изображений.
Вот как это происходит:
- Параметр Image Origin сообщает ImageKit, откуда нужно взять изображение для оптимизации. В данном случае это медиа-библиотека ImageKit.
- Параметр Old Image URL указывает, где располагаются исходные изображения.
- Блок New Image URLs объясняет, как можно использовать оптимизированные изображения.
Формула достаточно проста: вы берете оригинальный URL-адрес изображения и меняете его на URL, предоставленный ImageKit.
Для изменения размеров изображений можно использовать параметры преобразования. Например, это фотография, взятая с Unsplash, размещена на моем сервере.
Как отображается полноразмерное изображение, взятое с Unsplash.
Затем я поменяю URL на адрес, предоставленный ImageKit. После чего добавлю параметры изменения размера изображения и добавлю оставшуюся часть URL-адреса.
Вот что происходит, когда я использую ImageKit для автоматического изменения размера изображения до 1000×560 пикселей.
ImageKit позволяет определять, как нужно изменить размер изображений.
Чтобы создать измененное изображение, я преобразовал URL-адрес ImageKit в следующий:
Именно параметры width (w-) и height (h-) уменьшили размеры файла. Теперь изображение не настолько четкое, как исходное. Но это потому, что его сжали на 80%.
Результат изменения размера изображений с помощью ImageKit .
Ранее это был файл объемом 3,6 МБ и размером 5591×3145 пикселей. Теперь он весит 128 КБ, а размер изображения стал 1000×560 пикселей.
ImageKit позволяет изменять размеры изображений с помощью преобразования на основе URL. Это работает следующим образом:
- Вы сохраняете одно мастер-изображение в медиа-библиотеке ImageKit.
- ImageKit использует несколько методов, чтобы уменьшить размер изображения.
- Затем можно использовать параметры сжатия или обрезки ImageKit для изменения каждого конкретного изображения в зависимости от пользовательского устройства.
Compress JPEG & PNG images
Плагин TinyPNG использует сервисы TinyJPG и TinyPNG для оптимизации изображений в форматах JPG и PNG. Для экономии места плагин конвертирует CMYK в RBG. Он сжимает файлы JPEG до 60%, а файлы PNG до 80% без видимой потери качества изображения. У него нет ограничений на размер обрабатываемого файла.
Эффект
Насколько каждое из этих улучшений было важным для нас? Мы начали со случайной выборки из 2500 бизнес-фотографий Yelp, пропустили их через наш конвейер обработки и измерили изменение размера.
- Изменения в настройках Pillow дали экономию 4,5%
- Определение больших PNG дало экономию 6,2%
- Динамическое качество дало экономию 4,5%
- Переход на энкодер mozjpeg дал экономию 13,8%
Изменение среднего размера файла со временем, у CDN (вместе с другими файлами, которые не являются изображениями)
Оптимизация картинок для сайта - рекомендации и советы
Основная задача оптимизации – это получение баланс между наименьшим размером файла и приемлемым качеством изображения . Одним из распространенных способов является простое сжатие файлов перед их загрузкой в WordPress. Для этого используют Adobe Photoshop или Affinity Photo. А также плагины, которые мы подробно рассмотрим ниже.
Что будет, если использовать неоптимизированные изображения
Большие и несжатые изображения сильно замедляют загрузку страницы. Вот что будет:
Большие и несжатые изображения дольше загружаются, масштабируются и рендерятся
Браузер запрашивает и загружает изображение – 2400 х 1350 и 2.5Мб!
В зависимости от дизайна сайта HTML или CSS уменьшают размер изображения, чтобы оно вписалось в область превью 300 х 169.
Браузер рендерит масштабированное изображение на странице.
Используя неоптимизированное изображение, вы заставили пользователей загружать данных больше, чем нужно. Вот почему:
Нужно было изображение 300 х 169, а вы использовали 2400 х 1350.
Изображение экспортировалось в максимальном качестве 12/100% — это уровень для печати.
… или же изображение было взято напрямую с телефона/камеры/интернета, а значит, там могут храниться метаданные и цветовые профили, а качество может быть завышенным.
Если эти шаги повторяются для нескольких изображений, то все накладывается и приводит к замедлению работы веб-страницы.
Инструменты и программы для оптимизации
Существует множество инструментов и программ для оптимизации изображений. Лично мы – большие поклонники Affinity Photo .
Сжатие фотографии в Affinity Photo
Ниже перечислено несколько инструментов для оптимизации изображений:
Оптимизации
Во-первых, нужно решить, обрабатывать файлы самим или позволить CDN-провайдеру магическим образом изменить наши фотографии. Поскольку мы ставим приоритетом высокое качество контента, то имеет смысл самим оценить варианты и потенциальные компромиссы между размером и качеством. Мы приступили к исследованию текущего положения дел с оптимизацией размера файлов — какие изменения могут быть сделаны и как поменяется размер/качество с каждым из них. По окончании исследования мы решили работать по трём основным направлениям. Остальная часть статьи посвящена рассказу о том, что мы сделали и какую выгоду извлекли из каждой оптимизации.
- Изменения в Pillow
- Флаг Optimize
- Progressive JPEG
- Изменения в логике фотоприложения
- Распознавание больших PNG
- Динамическое качество JPEG
- Изменения в энкодере JPEG
- Mozjpeg (треллис-квантование, кастомная матрица квантования)
Оптимизация с потерями и без потерь
Оптимизация с потерями – это «фильтр», который убирает некоторые данные и ухудшает качество изображения. Но при этом размер файла изображения существенно уменьшается. Для этого можно использовать такие программы как Adobe Photoshop, Affinity Photo или любой другой графический редактор.
Оптимизация без потерь качества – сжатие данных без снижения качества изображения. Выполнить сжатие без потери качества можно с помощью Photoshop, FileOptimizer или ImageOptim .
Лучший способ – это протестировать различные техники сжатия, чтобы выбрать наиболее подходящую для каждого изображения или формата.
Что такое оптимизация изображений?
В практических целях мы сосредоточимся на проблемах, связанных с размером неоптимизированных изображений. Однако оптимизация изображений затрагивает и другие области (например, перестройку в браузере).
Проще говоря, меньше размер файла = меньше время загрузки = быстрее загружается страница. Основные концепции оптимизации изображений сводятся к размерам изображения (визуальный размер, ширина и высота) и сжатию (качество изображения и т.д.).
Разрешение сильно влияет на размер файла
Изображения с большим разрешением весят больше. Если загружать изображение в максимальном размере для отображения, то браузеру не нужно будет скачивать ненужные данные и тратить время на масштабирование.
Сжатие
В самом простом определении алгоритмы сжатия с потерями ищут и уменьшают избыточные пиксели внутри изображения. Чем активнее вы будете, тем больше вырежется пикселей, что снизит качество.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Несжатые изображения сохраняют все данные о пикселях, а также выглядят чище и четче – но и весят больше
Самый простой пример сжатия – операция «Экспортировать для веб» в фотошопе. Необходимо выбрать качество экспорта с наилучшим соотношением веса и качества.
Сжатые изображения хуже по качеству – заметны артефакты и потеря деталей и цветов
В этом случае вы выполняете сжатие с потерей качества. То есть чем меньше вес файла, тем меньше качество изображения. Читайте подробнее о сжатии с потерями по ссылке.
Сжатие без потерь – метод, в котором качество изображения не меняется, а данные, из которых состоит изображение, более эффективно и компактно организуются, что приводит к уменьшению веса файла.
Современные компрессоры изображений используют продвинутые алгоритмы на основе как сжатия с потерями, так и без потерь, чтобы сжать изображение и снизить размер файла без потери качества.
Еще больше оптимизации
Помимо разрешения и сжатия оптимизация изображений включает в себя удаление лишних данных, ненужных пользователю.
Пользователи не видят метаданные, поэтому их нужно вырезать
В файле изображения есть слои данных, невидимые обычному пользователю. К таким данным относятся EXIF, информация о цветовом профиле, а также дата/положение.
Если удалить эти данные, то останутся только видимые пиксели – реальные данные, видимые пользователю – что уменьшит вес изображения.
Что будет, если использовать оптимизированные изображения
Уменьшенные и сжатые изображения быстрее загружаются и рендерятся
Браузер запрашивает и загружает изображение – 300 х 169 и 68Кб!
HTML/CSS масштабирование не требуется, поэтому браузер рендерит изображение на странице как есть.
В результате изображения на сайте намного быстрее загружаются и рендерятся.
«Работа с масштабированными изображениями» и адаптивный веб
У вас есть адаптивный дизайн, а GTmetrix советует «работать с масштабированными изображениями». И тут возникает конфликт. Вы можете задаться вопросом: «Как мне использовать адаптивный дизайн, если я должен работать с масштабированными изображениями? Не будут ли мои изображения плохо выглядеть на определенных брейкпоинтах?»
Адаптивный дизайн изменяет размер и масштабирует изображения, поэтому невозможно использовать изображения с тем размером, который отображается на экране, так как вьюпорт изменяется.
Под советом «работать с масштабированными изображениями» имеется в виду, что нужно работать с изображениями, не сильно отличающимися от масштаба.
Тогда основное правило меняется на «работать с изображениями на максимальном размере отображения в дизайне». Чтобы изображения хорошо смотрелись на ретина экранах, их можно увеличить в два раза от максимального размера.
В адаптивном дизайне тоже придется масштабировать изображения
Так вы получите максимальную гибкость и адаптивный дизайн, а также оптимальное качество на дисплеях с высокой плотностью пикселей. GTmetrix позволяет увеличивать изображения в два раза относительно рендера на экране перед вычетом очков (страницы анализировались на вьюпорте 1024 х 768).
Также существует атрибут srcset, а также обработка адаптивных изображений в CMS. Эти темы стоит обсудить более подробно, но мы лучше напишем для этого отдельную статью.
А как вы оптимизируете изображения?
Это объясняющее руководство должно дать вам хорошее понимание базовых концепций оптимизации изображений. В следующих статьях мы покажем вам, как правильно сжимать и масштабировать изображения, чтобы вы могли оптимизировать размер страниц на сайте.
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
4. Сохранение и получение изображения с внешнего сервера
Существует два способа получения изображений от ImageKit. Первый – это загрузка изображений в хранилище сервиса.
ImageKit позволяет хранить используемые изображения в своей медиа-библиотеке.
Второй способ – интеграция с вашим сайтом или внешним хранилищем. В этом случае вы получаете конечные URL.
ImageKit интегрируется с системами управления контентом и сторонними хранилищами.
Эксперимент: оптимизация изображений
Мы решили провести свое небольшое исследование, чтобы показать вам как оптимизация изображений влияет на скорость работы WordPress-сайта.
Качество сжатия против размера
Ниже приведен пример, демонстрирующий, что происходит с изображением при сильном сжатии. К первому изображению применили низкую степень сжатия. Это обеспечило наилучшее качество, но и больший размер файла. Ко второму изображению применили высокую степень сжатия. В результате получили изображения плохо качества с меньшим размером файла.
Примечание : Объем оригинального изображения составляет 2,06 Мб.
Низкая степень сжатия (высокое качество) JPG – 590 Кб
Высокая степень сжатия (низкое качество) JPG – 68 Кб
Размер первого изображения составляет 590 Кб. Это довольно много для одной фотографии. Второе изображение выглядит ужасно, но при этом весит всего 68 Кб.
Применим к изображению среднюю степень сжатия. В результате мы получили хорошее качество при размере файла в 151 Кб. Это почти в четыре раза меньше размера оригинальной фотографии. Для обеспечения наилучшей производительности сайта изображения в формате PNG не должны весить более 100 Кб.
Средняя степень сжатия (отличное качество) JPG – 151 Кб
3. Сжатие изображений
Теперь поговорим о сжатии изображений. Они бывают двух типов:
Используется в форматах PNG и GIF. Чтобы сжать файл, из него удаляются метаданные. Благодаря чему целостность изображения остается неизменной, но и сжатие файлов не так существенно.
Применяется в форматах JPG и WebP. Чтобы сжать файл, некоторые части изображения «теряются». В большинстве случаев это едва заметно.
По умолчанию ImageKit устанавливает показатель оптимизации на 80%, что позволяет уменьшить размер файла на 20-25%.
ImageKit позволяет выбрать уровень сжатия с потерями, который нужно применить к файлам JPG.
Также не забудьте активировать дополнительные параметры сжатия.
ImageKit предоставляет дополнительные настройки оптимизации изображений JPG и PNG.
Параметр Save a Copy сохраняет исходные изображения на сервере ImageKit. Второй параметр (Preserve Image Metadata) позволяет применять сжатие без потерь, когда это возможно.
Последняя настройка PNG Image Compression Mode позволяет установить уровень оптимизации без потерь для PNG: максимальный, минимальный или нулевой.
Сравнение оригинального и сжатого JPG-изображения.
Optimole
Optimole автоматически уменьшает размер файлов без вашего участия. При этом он выдает идеальный размер картинки для пользователя.
Плагин включает в себя функцию отложенной загрузки и замены изображений при медленном интернет-соединении. Данная функция выгодно выделяет этот плагин из множества других решений. Данный плагин автоматически определяет браузер пользователя и поддерживает формат WebP. Все изображения, которые сжимает плагин Optimole, обслуживаются через быструю CDN- службу.
Что значит оптимизировать изображения?
Оптимизация изображений представляет собой процесс уменьшения размера файла с помощью плагина или скрипта. Существует два способа сжатия изображений – с потерями качества и без потерь.
Несжатые файлы JPG
Мы загрузили шесть несжатых файлов JPG на наш тестовый сайт. Размер каждого из них превышал 1 Мб. Общее время загрузки составило 1,55 секунды, а общий размер страницы -14,7 Мб.
Тест скорости передачи данных несжатых файлов JPG
Исходные данные
Yelp хранит пользовательские фотографии уже 12 лет. Мы сохраняем lossless-форматы (PNG, GIF) как PNG, а все остальные форматы в JPEG. Для сохранения файлов используются Python и Pillow, а загрузки фотографий начинаются примерно с такого сниппета:
После этого мы начинаем искать варианты для оптимизации размера файла без потери качества.
Изменения в логике фотоприложения
Распознавание больших PNG
Yelp работает с двумя форматами для пользовательского контента — JPEG и PNG. JPEG отлично подходит для фотографий, но обычно не справляется с высококонтрастным дизайнерским контентом (таким как логотипы). В отличие от него, PNG сжимает изображение абсолютно без потерь, отлично подходит для графики, но слишком громоздок для фотографий, где маленькие искажения всё равно не заметны. В тех случаях, когда пользователи загружают фотографии в формате PNG, мы можем сэкономить много места, если распознаем такие файлы и сохраним их в JPEG. Один из основных источников фотографий PNG на Yelp — это скриншоты с мобильных устройств и приложений, которые изменяют фотографии, накладывая эффекты и добавляя рамки.
Слева: типичный скомбинированный PNG с логотипом и рамкой. Справа: типичный PNG, полученный со скриншота
Мы хотели уменьшить количество таких необязательных PNG, но было важно не переусердствовать, изменяя форматы или ухудшая качество логотипов, графики и т. д. Как мы можем определить, что изображение является фотографией? По пикселям?
Проведя проверку на экспериментальной выборке из 2500 изображений, мы выяснили, что сочетание размера файла и количества уникальных пикселей позволяет довольно точно определить фотографии. Мы генерируем уменьшенную копию на максимальном разрешении и проверяем, если размер файла больше 300 КиБ. Если так, то проверяем пиксели изображения, есть ли там больше 2 16 уникальных цветов (Yelp конвертирует загруженные изображения RGBA в RGB, но если бы мы этого не делали, то всё равно проверяли бы это).
На экспериментальной выборке такие ручные настройки по определению «больших картинок» выявляет 88% всех файлов, которые потенциально подходят для оптимизации без ложных срабатываний на графику.
Динамическое качество JPEG
Первый и самый известный способ уменьшить размер файлов JPEG — настройка под названием quality . Многие приложения, способные сохранять в формате JPEG, определяют quality в виде числа.
Качество — это некая абстракция. На самом деле, существуют отдельные уровни качества для каждого из цветовых каналов изображения JPEG. Уровни качества от 0 до 100 соответствуют различным таблицам квантования для цветовых каналов и определяют, сколько данных будет потеряно (обычно в высоких частотах). Квантование сигнала — это один из шагов в процессе кодирования JPEG, когда теряется информация.
Простейший способ уменьшить размер файла — это ухудшить качество изображения, допустив больше шума. Впрочем, не каждое изображение теряет одинаковое количество информации при одном и том же уровне качества.
Мы можем динамически изменять настройки качества, оптимизируя их для каждого отдельного изображения, чтобы достичь идеального баланса между качеством и размером. Есть два способа сделать это:
- Снизу вверх (Bottom-up): Эти алгоритмы генерируют настроенные таблицы квантования, обрабатывая изображение на уровне блоков 8×8 пикселей. Они одновременно рассчитывают, сколько теоретического качества было потеряно и как эти потерянные данные усиливают или сокращают видимость искажений для человеческого глаза.
- Сверху вниз (Top-down): Эти алгоритмы сравнивают целое изображение с его оригинальной версией и определяют, сколько информации было потеряно. Последовательно генерируя кандидатов с различными настройками качества, мы можем выбрать того, который соответствует минимальному уровню оценки, смотря какой алгоритм оценки мы используем.
Так что мы обратились ко второму подходу: использование делённого пополам алгоритма для генерации изображений-кандидатов на разных уровнях качества и оценка падения качества каждого изображения путём вычисления его индекса структурного сходства (SSIM) с помощью pyssim до тех пор, пока это значение находится в пределах настраиваемого, но статичного порога. Это позволило нам выборочно понизить средний размер файла (и среднее качество) только для изображений, которые были выше воспринимаемого порога.
На диаграмме внизу мы отобразили значения SSIM для 2500 изображений, заново сгенерированных с тремя разными настройками качества.
- Оригинальные изображения, созданные с помощью текущего метода при quality = 85 , показаны синим цветом.
- Альтернативный подход для снижения размера файлов, со снижением настройки качества до quality = 80 , показан красным цветом.
- И наконец подход, на котором мы в итоге остановились, динамическое качество SSIM 80-85 , показан оранжевым цветом. Здесь качество выбирается из диапазона от 80 до 85 (включительно), в зависимости от совпадения или превышения соотношения SSIM: предварительно вычисляемого статической величины, которая совершает этот переход где-то посредине диапазона изображений. Это позволяет нам снизить средний размер файла без понижения качества плохо выглядящих изображений.
Индексы SSIM для 2500 изображений с тремя разными стратегиями изменения настроек качества
SSIM?
Существует несколько алгоритмов изменения качества изображений, которые пытаются имитировать человеческую систему зрения. Мы оценили многие из них и думаем, что SSIM, хотя и более старый, но лучше всех подходит для такой итеративной оптимизации благодаря своим характеристикам:
Есть несколько других статей в блогах об этой технике, здесь одна от Кольта Маканлиса. И когда мы собирались публиковаться, Etsy тоже опубликовала свою! Дай пять, быстрый интернет!
Изменение масштабов изображений
WordPress, начиная с версии 4.4, поддерживает адаптивные изображения (не уменьшенные с помощью CSS). Движок автоматически создает несколько копий изображения разного размера, загружая их в медиа-библиотеку. Используя атрибут srcset, браузеры теперь могут выбирать для загрузки файл наиболее подходящего размера, исходя из характеристик экрана устройства пользователя.
Пример кода отзывчивых изображений srcset
Медиа-библиотека WordPress создает миниатюры на основе ваших установок. Но при этом она сохраняет оригинальные изображения без изменений. Чтобы изменить размер изображений, не сохраняя оригинальные, можно воспользоваться бесплатным плагином Imsanity .
Настройка медиафайлов в WordPress
Imsanity позволяет установить ограничения для загружаемых в CMS картинок. Плагин начинает работать сразу же после загрузки изображения, еще до того как WordPress начнет его обработку.
Чего мы не делали
Этот раздел посвящён описанию нескольких других типичных оптимизаций, которые вы можете использовать, но они не подходили для Yelp либо по причине дефолтных настроек наших инструментов, либо по причине сознательного отказа идти на такой компромисс.
Субдискретизация
Субдискретизация — основной фактор в определении и качества, и размера файлов веб-изображений. В интернете можно найти более подробное описание субдискретизации, но для этой статьи достаточно сказать, что мы уже выполняем субдискретизацию до 4:1:1 (это настройки по умолчанию Pillow, если не указать другие настройки), так что мы вряд ли получим какой-то выигрыш при дальнейшей оптимизации.
Кодирование PNG с потерями
Зная то, что мы делаем с PNG, вариант с сохранением этих изображений в прежнем формате, но используя энкодер с потерями вроде pngmini, имеет смысл, но мы всё равно выбрали вариант сжатия в JPEG. Тем не менее, автор энкодера говорит о сжатии файлов на 72-85%, так что это альтернативный вариант с обоснованными результатами.
Более современные форматы
Поддержка более современных форматов вроде WebP или JPEG2k определённо рассматривалась нами. Но даже если бы мы реализовали этот гипотетический проект, всё равно остался бы длинный хвост пользователей, которым нужны изображения JPEG/PNG, так что усилия по их оптимизации в любом случае были не напрасными.
Мы применяем SVG во многих местах на сайте, например, для статических изображений, которые создали наши дизайнеры к руководству по стилю. Хотя этот формат и инструменты оптимизации вроде svgo хорошо сокращают размер страницы, для нашей задачи они не подходят.
Магия вендора
Существует слишком много компаний, которые предлагают доставку, изменение размера, кадрирование, транскодирование изображений как сервис. В том числе open-source thumbor. Может быть, для нас в будущем это самый простой способ реализовать поддержку отзывчивых изображений, динамических типов контента и остаться на острие прогресса. Но сейчас мы справляемся своими силами.
Дополнительная литература
Две упомянутые здесь книги абсолютно самодостаточны за пределами контекста этой статьи и крайне рекомендуются для дальнейшего чтения по предмету.
Давайте выясним, как размещать на сайте большое количество изображений, при этом не замедляя скорость его загрузки. Для этого потребуется оптимизация изображений и инструмент ImageKit .
Преимущества оптимизации изображений
Среднее количество байт на страницу (кБ)
Преимущества оптимизации графического контента:
- Увеличение скорости загрузки страниц.
- Улучшает SEO-показатели сайта. Большие файлы изображений замедляют работу вашего сайта, а поисковики не любят медленные ресурсы.
- Более быстрое создание резервных копий.
- Требуется меньше места на вашем сервере.
Optimus Image Optimizer
Плагин Optimus Image Optimizer
Плагин Optimus WordPress Image Optimizer использует сжатие без потерь. Он поддерживает WooCoomerce и мультисайты, а также включает в себя функцию массовой оптимизации. Плагин также совместим с плагином WP Retina. Если вы совместите плагин Optimus Image Optimizer с плагином Cache Enabler, то сможете работать с изображениями, сохраненными в формате WebP.
Необходимость оптимизации изображений для мобильных устройств
- Средний размер десктопной веб-страницы в 2019 г. составляет 1939,5 КБ.
- Средний размер мобильной – 1745,0 КБ.
На сегодняшний день:
- Средний размер изображений на десктопных сайтах составляет 980,3 КБ от общего размера веб-страницы в 1939,5 КБ.
- Средний размер изображений на мобильных сайтах составляет 891,7 КБ от общего размера веб-страницы 1745,0 КБ.
Мы выяснили, что изображения увеличивают вес сайтов и потребляют много трафика. Поэтому нужно применять правильную стратегию их оптимизации.
WP Smush
Плагин WP Smush
Плагин WP Smush сканирует изображения и сжимает их по мере их загрузки на сайт. Он также находит и оптимизирует уже сохраненные рисунки. Он позволяет осуществлять массовое сжатие (до 50 файлов за раз). Плагин поддерживает форматы JPEG, GIF и PNG. Размер исходных файлов ограничен 1 Мб.
- Плагин совместим с WP All Import и WPML.
- Оптимизация изображений выполняется с помощью сжатия без потерь.
- У Smush есть функция автоматической установки ширины и высоты для всех изображений.
EWWW Image Optimizer Cloud - облачный плагин для оптимизации изображений
EWWW Image Optimizer Cloud- облачный плагин для оптимизации изображений
Плагин EWWW Image Optimizer Cloud оптимизирует изображения и повышает скорость работы сайта. Пользователи EWWW IO могут использовать функцию Bulk Optimizer («массовый оптимизатор»), предназначенную для сжатия имеющихся изображений.
Плагин EWWW IO позволяет конвертировать изображения в форматы нового поколения, такие как WebP или подобрать наилучший формат для изображения. Стоимость сжатия начинается от 0,003 доллара за изображение.
Функция ExactDN позволяет выполнять автоматическое сжатие (без необходимости сжатия на сервере), автоматическое изменение размера и обладает всеми преимуществами CDN.
Оптимизатор изображений Imagify
Плагин Imagify для оптимизации изображений
Плагин Imagify создан авторами WP Rocket, с которым большинство из вас знакомы. В нем доступна функция массовой оптимизации. Вы можете выбрать три уровня сжатия: нормальный, агрессивный и ультра. Если недовольны полученным качеством, то воспользовавшись функцией восстановления, можно будет восстановить исходное изображение. С помощью этого плагина также можно удалять оригинальные изображения, уменьшать размер больших файлов.
Изменение размера файлов в Imagify
Зачем оптимизировать изображения?
Изображения сильно сказываются на общем весе страницы (по сравнению с HTML/CSS/JS). Где вы взяли изображения?
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Разрешение у большей части этих изображений очень высокое, и их можно использовать для печати. Некоторые могут быть уменьшены для веба, другие же нет. Большая часть изображений не оптимально сжата и содержит дополнительные данные, ненужные пользователю.
По большей части, эти изображения весят больше, чем нужно.
3. Дополнительная компрессия за счет инструментов и плагинов
Теперь вы готовы к загрузке картинок на сайт. Что дальше?
А) Плагины для WordPress
Если вы используете CMS WordPress , то вам повезло. Для этой системы управления контентом придумано множество полезных и удобных плагинов, которые сделают за вас практически любую работу. Они способны сжимать загруженные изображения без потери качества ради оптимизации веса файла.
Одними из популярных решений для оптимизации изображений WordPress являются Smush.it и Kraken , но я предпочитаю Imagify :
« Агрессивный » уровень сжатия данного плагина позволяет найти компромисс между качеством изображения и весом файла, но всегда есть возможность переключиться на « нормальный » режим оптимизации ( также без потери качества ).
Если у вас достаточно навыков в работе с WordPress , то я рекомендую провести массовую оптимизацию всех ранее загруженных изображений:
Если же нужна бесплатная альтернатива, то с некоторыми задачами отлично справляется плагин со странным названием Ewww plugin .
Б) Другие инструменты для компрессии изображений
Если вы не используете WordPress , то можете попробовать следующие программные и онлайн-инструменты:
- Imagify ( онлайн, есть бесплатные и платные опции );
- ImageOptim ( бесплатно, Mac );
- PNG Gauntlet ( бесплатно, Windows );
- Trimage ( бесплатно, Linux );
- JPEGmini ( $20, Mac и Windows ).
Использование формата SVG
Есть еще одна рекомендация – использовать формат SVG. Это масштабируемый векторный формат, который отлично подходит для логотипов, иконок, текста и простых изображений. Преимущества данного формата:
- Файлы SVG автоматически масштабируются во всех браузерах и графических редакторах.
- Google индексирует файлы SVG так же, как и PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
- SVG-файлы отличаются меньшим размером по сравнению PNG или JPG. Это положительно сказывается на скорости загрузки.
Файл JPG (оптимизированный размер: 81,4 Кб)
Файл PNG (оптимизированный размер: 85,1 Кб)
Файл SVG (оптимизированный размер: 6.1 Кб)
Как показано выше, SVG- файл уменьшается в размере на 92,51% по сравнению с файлом в формате JPG. А при сравнении с файлом в формате PNG – на 92,83%.
Как узнать о проблеме с размером картинок?
Нужно протестировать сайт при помощи Google PageSpeed Insights :
Давайте рассмотрим три основных аспекта оптимизации изображений для сайта, чтобы увеличить производительность:
1. Размер изображений (в пикселях)
Независимо от формата ( JPG, PNG, GIF, TIF и т. д .), не рекомендуется загружать на сайт изображения в высоком разрешении.
Исключением может быть ведение архива защищенных изображений. В остальных случаях мы не рекомендуем использовать изображения в максимальном разрешении ( например, для портфолио или в блогах ).
А) Слайд-шоу во всю ширину окна
Для слайд-шоу во всю ширину экрана ( которые автоматически растягиваются на все окно браузера ) я рекомендую использовать изображения не более 2560 пикселей в ширину.
У картинок может быть любая высота, и при этом будет сохраняться соотношение сторон. Также для слайд-шоу на всю ширину экрана следует сохранять исходное соотношение сторон, а для небольших слайд-шоу лучше использовать слегка обрезанные изображения ( например, в соотношении 3:1 ).
Посмотрим, как это выглядит на примере одного из сайтов:
Б) Маленькие изображения / миниатюры
Определите, миниатюры какого размера используются на сайте ( при помощи встроенного в браузер инспектора или с помощью создания скриншота и последующего замера в любом графическом редакторе ).
К примеру, на этом сайте размер миниатюр, расположенных под основным слайдером, составляет 320 на 214 пикселей:
Если взглянуть внимательнее, можно увидеть, что разработчики сайта решили использовать изображения в два раза больше указанного размера ( то есть, их ширина составляет не 320, а 640 пикселей ). Это необходимо, чтобы на экранах повышенного разрешения типа Retina они смотрелись четко:
В) Большие изображения в лайтбоксах
При оптимизации изображений, если нужно увеличивать их на экране ( например, показывать их в лайтбоксе после клика по миниатюре ), то старайтесь не делать их шире 1500 пикселей. При этом максимальная высота должна составлять 800-900 пикселей.
Это позволит сохранить относительно небольшой вес файлов, и гарантировать плавную прокрутку изображений в слайд-шоу:
Плагины для оптимизации изображений
Существует сразу несколько плагинов, которые автоматически оптимизируют файлы изображений, когда вы их загружаете. Более того, они оптимизируют даже ранее загруженные изображения.
Но не стоит полностью полагаться на плагины. Например, не следует загружать изображения размером более 2 Мб в медиа-библиотеку WordPress. Это приведет к быстрому расходованию дискового пространства, предоставляемого хостингом.
В завершение
Если вам важна скорость работы сайта, то при использовании сервисов оптимизации изображений обязательно нужно следить за размером картинок.
Как уже было отмечено выше, эти требования и правила не относятся к сервисам архивирования изображений ( в которых предусмотрены встроенные меры защиты, и которые автоматически генерируют низкокачественные миниатюры исходных файлов в высоком разрешении ).
Это также не касается случаев, когда вы продаете высококачественные фотографии на стоках или прямо с личного сайта. Но если вы ведете портфолио и необходимо представить результаты собственного труда, то вам точно пригодятся эти советы по оптимизации картинок.
От автора: оптимизация изображений – один из простейших способов ускорить сайт и повысить баллы в PageSpeed и YSlow. Несжатые и большие изображения много весят и вынуждают загружать пользователей ненужные данные. Оптимизация изображений снижает общий вес страницы, из-за чего страница грузится быстрее.
Изменения в энкодере JPEG
Mozjpeg
Mozjpeg — это open-source форк libjpeg-turbo, который пожертвовал временем выполнения ради размера файлов. Такой подход хорошо совместим с офлайновыи конвейером по регенерации файлов. С потреблением ресурсов в 3-5 раз больше, чем libjpeg-turbo, этот алгоритм делает изображения меньше по размеру!
Одно из отличий mozjpeg в том, что он использует альтернативную таблицу квантования. Как упоминалось выше, качество — это абстракция таблиц квантования для каждого цветового канала. Всё указывает на то, что дефолтные таблицы квантования JPEG довольно легко превзойти. Как говорится в спецификациях JPEG:
Эти таблицы приводятся только как примеры и необязательно подходят для какого-то конкретного приложения.
Так что естественно, вас не должно удивлять, что эти таблицы используются по умолчанию в большинстве реализаций энкодеров…
Mozjpeg сделал за нас трудную работу сравнительного тестирования альтернативных таблиц и при генерации изображений использует альтернативные таблицы, которые проявляют себя лучше всего.
Mozjpeg + Pillow
В большинстве дистрибутивов Linux по умолчанию установлен libjpeg. Так что mozjpeg под Pillow не работает по умолчанию, но это не слишком сложно настроить в конфигурации. При сборке mozjpeg используйте флаг --with-jpeg8 и убедитесь, что он может быть залинкован с Pillow. Если вы используете Docker, то можно сделать такой Dockerfile:
Это всё! Собирайте и сможете использовать Pillow с mozjpeg в нормальном процессе обработки изображений.
ImageRecycle
ImageRecycle- плагин для оптимизации изображений и PDF-файлов
Плагин ImageRecyle – это автоматический оптимизатор изображений и PDF-файлов. Одной из его полезных функций является способность устанавливать минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 Кб, вы можете автоматически исключить их из процесса сжатия. Данный плагин также включает в себя функцию массовой оптимизации и автоматического изменения размеров изображений.
2. Использование более быстрых форматов изображений
Формат PNG используются для логотипов, изображений с текстом и т.д. Но он не подходит для сохранения фотографий из-за слишком больших объемов.
Формат GIF является анимированным аналогом формата PNG и также использует сжатие без потерь.
Формат JPG лучше всего подходит для сохранения красочных изображений и фотографий. Он меньше по размеру и хорошо сжимается с потерями. Можно сжать JPG настолько, чтобы получить приемлемый размер.
Формат WebP обеспечивает на 25-34% меньший размер файла, чем JPG. Более того, вы сможете использовать сжатие с потерями и без потерь для WebP, чтобы уменьшить их размер.
Эта настройка назначает сервис ImageKit ответственным за предоставление лучшего формата файла.
Когда этот параметр указан, ImageKit автоматически определяет наилучший формат для предоставления изображений сайта на конкретном пользовательском устройстве.
Сжатые файлы JPG
Затем мы сжали файлы JPG с помощью WordPress-плагина Imagify, используя «агрессивные» установки. Взгляните на новые сжатые файлы JPG , которые все еще выглядят прекрасно. После этого мы провели пять тестов, используя Pingdom, и выбрали среднее значение. В результате общее время загрузки сократилось до 476 мс, а размер страницы уменьшился до 2,9 Мб. Общее время загрузки уменьшилось на 54,88%, а размер страницы - на 80,27% .
Тест на скорость передачи данных сжатых файлов JPG
Не существует никакой другой оптимизации сайта, которая позволила бы сократить время загрузки более чем на 50%. Поэтому оптимизация изображений является такой важной. Процесс, показанный выше, был полностью автоматизирован плагином.
Исходные данные
Yelp хранит пользовательские фотографии уже 12 лет. Мы сохраняем lossless-форматы (PNG, GIF) как PNG, а все остальные форматы в JPEG. Для сохранения файлов используются Python и Pillow, а загрузки фотографий начинаются примерно с такого сниппета:
После этого мы начинаем искать варианты для оптимизации размера файла без потери качества.
5. Добавление CDN
CDN – еще один важный инструмент оптимизации больших хранилищ изображений. Считайте его вторым сервером, который кэширует ваш сайт и обслуживает запросы через центры обработки данных, расположенные значительно ближе к посетителям сайта. В результате отправка данных вашего сайта и тысяч его изображений из Нью-Йорка в Бангладеш происходит невероятно быстро.
2. Качество картинок и уровень их сжатия
А) Экспорт JPG-изображений
Если вы используете в качестве программы для оптимизации изображений Adobe Lightroom , то не нужно экспортировать изображения в 100% качестве. Попробуйте выбрать между 60-70%. Это все равно даст приемлемый результат и позволит существенно уменьшить вес файла:
Если качество будет ниже, то повышается вероятность появления шумов или « лесенок » на изображении. Взгляните на результаты эксперимента, который я проводил при экспорте изображений с различным уровнем качества:
Та же практика применима и при экспорте изображений из Adobe Photoshop .
К тому же, если вы используете последнюю версию Photoshop CC , то не забудьте попробовать новую опцию экспорта, которая находится в меню File > Export > Export As… ( Файл > Экспорт > Экспортировать как …):
При оптимизации изображений для web постарайтесь определить наиболее оптимальный уровень сжатия. Многих вполне устраивает результат, который получается при 60-70%.
Б) Используйте форматы PNG/SVG/GIF для графики со сплошными цветами
Часто в оформлении сайта кроме фотографий будут присутствовать и другие графические элементы: логотип, иконки, скриншоты или баннеры.
Любые элементы графики, которые состоят из сплошных цветов ( которые вы создаете в Photoshop или других инструментах ), лучше всего сохранять в форматах PNG , SVG и GIF .
В качестве примера я использую одно из изображений, которое приводил ранее в этой статье:
Всегда старайтесь использовать форматы изображений PNG и GIF , если есть возможность получить меньший вес файла по сравнению с JPG .
Но это подходит исключительно для пакетной оптимизации изображений графических элементов со сплошными цветами. Если опробовать тот же метод на обычной фотографии, то JPG даст лучший результат:
Читайте также: