Сжатие изображений: iLoveIMG, войти в учетную запись

Обзор онлайн сервисов для сжатия изображений, фото, картинок

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

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

Инструменты сжатия изображений

В этой статье мы выбрали 10 инструментов сжатия изображений. Основным критерием сравнения является процент экономии после сжатия изображения — насколько изменился его размер.

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

1. TinyPNG
2. ImageRecycle
3. ShortPixel
4. Imagify
5. Compressor. io
6. ImageCompressor
7. Imageresize
8. Kraken
9. Toolur
10. CompressNow

Некоторые из выбранных нами систем предлагают пользователям 2 типа сжатия: сжатие с потерями и сжатие без потерь.

Сжатие с потерями означает, что при уменьшении размера изображения его качество также изменяется. Часто система стремится достичь наименьшего размера изображения при сохранении приемлемого качества.
Во время сжатия без потерь (Lossless), его размер оптимизируется таким образом, чтобы сохранить исходное качество изображения.

Описание инструментов сжатия изображений

TinyPNG — это удобный онлайн-инструмент для сжатия изображений, очень простой в использовании. Позволяет загружать до 20 файлов одновременно в бесплатной версии. Размер одного файла ограничен 5 МБ. Платная версия (25 долларов США на пользователя) позволяет загружать изображения размером до 25 МБ, причем количество файлов не ограничено. Инструмент работает быстро и удобно. Однако не позволяет сжимать файлы формата GIF.

Imagerecycle — фокусируется на оптимизации размера изображений, но дает вам ряд дополнительных опций. В платной версии Imagerecycle может оптимизировать всю страницу, сжимать URL-адреса и изменять размеры изображений. Imagerecyle в дополнение к онлайн-версии существует в виде плагина WordPress, расширения для Joomla и Magento и приложения Shopify. Бесплатная версия позволяет сжимать несколько изображений одновременно, которые весят не более 10 Мб.

ShortPixel — удобный инструмент для сжатия изображений. Он имеет три режима сжатия: «Lossy», «Glossy» и «Lossless». В режиме «Lossy» система пытается найти баланс между наименьшим размером и приемлемым качеством. Режим «Glossy» сжимает изображение, сохраняя при этом хорошее качество изображения, а режим «Lossless» не изменяет изображение во время сжатия, сохраняя исходное качество. Shortpixel позволяет сжимать до 50 файлов одновременно, однако бесплатная версия позволяет изменять размер не более 100 изображений в месяц.

Поддерживает JPG, PNG, GIF.

Imagify имеет три режима сжатия: от максимального уменьшения размера и приемлемого качества — режим Ultra, через агрессивный режим, до режима без потерь — Normal. Есть бесплатная и платная версия. Бесплатная версия ограничивает размер загружаемых файлов до 2 МБ, а платные версии ограничивают общий ежемесячный размер сжатия файлов от 1 ГБ до 50 ГБ. Imagify также существует как плагин WordPress.

Compressor.io допускает только сжатие изображения, поддерживает форматы JPEG, PNG, GIF и SVG. Он имеет два типа сжатия: Lossy и Lossless. Компрессор позволяет сразу сравнить исходное и уменьшенное изображение. Инструмент очень прост в использовании.

Image Compressor позволяет выполнять только изображения с потерями. В то же время вы можете сжать до 20 файлов. Инструмент не поддерживает файлы формата GIF. С помощью компрессора изображений вы можете выбрать качество изображения, которое хотите получить.

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

Imageresizer — помимо сжатия изображений, инструмент позволяет изменять их размеры. Эта система очень проста в использовании. Вы можете загрузить до 20 файлов одновременно или ввести их URL. Инструмент полностью бесплатный, однако он не поддерживает формат GIF.

Kraken — это инструмент для профессионалов. С помощью Kraken вы можете делать сжатие с потерями и без потерь. Также имеется функция для экспертов, которая позволяет выбрать необходимое качество и сохранить отдельные метаданные изображения. Система существует в версии плагина WordPress и Magento. Kraken можно использовать в бесплатной версии с некоторыми ограничениями: 100 МБ — объем для тестирования, нет возможности ввести URL-адрес изображения или загрузить всю страницу.

Toolur позволяет не только оптимизировать изображения, но и изменять их размеры. Это дает вам выбор сжатия с потерями и без потерь. Инструмент предлагает 5 методов сжатия с потерями (A, B, C, D, E) и 2 метода сжатия без потерь и 2 типа сжатия (нормальное и прогрессивное). К сожалению, разница между методами и типами сжатия не объясняется на странице. Несмотря на это, для сжатия с потерями пользователь может выбрать целевой уровень качества изображения. Такое большое количество опций и возможностей вызывает путаницу у начинающего пользователя. Инструмент бесплатный и позволяет сжимать 25 изображений одновременно. Toolur не поддерживает формат GIF, а изображения PNG после сжатия обрабатываются в JPG и не сохраняют прозрачность.

CompressNow — инструмент очень простой и бесплатный. Позволяет выбрать уровень сжатия. На системной странице указано, что система поддерживает форматы GIF и PNG. На практике файлы этих форматов после сжатия обрабатываются в формат JPG и не сохраняют прозрачность. Интерфейс системы очень продвинут и прост в использовании.

Сжать JPG, PNG, GIF изображения онлайн

Зачем сжимать изображения?

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

Сжимайте JPG, PNG и GIF изображения онлайн

Необходимо сжать JPG, PNG или GIF изображение онлайн? Тогда вы в нужном месте! В зависимости от ваших потребностей, выберите оптимизацию или сжатие изображения в КБ/МБ. Интересно узнать как сжать изображение, не теряя качества? Давайте посмотрим.

Сжатие изображений без потери качества возможно благодаря автоматическому режиму сжатия. Он обеспечивает оптимальный баланс между визуальным восприятием и размером файла. При использовании этого инструмента размер сжатых изображений будет уменьшен до 70% без визуальной потери качества. Звучит отлично, не так ли?

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

1. Загрузите JPG, PNG или GIF изображение, которое вы хотите сжать.
2. Выберите опцию автоматического сжатия изображения. После этого нажмите кнопку «Сжать».
3. Чтобы получить оптимизированное изображение, перейдите на страницу загрузки и нажмите кнопку «Скачать Изображение».

Бесплатный сжиматель фото

Бесплатный сжиматель изображений ResizePixel предоставляет простой в использовании, безопасный и надежный сервис для сжатия фотографий онлайн. С нашим вниманием к деталям и использованием новейших технологий, приоритет номер один для нас — это соответствие ожиданиям всех, кто посещает этот веб-сайт.

Сжатие изображений с потерями и без потерь

Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как уменьшив их физический размер в пикселях, так и путём оптимизации параметров сохранения.

На «широких» каналах размер изображений на сайте на скорость загрузки сайта влияет не очень сильно, но для пользователей, просматривающих сайт через мобильный интернет (EDGE или 3G), большие изображения могут быть проблемой. На посещаемых сайтах также могут быть сложности с загрузкой канала сервера — неоптимизированные изображения могут существенно сказываться на объёме трафика (это проблема, если он платный) или просто «забивать» канал.

Основых способа сокращения «веса» изображений всего два — уменьшение размера в пикселях и выбор параметров сохранения.

Уменьшение размера в пикселях

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

Если изображение показывается на сайте в небольшом размере (как иконка, например), то нет смысла передавать его пользователю в размере для печати на A0 с разрешением 300 DPI.

Обычная практика — размер изображения должен для обычных экранов совпадать с размером контейнера, а в случае с дисплеями с высокой плотностью пикселей — быть больше размера контейнера в 2 раза. То есть на уровне подготовки изображений всё просто — мы знаем размер контейнера и легко можем подготовить файлы необходимого размера. А на уровне вёрстки на HTML с использованием CSS при работе с адаптивными сайтами задача решается при помощи медиа-запросов CSS, аттрибутов srcset и sizes у тега img или использованием тега picture с ещё более гибкой настройкой.

Оптимизация параметров сохранения

Во-первых, важен выбор формата. Есть два наиболее часто используемых формата — JPEG и PNG. Если простыми словами, то JPEG больше подходит для фотографий, а PNG — для логотипов, иконок, рисунков и схем. В случае логотипов, иконок, рисунков и схем также стоит посмотреть в сторону SVG — векторного формата изображений для сайтов.

Во-вторых, важны параметры сохранения. Например, при сохранении в JPG есть возможность указать уровень качества. Как правило, разница между самым высоким качеством (100%) и просто высоким (90-95%) визуально не заметна, а вот на размере файлов сказывается весьма существенно. Тоже самое касается и других настроек сохранения изображений в графическом редакторе (размер цветовой палитры в PNG8 и GIF, прогрессивные JPЕG и т.д.)

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

Обычно правильный выбор формата и сжатие (даже lossless — без потери качества) позволяет сократить размер файлов в среднем на 20-30%, а в некоторых случаях и в разы. 

Программы для сжатия изображений:

• Caesium (Windows)
• FileOptimizer (Windows)
• jStrip (Windows)
• OptiPNG (Windows)
• PNGOUTWin (Windows)
• ImageOptim (Mac OS X)
• JPEGmini (Mac OS X)
• PNGOUT (Mac OS X & Linux)
• AdvPNG (Mac OS X & Linux)
• Pngcrush (Mac OS X & Linux)
• OptiPNG (Mac OS X & Linux)
• JpegOptim (Mac OS X & Linux)
• jpegrescan (Mac OS X & Linux)
• jpegtran (Mac OS X & Linux)
• Gifsicle (Mac OS X & Linux)

Лучшие плагины сжатия изображений для WordPress – База знаний Timeweb Community

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

Кратко о компрессии и плагинах для сжатия изображений

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

Их необходимо использовать, потому что медиаконтент может занимать слишком много пространства на сервере, что негативно влияет на ресурс сразу в двух направлениях:

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

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

Поэтому плагины-компрессоры для WordPress стали необходимостью, которую устанавливают все без исключения вебмастера.

7 лучших плагинов WordPress для сжатия картинок

Далее рассмотрим лучшие WordPress-расширения, сжимающие изображения на этапе их загрузки на сервер.

Тестирование компрессоров

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

Плагин	Размер файла	Размер файла после сжатия	Процент сжатия	Тип компрессии
ShorPixel	301 КБ	90. 4 КБ	69.9%	С потерей качества
Imagify	301 КБ	67 КБ	77%	С потерей качества
Optimole	301 КБ	34 КБ	88.7%	С потерей качества (по умолчанию)
Smush	301 КБ	247 КБ	17.9%	Без потери качества
EWWW Optimizer	301 КБ	257 КБ	14.6%	Без потери качества
WP Compress	301 КБ	217 КБ	28%	Без потери качества
Robin Image Optimizer	315 КБ	95 КБ	72%	Без потери качества

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

ShortPixel Adaptive Images

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

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

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

Чтобы сделать загрузку страниц еще быстрее для конкретных посетителей, разработчики добавили функцию Lazy Loading. Это приоритизация загрузки, вынуждающая страницу быстрее подгружать те картинки, что видны сразу после входа на сайт. На них тратятся ресурсы в первую очередь. Второстепенный контент подгружается позже в фоновом режиме.

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

Imagify

Imagify работает в трех режимах: Normal, Aggressive и Ultra. Первый сохраняет качество картинки, второй уменьшает размер, ухудшая качество, а третий делает то же, что и второй, но еще более заметно.

Второй режим включен по умолчанию, поэтому показатели эффективности Imagify такие высокие.

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

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

Стоимость плагина варьируется в зависимости от размера оптимизируемых картинок. Если за месяц вы отправляете «худеть» файлов меньше чем на 1 гигабайт, то платить не придется. А вот за большее придется – как минимум 5 долларов в месяц.

Optimole

По заявлению разработчиков, Optimole — лучший облачный компрессор изображений, который выполняет всю работу на быстрых удаленных серверах (CDN), не задействуя производительные мощности сервера пользователя.

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

Optimole дружит с конструкторами сайтов в духе Elementor и Beaver Builder, а также встроенным редактором в WordPress 5. Интерфейс прямолинеен, хорошо задокументирован, построен интуитивно понятно.

Есть и другие приятные мелочи:

• поддержка формата WebP,
• адаптация под разрешение Retina-дисплеев,
• возможность добавлять водяные знаки на изображения,
• встроенный механизм Lazy Loading (без необходимости в jQuery).

Распространяется бесплатно, если на подключаемый сайт заходят не более 5000 человек в месяц (в этой версии не работают удаленные серверы, занимающиеся обработкой изображений). Если посетителей больше 25000, то придется платить от 10 долларов в месяц.

Smush

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

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

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

Одно из ключевых преимуществ Smush — возможность сжимать неограниченное количество картинок бесплатно. Разработчики установили ограниченный размер для каждого изображения (он не должен превышать 5 мегабайт), но не на их количество. Поэтому можно использовать плагин без ограничений по времени, не заплатив ни копейки. Но есть и Pro-версия с поддержкой формата WebP. Она убирает все ограничения и добавляет режим сжатия с потерей качества. Цена зависит от того, как много сайтов будут использовать одну лицензию Smush. Для одного достаточно учетной записи Hobbyist. Она обойдется в 70 долларов за год. Чтобы установить плагин на 5 сайтов, придется отдать 140 долларов за год.

EWWW Optimizer

EWWW Optimizer не может похвастаться привлекательным интерфейсом, но зато он хорош в плане функциональности. 

EWWW поддерживает форматы JPG, PNG, GIF и даже PDF. Выполняет компрессию в полуавтоматическом режиме при загрузке файлов на сайт. Как и у конкурентов, тут есть возможность выбирать между режимом оптимизации с потерями качества и без них.

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

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

Плагин распространяется даром. Ограничения в бесплатной версии отсутствуют. Даже техническая поддержка и автоматическое резервное копирование предлагаются безвозмездно. За деньги продается только API для подключения сторонних серверов.

WP Compress

Плагин сжимает изображения и ускоряет загрузку сайтов, используя 4 методики:

1. Он задействует сразу два провайдера (Google Cloud и BunnyCDN) для доставки оптимизированных изображений до клиентов. Благодаря этой комбинации разработчикам удалось достичь минимальной задержки до появления первого изображения на странице (менее 7 миллисекунд ).
2. Конвертирует весь контент в формат WebP. Новый стандарт, экономящий пространство на серверах.
3. Адаптирует картинки под конкретное устройство (обрезает и меняет разрешение).
4. Загружает файлы постепенно. Сначала те, что видны сразу, а потом остальные (Lazy Loading).

Это помогает ускорить ресурсы WordPress с большим количеством изображений как минимум вдвое.

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

Стоимость зависит от объема загружаемых в месяц данных. За 25 Гбайт просят 9 долларов ежемесячно. За 125 Гб — 29 долларов в месяц.

Скачать

Robin Image Optimizer

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

Robin сжимает картинки в формате PNG и JPG, уменьшая их размер на 80% без заметной потери качества. Разработчики достигли таких внушительных значений за счет изменения цветовой гаммы и удаления EXIF-данных с изображений. Детализация и разрешение остаются прежними. Алгоритм Robin творит чудеса, и невооруженным взглядом заметить ухудшения в картинке не выйдет.

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

Также с Robin можно:

• менять разрешение картинок прямо в WordPress на этапе загрузки;
• выбирать тип компрессии для каждого изображения;
• стирать все метаданные без возможности их восстановления;
• следить за статистикой оптимизации.

Плагин распространяется бесплатно. Но есть платная версия, добавляющая поддержку формата WebP, компрессию в директорию на выбор и интеграцию с галереей NextGEN. Цена зависит от количества компрессируемых картинок. Например, за 39 долларов в год можно оптимизировать 5000 файлов в месяц.

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

Я рекомендую Robin Image Optimizer. Считаю, что это идеальный баланс характеристик.

• Robin распространяется бесплатно, и отсутствие Pro-версии не накладывает ограничений, мешающих работе сайта.
• Работает в фоновом режиме и поддерживает запланированную компрессию. Участие вебмастера в этом процессе без надобности.
• Показывает лучший результат в оптимизации картинок. Сокращение размера на более чем 70% без потери качества.

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

5 онлайн-сервисов для качественной оптимизации изображений

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

Типичная для многочисленных Интернет-ресурсов проблема: пользователь в первый раз со своего браузера переходит на определенный сайт, и в процессе загрузки страницы наблюдает за плавным “развертыванием” изображений. Для того, чтобы все картинки отображались мгновенно со всеми основными веб-элементами, необходимо корректно сжать их размер и вес.

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

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

1. Optimizilla

Эффективный оптимизатор изображений, позволяющий сжать изображения JPEG и PNG до минимального возможного размера.

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

2. TinyJpg

Лучший автоматический оптимизатор JPEG файлов сжимает изображения на 40-60%.

Онлайн-сервис позволяет оптимально сжать файл в формате (.jpeg). Конечный результат обработки сравнивается с оригинальной версией и в дальнейшем может настраиваться.

3. ImageOptimizer

Изменяет размер, сжимает и оптимизирует изображения.

Используя этот бесплатный онлайн-сервис, пользователь сможет за одну обработку изменить размер, сжать и оптимизировать файлы изображений.

4. ImageOptim

Сжимает изображения и ускоряет их загрузку без потери качества.

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

5. Compressor

Уменьшает размер фотографий и изображений сохраняя качество.

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

Уменьшение размера файла рисунка в Microsoft Office

Сжатие отдельных рисунков

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

1. Открыв файл в приложении Microsoft Office, выберите один или несколько рисунков для сжатия.

2. В разделе Работа с рисунками на вкладке Формат в группе Изменение нажмите кнопку Сжать рисунки.

   Если вкладки Работа с рисунками и Формат не отображаются, убедитесь, что рисунок выделен. Дважды щелкните рисунок, чтобы выделить его и открыть вкладку Формат.

   В зависимости от размера экрана в группе Изменение могут отображаться только значки. В этом случае кнопка Сжать рисунки отображается без подписи.

3. Чтобы выполнить сжатие только для выбранных, а не для всех рисунков в документе, установите флажок Применить только к этому рисунку.

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

4. В разделе Разрешение выберите нужный вариант и нажмите кнопку ОК.

   Примечания: 

   • Разрешение рисунков по умолчанию в Office составляет 220 ppi. Вы можете изменить разрешение рисунка по умолчанию или отключить сжатие рисунков.

   • Сжатие применяется после закрытия этого диалогового окна. Если вас не устраивают результаты, вы можете отменить изменения.

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

   Щелкните заголовки ниже, чтобы получить дополнительные сведения.

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

Обратите внимание на то, что эта функция недоступна в Microsoft Project 2013 или Office 2007.

1. Откройте вкладку Файл.

2. Нажмите кнопку Параметры и выберите пункт Дополнительно.

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

4. Выберите разрешение, которое вы хотите использовать по умолчанию, и нажмите кнопку ОК.

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

Примечание: Эта функция недоступна в Microsoft Project 2013 или Microsoft Project 2016.

1. Откройте вкладку Файл.

2. Нажмите кнопку Параметры и выберите пункт Дополнительно.

3. В разделе Размер и качество изображения выберите документ, из которого необходимо удалить данные о редактировании рисунка.

4. В разделе Размер и качество изображения установите флажок Отменить данные редактирования.

Примечание: Этот параметр применяется только к рисункам в текущем документе или в документе, выбранном из списка рядом с разделом Размер и качество изображения.

См. также

Изменение разрешения по умолчанию для вставки рисунков в Office

Редактирование фотографий без использования диспетчера рисунков

Сжатие файлов мультимедиа в презентации

Обрезка рисунка

Отключение сжатия рисунка

Обратная связь

Эта статья была обновлена Беном 17. 08.2019 с помощью ваших комментариев. Если она оказаться полезной для вас (а особенно, если нет), используйте элементы управления отзывами ниже, чтобы оставить нам отзыв о том, как ее улучшить.

Сжатие изображений и фотографий без потери качества

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

Существует несколько способов снизить размер изображений. Например при сохранении в графических редакторах выбрать пункт сохранения для web. Как вариант — найти специальное программное обеспечение по сжатию изображений. Или же воспользоваться простым в использовании и удобным онлайн сервисом 😉

Онлайн сервис для сжатия изображений

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

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

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

Для наглядности я приведу пример. За основу эксперимента я взял свои самые первые записи на блоге и сжал их при помощи PunyPNG. Для этого перешел на сайт по ссылке. В открывшемся окне будет кнопка загрузки изображения (Upload image). Щелкая на нее появится окно с выбором файла для загрузки и его последующего сжатия.

Поддерживаются графические форматы следующих типов: JPG, GIF и PNG. Как я уже упоминал выше, существует небольшое ограничение на размер загружаемого файла. Он должен быть не более 150 кБ, а число загружаемых файлов не более 15. С размером все понятно, но можно повысить планку, если сделать пожертвование (donate) в адрес сервиса. Тогда размер загружаемого сервиса увеличится до 500 кБ.

Меня это ограничение ничуть не смущает. А число загружаемых файлов очень просто увеличивается — достаточно обновить страницу и доступно еще 15 файлов. Обновлять страницу можно сколько угодно. После того как выбрали изображение оно автоматически начнет сжиматься, а в это время прогресс-бар изменится на пару секунд (в зависимости от скорости интернет-соединения).

Итак, для примера, я загрузил 9 файлов, взятых из своих первых постов (на тот момент я еще не пользовался сжатием изображений) и получил следующий результат:

На скрине видно, что все без исключения графические файлы, загруженные мною, были не оптимизированы и имели размер более чем достаточный. PunyPNG сжал изображения, процент сжатия колеблется от 9 до 67%! 😉 В окне в виде таблицы без границ предоставляется итог сжатия: имя файла, оригинальный размер, размер после сжатия, и степень сжатия в процентах. Напротив каждой строчки располагается кнопка на скачивание оптимизированного изображения на свой компьютер.

Под чертой подводится общий итог. На моем примере он составляет сжатие на 32%  или 108,6 кБ от суммарного размера файлов. Есть возможность скачать все изображения в zip архиве.

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

А Вы оптимизируете изображения загружая его на сервер перед публикацией?

Что такое сжатие изображений? — Определение с сайта WhatIs.com

От

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

Существует несколько различных способов сжатия файлов изображений.Для использования в Интернете два наиболее распространенных формата сжатых графических изображений — это формат JPEG и формат GIF. Метод JPEG чаще используется для фотографий, в то время как метод GIF обычно используется для штрихового рисунка и других изображений, в которых геометрические формы относительно просты.

Другие методы сжатия изображений включают использование фракталов и вейвлетов. На момент написания этой статьи эти методы не получили широкого распространения для использования в Интернете. Однако оба метода перспективны, поскольку для некоторых типов изображений они предлагают более высокие степени сжатия, чем методы JPEG или GIF.Еще один новый метод, который со временем может заменить формат GIF, — это формат PNG.

Текстовый файл или программа могут быть сжаты без внесения ошибок, но только до определенной степени. Это называется сжатием без потерь . За пределами этой точки вводятся ошибки. В текстовых и программных файлах крайне важно, чтобы сжатие было без потерь, потому что одна ошибка может серьезно повредить смысл текстового файла или привести к тому, что программа не запустится. При сжатии изображений небольшая потеря качества обычно не заметна.Не существует «критической точки», до которой сжатие работает идеально, но выше которой оно становится невозможным. При наличии некоторого допуска по потерям коэффициент сжатия может быть больше, чем при отсутствии допуска по потерям. По этой причине графические изображения можно сжимать больше, чем текстовые файлы или программы.

Последний раз обновлялся в апреле 2005 г.

Сжатие изображений с потерями и без потерь: в чем разница?

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

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

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

Прочтите статью, и вы узнаете все, что вам нужно знать о двух типах сжатия изображений.

Что такое сжатие изображений с потерями и как оно работает

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

Если вы спрашиваете, является ли сжатие с потерями обратимым, ответ: нет. Необратимый процесс изображения с потерями . После того, как вы сжали изображение таким образом, вы не сможете вернуться назад.

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

Обычная необратимость сжатия с потерями вызывает вопрос: зачем вам его использовать?

Вот в чем дело.

При оптимизации данных, таких как исходный код на странице, очень важно убедиться, что сжатие не изменяет код.Один кусок плохих данных — и ваш код может сломаться. Для других типов данных, таких как изображения или видео, вы можете сжать их и представить «приблизительное» представление исходных данных без потери их смысла. Другими словами, ни один пользователь не заметит, что ваши изображения сжаты (если вы не сжимаете одно и то же изображение снова и снова).

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

Форматы изображений с потерями

Наиболее распространенными форматами изображений с потерями являются JPEG и GIF.Однако человеческий глаз не замечает разницы между JPEG, GIF, PNG и другими форматами.

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

Преимущества, преимущества и недостатки сжатия с потерями

На этом этапе вам может быть интересно узнать, каковы плюсы и минусы сжатия с потерями.

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

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

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

Наконечник сжатия Imagify : Уровень агрессивности является наиболее сбалансированным между уменьшением размера изображения и отсутствием влияния на его качество.

Когда следует использовать сжатие с потерями?

Помните, что часто сжатие изображения на 50% уменьшает размер файла на 90%.

Если вы хотите уменьшить размер файла изображения сверх этого, 80% -ное сжатие даст только 5% -ное уменьшение, в результате чего общее уменьшение составит 95%. Для большинства из нас этот компромисс не стоит того, поскольку сжатие может ухудшить изображение до такой степени, что оно станет заметным .

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

Попробуйте Imagify бесплатно и посмотрите, как работает плагин!

Не уверены, подходит ли вам сжатие с потерями? Проведите быструю проверку страницы своего веб-сайта с помощью оптимизатора изображений Imagify.Таким образом, вы можете загружать сжатые изображения, не изменяя исходные изображения.

Что такое сжатие изображений без потерь и как оно работает

Сжатие без потерь означает, что вы уменьшаете размер изображения без потери качества. Обычно это достигается путем удаления ненужных метаданных из файлов JPEG и PNG. Мы говорим «обычно», потому что с некоторыми другими алгоритмами сжатия, такими как Imagify, используются другие возможности сжатия без ущерба для качества изображения.

Лучшие форматы изображений без потерь

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

Преимущества и преимущества сжатия без потерь

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

Когда следует использовать сжатие изображений без потерь

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

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

Сжатие изображения снижает качество?

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

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

Какой тип сжатия выбрать?

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

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

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

Не стесняйтесь изучить такие инструменты, как плагины WordPress, которые помогут вам выполнить свою работу.

Специальное сжатие изображений WordPress

Если вы используете WordPress, вы должны знать, что он сжимает ваши изображения по умолчанию. Ваши изображения JPEG сжимаются на 82 процента, когда WordPress создает изображения для предварительного просмотра. Вы можете увеличить или уменьшить уровень сжатия, используемый вашей CMS, в файле functions.php.

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

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

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

• JPEG — лучше всего подходит для фотографий или дизайнов, на которых изображены люди, места или предметы.
• PNG — лучший для изображений с прозрачным фоном
• GIF — лучший для анимированных GIF.В противном случае используйте формат JPG
• WebP — лучший формат для получения изображений меньшего размера и сохранения того же качества. Имейте в виду, что вам нужно конвертировать изображения в WebP, потому что вы не можете загружать их в WordPress.

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

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

Не уверены, что изображения снижают вашу производительность? Возьмите страницу со своего сайта, пропустите ее через онлайн-оптимизатор и посмотрите результат! Если вы планируете использовать Google Page Speed ​​Insights, вы должны учитывать, что этот инструмент использует один определенный алгоритм для анализа ваших изображений. Иногда ваши изображения идеально оптимизируются с помощью другого алгоритма, который не обнаруживается инструментом Google. Это может привести к ложноположительному результату, предлагающему оптимизировать уже оптимизированные изображения.

Какое сжатие изображений лучше всего для электронной коммерции?

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

Существует множество стратегий для оптимизации фотографий.Инструменты сжатия изображений, манипуляции с фотографиями или сценарии PHP часто могут помочь вам добиться должной производительности, которую вы ищете для своего интернет-магазина. Если вы используете Shopify, вы должны знать, что изображения автоматически сжимаются и оптимизируются. Если вы используете WooCommerce, вам следует положиться на плагин WordPress для оптимизации изображений на лету, когда вы добавляете их в свой интернет-магазин.

Оптимизация изображения для фотографов

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

С потерями или без потерь — выбор, который вы делаете

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

Как оптимизировать изображения для Интернета и производительности 2021

Поверьте, вы не хотите, чтобы Google ненавидел ваш сайт. К счастью, вы можете уменьшить размер файла изображения, чтобы повысить производительность своего сайта. Одна из проблем с их форматированием заключается в том, что модификации часто снижают их качество (что, в свою очередь, может заставить посетителя возненавидеть ваш сайт). Это не плохо, если вы не делаете их уродливыми. Есть несколько приемов и приемов, которые позволяют уменьшить размер файла изображения и при этом сохранить его достаточно красивым, чтобы с гордостью отображать его на своем веб-сайте.Итак, давайте посмотрим, как форматировать изображения, не делая их уродливыми, а также как оптимизировать изображения для Интернета и повысить производительность .

Что значит оптимизировать изображения?

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

Преимущества форматирования изображений

Во-первых, зачем вам форматировать изображения? Каковы преимущества? Оптимизация изображений для повышения производительности дает множество преимуществ. Согласно HTTP Archive, по состоянию на ноябрь 2018 года изображений составляют в среднем 21% от общего веса веб-страницы. Поэтому, когда дело доходит до оптимизации вашего сайта WordPress, после видеоконтента изображения — это первое, с чего вам следует начать!

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

Среднее количество байтов на страницу (КБ)

Вот основные преимущества.

• Это улучшит скорость загрузки вашей страницы (см. Наш пример ниже, чтобы узнать, насколько это влияет на вашу скорость). Если ваша страница загружается слишком долго, ваши посетители могут устать ждать и перейти к чему-то другому. Дополнительные сведения об оптимизации времени загрузки страницы см. В нашем подробном руководстве по оптимизации скорости загрузки страницы.
• В сочетании с отличным плагином SEO для WordPress он улучшает ваше SEO. Ваш сайт будет занимать более высокое место в результатах поиска. Большие файлы замедляют работу вашего сайта, а поисковые системы ненавидят медленные сайты. Google также может быстрее сканировать и индексировать ваши изображения для поиска изображений Google. Хотите узнать, какой процент вашего трафика поступает из поиска картинок Google? Вы можете использовать плагин или сегмент Google Analytics для WordPress, чтобы проверить поисковый трафик изображений Google.
• Создание резервных копий будет быстрее.
• Файлы изображений меньшего размера используют меньшую полосу пропускания. Сети и браузеры это оценят.
• Требуется меньше места для хранения на вашем сервере (это зависит от того, сколько эскизов вы оптимизируете)

Изображения составляют в среднем 21% от общего веса веб-страницы. 😮 Оптимизируйте их! Нажмите, чтобы твитнуть

Как оптимизировать изображения для Интернета и производительность

Основная цель форматирования изображений — найти баланс между наименьшим размером файла и приемлемым качеством .Практически все эти оптимизации можно выполнить несколькими способами. Один из самых популярных способов — просто сжать их перед загрузкой в ​​WordPress. Обычно это можно сделать с помощью таких инструментов, как Adobe Photoshop или Affinity Photo. Некоторые из этих задач также могут быть выполнены с помощью плагинов, о которых мы подробнее поговорим ниже.

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

Выберите правильный формат файла

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

• PNG — создает изображения более высокого качества, но также имеет больший размер файла. Был создан как формат изображения без потерь, хотя он также может быть с потерями.
• JPEG — использует оптимизацию с потерями и без потерь.Вы можете настроить уровень качества для получения хорошего баланса качества и размера файла.
• GIF — используется только 256 цветов. Это лучший выбор для анимированных изображений. Он использует только сжатие без потерь.

Есть несколько других, например JPEG XR и WebP, но они не поддерживаются всеми браузерами. В идеале вы должны использовать JPEG или JPG для изображений с большим количеством цветов и PNG для простых изображений.
(Рекомендуемая литература: JPG против JPEG: понимание наиболее распространенного формата файлов изображений)

Качество сжатия и размер

Вот пример того, что может случиться, если вы слишком сильно сжимаете изображение.Во-первых, используется очень низкая степень сжатия, что обеспечивает наивысшее качество (но больший размер файла). Во втором случае используется очень высокая степень сжатия, что приводит к очень низкому качеству изображения (но меньшему размеру файла). Примечание. Размер исходного изображения без изменений составляет 2,06 МБ.

Низкое сжатие (высокое качество) JPG — 590 КБ

Высокое сжатие (низкое качество) JPG — 68 КБ

Как видите, размер первого изображения выше составляет 590 КБ. Это довольно много для одной фотографии! Как правило, лучше всего, чтобы общий вес веб-страницы не превышал 1–2 МБ.590 КБ уже будет четвертью от этого. Второе изображение явно ужасно выглядит, но тогда оно всего 68 Кбайт. Что вы хотите сделать, так это найти золотую середину между степенью сжатия (качеством) и размером файла.

Итак, мы снова взяли изображение со средней степенью сжатия, и, как вы можете видеть ниже, качество сейчас хорошее, а размер файла составляет 151 КБ, что приемлемо для фотографии с высоким разрешением. Это почти в 4 раза меньше исходной фотографии с низким уровнем сжатия. Обычно для лучшей производительности более простые изображения, такие как PNG, должны иметь размер менее 100 КБ.

Среднее сжатие (отличное качество) JPG — 151 КБ

Оптимизация с потерями и оптимизация без потерь

Также важно понимать, что вы можете использовать два типа сжатия: с потерями и без потерь.

Lossy — это фильтр, который удаляет часть данных. Это приведет к ухудшению качества изображения, поэтому вам нужно быть осторожным с тем, насколько уменьшить изображение. Размер файла можно значительно уменьшить. Вы можете использовать такие инструменты, как Adobe Photoshop, Affinity Photo или другие редакторы изображений, чтобы настроить параметры качества изображения.В приведенном выше примере используется сжатие с потерями.

Lossless — это фильтр, сжимающий данные. Это не снижает качества, но требует, чтобы изображения были распакованы, прежде чем их можно будет визуализировать. Вы можете выполнить сжатие без потерь на рабочем столе с помощью таких инструментов, как Photoshop, FileOptimizer или ImageOptim.

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

Инструменты и программы для оптимизации изображений

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

Сжатие фото в Affinity Photo

Вот некоторые дополнительные инструменты и программы, которые стоит попробовать:

Изменение размера изображения для масштабирования

Раньше было очень важно, чтобы вы загружали изображения для масштабирования и не позволяли CSS изменять их размер. Однако это уже не так важно, поскольку WordPress 4.4 теперь поддерживает адаптивные изображения (не уменьшенные с помощью CSS).По сути, WordPress автоматически создает несколько размеров каждого изображения, загруженного в медиатеку. Включая доступные размеры изображения в атрибут srcset , браузеры теперь могут выбирать загрузку наиболее подходящего размера и игнорировать другие. См. Пример того, как на самом деле выглядит ваш код ниже.

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас Пример адаптивных изображений

srcset в коде

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

Медиабиблиотека WordPress создает эскизы на основе ваших настроек. Однако оригинал до сих пор сохранился и не тронут. Если вы хотите изменить размер изображений и сэкономить место на диске, не сохраняя оригинал, вы можете использовать бесплатный плагин, например Imsanity.

Настройки мультимедиа WordPress

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

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

Очистите медиатеку

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

Media Cleaner реализует интеллектуальную систему удаления мусора: когда файлы удаляются, они перемещаются в корзину. Таким образом, вы сможете некоторое время протестировать свой сайт и убедиться, что все в порядке. Если файл или медиафайл отсутствует, вы можете легко восстановить его одним щелчком мыши или просто очистить корзину, если вам все нравится.

Подключаемые модули для оптимизации изображений, которые вы можете использовать

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

Однако важно, чтобы вы не полагались исключительно на сами плагины. Например, вам не следует загружать изображения размером 2 МБ в медиатеку WordPress.Это может привести к очень быстрому израсходованию дискового пространства вашего веб-хоста. Лучший способ — заранее быстро изменить размер изображения в инструменте редактирования фотографий, а затем загрузить его и использовать один из следующих плагинов для дальнейшего уменьшения.

Оптимизатор изображения Imagify

Плагин Imagify Image Optimizer

Imagify создан той же командой, которая разработала WP Rocket, с которым большинство из вас, вероятно, знакомо. Он совместим с WooCommerce, NextGen Gallery и WP Retina. Он также имеет функцию массовой оптимизации, и вы можете выбирать между тремя различными уровнями сжатия: нормальным, агрессивным и ультра.Он также имеет функцию восстановления, поэтому, если вы недовольны качеством, вы можете одним щелчком мыши восстановить и повторно сжать на уровне, который лучше соответствует вашим потребностям. Есть бесплатная и премиум версия. Вы ограничены квотой 25 МБ изображений в месяц с бесплатной учетной записью.

С помощью этого плагина также можно избавиться от исходного изображения и изменить размер больших изображений.

Изменение размера изображений в Imagify

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

Оптимизатор изображения ShortPixel

Плагин ShortPixel

ShortPixel Image Optimizer — это бесплатный плагин, который сжимает 100 изображений в месяц и сжимает файлы нескольких типов, включая PNG, JPG, GIF, WebP и даже файлы PDF. Он будет выполнять сжатие изображений как с потерями, так и без потерь. Он преобразует CMYK в RGB. Он переносит ваши изображения и эскизы в облако для обработки, а затем возвращает их на ваш сайт для замены оригиналов.Он создает резервную копию исходных файлов, так что вы можете вручную восстановить их, если хотите. Он будет массово конвертировать файлы галереи. Нет ограничений на размер файла.

Optimole

Плагин Optimole

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

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

Все образы, сжимаемые Optimole, обслуживаются через быстрый CDN. Вы можете попробовать Optimole бесплатно или перейти на премиум-план, если вам нужна дополнительная пропускная способность и пространство для обработки.

EWWW Оптимизатор изображения Облако

Плагин EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud поможет вам сделать ваши изображения меньше, а ваш сайт работать быстрее и с меньшими хлопотами.Без ограничений по размеру и большой гибкости вы можете использовать настройки по умолчанию или полностью настроить плагин по своему вкусу. Все пользователи EWWW IO могут использовать Bulk Optimizer для сжатия своих существующих изображений или использовать режим списка библиотеки мультимедиа, чтобы выбирать определенные изображения для сжатия.

Дополнительные папки можно сканировать, чтобы убедиться, что каждое изображение на вашем сайте должным образом оптимизировано. EWWW IO даже позволяет конвертировать изображения в форматы следующего поколения, такие как WebP, или находить лучший формат изображения с опциями многоформатного преобразования.Сжатие изображений начинается всего с 0,003 доллара США за изображение.

API сжатия премиум-класса позволяет вывести сжатие на совершенно новый уровень без ущерба для качества, что открывает доступ к сжатию PDF и включает удобные 30-дневные резервные копии изображений. Функция ExactDN, стоимость которой начинается с 9 долларов в месяц, обеспечивает автоматическое сжатие (без необходимости сжатия на стороне сервера), автоматическое изменение размера и все преимущества CDN для более быстрых результатов и даже большей производительности для устройств любого размера.

Оптимизатор изображения Optimus

Плагин Optimus Image Optimizer

Оптимизатор изображений Optimus WordPress использует сжатие без потерь для оптимизации ваших изображений.Без потерь означает, что вы не увидите потери качества. Он поддерживает WooCoomerce и мультисайты, а также имеет приятную функцию массовой оптимизации для тех, у кого уже есть большие медиа-библиотеки. Он также совместим с плагином WP Retina WordPress. Есть бесплатная и премиум версия. В премиум-версии вы платите один раз в год и можете сжимать неограниченное количество изображений. Если вы объедините его с их плагином Cache Enabler, вы также можете погрузиться в изображения WebP, который является новым легким форматом изображений от Google.

WP Smush

Плагин WP Smush

WP Smush имеет как бесплатную, так и премиум-версию. Это уменьшит скрытую информацию из изображений, чтобы уменьшить размер без снижения качества. Он будет сканировать изображения и уменьшать их, когда вы загружаете их на свой сайт. Он также будет сканировать изображения, которые вы уже загрузили, и уменьшать их. Он может одновременно загрузить до 50 файлов. Вы также можете вручную смазать, если хотите. Он сместит типы изображений JPEG, GIF и PNG. Размер файла ограничен 1 МБ.

• Он совместим с некоторыми из самых популярных подключаемых модулей медиа-библиотек, такими как WP All Import и WPML.
• Вся оптимизация изображений выполняется с помощью методов сжатия без потерь, что обеспечивает высокое качество изображения.
• Неважно, в каком каталоге вы сохраняете изображения. Smush находит и сжимает их.
• Smush имеет возможность автоматически устанавливать ширину и высоту для всех изображений, поэтому все ваши изображения будут изменены до одинаковых пропорций.

TinyPNG (также сжатые файлы JPG)

Плагин TinyPNG

TinyPNG использует сервисы TinyJPG и TinyPNG (бесплатная учетная запись позволяет сжимать около 100 изображений в месяц) для оптимизации изображений JPG и PNG.Он автоматически сжимает новые изображения и выполняет массовое сжатие существующих изображений. Он преобразует CMYK в RBG для экономии места. Он сжимает изображения JPEG до 60% и изображения PNG до 80% без видимой потери качества изображения. У него нет ограничения на размер файла.

ImageRecycle

ImageRecycle — плагин для оптимизации изображений и PDF

Плагин ImageRecyle — это автоматический оптимизатор изображений и PDF-файлов. Этот плагин ориентирован не только на сжатие изображений, но и на файлы PDF.Одна действительно удобная функция — это возможность установить минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 КБ, вы можете автоматически исключить их из сжатия. Это гарантирует, что изображения и файлы никогда не будут слишком сильно сжаты. Он также включает массовую оптимизацию и автоматическое изменение размера изображения. Примечание. У них есть бесплатная 15-дневная пробная версия, но это услуга премиум-класса, и изображения загружаются и сжимаются с помощью их серверов. Они взимаются не за месяц, а за общее количество сжатых изображений, начиная с 10 долларов за 10 000.

Оптимизация изображений для Интернета Пример использования

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

Несжатые JPG-файлы

Сначала мы загрузили на наш тестовый сайт 6 несжатых файлов JPG, каждый размером более 1 МБ. (См. Исходные файлы JPG без сжатия). Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости, общее время загрузки составило 1.55 секунд, а общий размер страницы составил 14,7 МБ.

Тест скорости с несжатыми JPG-файлами

Сжатые JPG-файлы

Затем мы сжимали файлы JPG с помощью плагина Imagify WordPress, используя «агрессивную настройку». (См. Новые сжатые файлы JPG, которые по-прежнему выглядят так же красиво). Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости, общее время загрузки сократилось до 476 мс, а общий размер страницы — до 2,9 МБ. Общее количество загрузок уменьшилось на 54.88% Размер страниц и уменьшился на 80,27% .

Тест скорости со сжатыми файлами JPG

Практически нет другой оптимизации, которую вы можете сделать на своем сайте, которая позволила бы вам сократить время загрузки более чем на 50%. Вот почему оптимизация изображений так важна, что весь процесс, описанный выше, был полностью автоматизирован плагином. Это невмешательский подход к более быстрому сайту WordPress. Единственная другая радикальная оптимизация, которую вы могли бы сделать, — это изменить хосты WordPress. Многие клиенты, переезжающие в Kinsta, видят увеличение скорости более чем на 45%.Представьте себе, что вы переходите в Kinsta и оптимизируете свои изображения!

Оптимизируя изображения, независимо от того, используете ли вы инструмент для редактирования фотографий или плагин WordPress, вы также можете исправить предупреждение «Оптимизировать изображения», которое появляется в Google PageSpeed ​​Insights (как показано ниже).

PageSpeed ​​Insights Предупреждение об оптимизации изображений

Если у вас есть другие предупреждения об оптимизации от инструментов тестирования скорости, обязательно ознакомьтесь с нашим сообщением в Google PageSpeed ​​Insights и нашим подробным пошаговым руководством по Pingdom.

Мы широко использовали наши знания об эффективном управлении веб-сайтами и превратили их в электронную книгу и видеокурс.Нажмите здесь, чтобы загрузить Руководство по управлению 40+ сайтами WordPress от 2020 года!

Использование SVG

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

• SVG автоматически масштабируются как в браузерах, так и в инструментах редактирования фотографий. Это мечта веб-дизайнеров и графических дизайнеров!
• Google индексирует SVG так же, как PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
Файлы SVG
• традиционно (не всегда) меньше по размеру, чем PNG или JPG. Это может ускорить загрузку.

Генки написал отличную статью, в которой сравнивает размер SVG, PNG и JPEG. Ниже приведены несколько выводов из его тестирования, в котором он сравнил три различных типа изображений.

JPG (оптимизированный размер: 81,4 КБ)

Изображение JPG

PNG (оптимизированный размер: 85,1 КБ)

Изображение PNG

SVG (оптимизированный размер: 6,1 КБ)

Изображение SVG

Как вы можете видеть выше, SVG — это уменьшение размера файла на 92.51% по сравнению с JPG. А если сравнивать с PNG, 92,83%. Ознакомьтесь с нашим руководством о том, как использовать SVG на своем сайте WordPress.

Лучшие Лрактики

Вот несколько общих рекомендаций по оптимизации изображений для Интернета:

• Если используется плагин WordPress, использует плагин, который сжимает и оптимизирует изображения извне на своих серверах. Это, в свою очередь, снижает нагрузку на ваш собственный сайт.
• По возможности используйте векторные изображения вместе с PNG и JPG.
• Используйте CDN, чтобы быстро показывать свои изображения посетителям со всего мира.
• Удалите ненужные данные изображения.
• Обрежьте пустое пространство и воссоздайте его, используя CSS для заполнения.
• Максимально используйте эффекты CSS3.
• Сохраните изображения в нужных размерах. Хотя помните, что WordPress теперь поддерживает адаптивные изображения, чтобы обслуживать их, не изменяя их размер с помощью CSS.
• Всегда используйте формат файла .ico для вашего значка.
• Используйте веб-шрифты вместо размещения текста в изображениях — они выглядят лучше при масштабировании и занимают меньше места.
• Используйте растровые изображения только для сцен с большим количеством форм и деталей.
• Уменьшите битовую глубину до меньшей цветовой палитры.
• По возможности используйте сжатие с потерями.
• Поэкспериментируйте, чтобы найти наилучшие настройки для каждого формата.
• Используйте GIF, если вам нужна анимация. (но сжимайте ваши анимированные GIF-файлы)
• Используйте PNG, если вам нужна высокая детализация и высокое разрешение.
• Используйте JPG для общих фотографий и снимков экрана.
• Удалите все ненужные метаданные изображения.
• Максимально автоматизируйте процесс.
• В некоторых случаях может потребоваться отложенная загрузка изображений для более быстрой визуализации первой страницы.
• Сохраняйте изображения как «оптимизированные для Интернета» с помощью таких инструментов, как Photoshop.
• Используйте WebP в Chrome для обслуживания изображений меньшего размера.

Не забудьте оптимизировать свои изображения, иначе ваш сайт WordPress может работать медленно. И вы знаете, как неприятно «медленно»! 🐌Нажмите, чтобы написать твит

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

Вы отформатировали изображения для повышения производительности? Вы форматируете их вручную, используете плагин или и то, и другое? Вы бы порекомендовали другой инструмент или плагин? Есть что добавить? Сообщите нам о своих методах и лучших практиках в комментариях ниже!

---

Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на масштабируемость, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами

Видеть — значит верить! MrSID и JPEG в сравнении сжатия изображений

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

Ответ — сжатие изображений.

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

Формат файла JPEG — это знакомый всем нам промышленный стандартный алгоритм сжатия с потерями. Типичные изображения, сжатые в формате JPEG, составляют примерно 1/10 размера необработанного изображения. Этот метод сопровождается безвозвратной потерей качества изображения. Если вы заботитесь о точности исходного изображения, какой у вас выбор помимо сжатия JPEG с потерями?

Формат файла MrSID — это формат изображения без потерь, который может обеспечивать коэффициент сжатия 2: 1 для типичных изображений.В зависимости от потребностей вашего рабочего процесса возможны даже более высокие степени сжатия. MrSID является отраслевым стандартом алгоритма сжатия изображений на рынке ГИС более 20 лет. Этот формат файла поддерживается Extensis Connect и Portfolio, а также GeoExpress, Express Server и GeoViewer. Этот формат файла поддерживает сжатие как без потерь, так и с потерями для любых ваших нужд. Если вам нужно сохранить качество изображения, MrSID позволяет значительно уменьшить размер ваших файлов.Однако, если некоторая потеря качества изображения приемлема, именно здесь MrSID выделяется по сравнению с форматом файла JPEG.

Как мы измеряем потерю качества между алгоритмами сжатия изображений? При сжатии с потерями вы изменяете данные с исходных значений. Измерение этого «изменения» в данных от оригинала — распространенный метод, который мы покажем для этого сравнения. Обычное измерение, используемое для сравнения алгоритмов сжатия, называется MSE, что означает среднеквадратическую ошибку.Это измеряет «ошибку» сжатия с потерями. Существует измеримая ошибка или разница между исходными и сжатыми данными. Давайте посмотрим на измеримую ошибку MSE и сравним JPEG с MrSID.

В следующей таблице мы отображаем некоторую информацию об изображениях вместе с соответствующими ошибками. Файлы имеют одинаковый физический размер и разные значения «error / MSE». Значения MSE для файлов MrSID меньше, чем значения файла JPEG того же размера. Это говорит нам о том, что файлы MrSID имеют меньше ошибок, чем файлы JPEG того же размера, что указывает на меньшее снижение качества изображения.

Качество JPEG: 10	Степень сжатия SID 130	Несжатое изображение RAW
Размер файла: 6034	Размер файла: 6031 разница размеров -3	Размер файла: 786432
MSE *: 109.1146 58.28732 138.3505	MSE: 62.83893 43.36351 73.56931
СУММА MSE: 305.75242	СУММА MSE: 179.77175
MSE = среднеквадратическая ошибка, измерение количества данных, потерянных в результате сжатия изображения с потерями.

Вы можете увидеть различия в самих изображениях. Изображения MrSID выглядят лучше — менее пикселизированы — чем изображение JPEG того же размера файла.

Итак, вот оно. MrSID — это мощный алгоритм сжатия изображений, который поддерживает сжатие изображений как без потерь, так и с потерями. Более того, при параллельном сравнении сжатия изображений с потерями и JPEG, MrSID явно является победителем, как вы можете видеть. Но не верьте нам на слово.Попробуйте и убедитесь в этом сами.

В этой статье мы едва прикоснулись к MrSID, и нам предстоит еще многое изучить.

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

Сжатие изображений — обзор

26.5.1.2 Методы сжатия

Несмотря на то, что сжатие изображений является хорошо развитой областью, прогресс продолжается из-за потребности в более высоких характеристиках сжатия во все большем числе областей применения.Например, JPEG-2000 [20] — это развивающийся стандарт сжатия неподвижных изображений, а MPEG [11] — стандарт кодирования движущихся изображений. Для удаленных задач визуализации, не зависящих от времени, низкая стоимость, вероятно, является наиболее подходящим критерием выбора; низкая стоимость распаковки особенно важна при рассмотрении нашей настройки удаленной визуализации, поскольку вычислительные ресурсы на принимающей стороне обычно невелики. Это исключает JPEG-2000 (основанный на вейвлет-преобразовании) из-за его относительно высокой вычислительной сложности, хотя он обеспечивает значительно меньшие искажения при той же скорости передачи данных.JPEG-2000 также требует больше памяти, чем JPEG.

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

Поэтому мы рассматриваем еще три более подходящих метода сжатия: LZO, BZIP и JPEG.LZO выполняет сжатие данных без потерь и предлагает быстрое сжатие и очень быструю распаковку. Распаковка не требует дополнительной памяти. Кроме того, существуют более медленные уровни сжатия, которые позволяют достичь вполне конкурентоспособной степени сжатия, при этом распаковывая файлы на очень высокой скорости. Таким образом, LZO хорошо подходит для сжатия или декомпрессии данных в реальном времени, что означает, что скорость больше степени сжатия.

BZIP имеет очень хорошее сжатие без потерь; он лучше, чем gzip по времени сжатия и декомпрессии.BZIP сжимает данные, используя алгоритм сжатия с сортировкой блоков Барроуза-Уиллера [3] и кодирование Хаффмана. Его сжатие, как правило, значительно лучше, чем у более традиционных компрессоров на основе LZ77 / LZ78, и оно приближается к производительности семейства статистических компрессоров PPM.

JPEG ( http://www.jpeg.org/ ) разработан для сжатия полноцветных изображений реальных сцен за счет использования известных ограничений человеческого глаза, в частности того факта, что небольшие изменения цвета воспринимаются менее точно чем небольшие изменения яркости.Наиболее широко используемым подмножеством JPEG является «базовый» JPEG, который обеспечивает сжатие с потерями, хотя пользователь может контролировать степень потерь, регулируя определенные параметры. Другим важным аспектом JPEG является то, что декодер также может выбирать между скоростью декодирования и качеством изображения, используя быстрые, но неточные приближения необходимых вычислений. Таким образом можно добиться значительного ускорения декомпрессии.

Следовательно, JPEG обеспечивает гибкость, позволяющую справляться с требуемой частотой кадров.Более новый «JPEG без потерь», JPEG-LS, предлагает математически сжатие без потерь. Распакованный вывод «базового JPEG» может быть визуально неотличим от исходного изображения. JPEG-LS дает лучшее сжатие, чем исходный JPEG, но все же далек от того, что можно получить с помощью метода с потерями. Дальнейшее обсуждение методов сжатия можно найти во многих опубликованных отчетах и ​​на веб-сайтах и ​​выходит за рамки этой главы.

Улучшите свой интернет-магазин с помощью сжатия изображений продуктов

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

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

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

Если вы хотите иметь сверхбыстрый веб-сайт и увеличивать объем продаж в Интернете, вам необходимо оптимизировать изображения своего сайта.Как?

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

2-х секундный тест

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

Плохое время загрузки страницы может нанести непоправимый урон бренду. Исследование, проведенное мощной компанией по доставке контента Akamai, показало, что 2 секунды являются эталонным временем загрузки для сайта электронной коммерции. 2 секунды! Если ваша страница загружается дольше указанного времени, вы не оправдываете ожидания клиентов. Если ваша страница загружается более 3 секунд, 40% клиентов настолько недовольны, что покидают ваш сайт.Они также обнаружили, что недовольные клиенты злятся:

«79 процентов онлайн-покупателей, которые сталкиваются с неудовлетворительным посещением, с меньшей вероятностью совершат покупку на том же сайте снова, в то время как 27 процентов с меньшей вероятностью совершат покупку в обычном магазине того же сайта, что позволяет предположить, что влияние плохого онлайн-опыта выйдет за рамки в Интернете и может привести к снижению продаж в магазине ».

Скорость имеет значение, и важность публикации на вашем сайте качественных изображений, которые были должным образом отредактированы, отформатированы и сжаты, не может быть переоценена!

Сжатие изображения

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

Как правило, более сжатое изображение будет выглядеть более пиксельным, и наоборот. Чрезмерно сжатое изображение может выглядеть тусклым и расфокусированным.Взгляните на пример ниже:

Изображение выше было слишком сильно сжато, но не волнуйтесь! Не все сжатые изображения выглядят так. Есть три основных способа сжатия изображений:

1. Сжатие без потерь

Сжатие без потерь позволяет восстановить все исходные данные в файле изображения, когда файл не сжат. Использование формата изображения со сжатием без потерь обычно позволяет сэкономить от 5% до 20% от исходного размера файла.Точное уменьшение размера полностью зависит от каждого отдельного изображения.

Наиболее распространенными форматами файлов для сжатия без потерь являются .PNG и .TIFF. При просмотре файлов со сжатием без потерь на мониторе вы не должны замечать пикселизации, поскольку данные изображения все еще остаются на 100% нетронутыми. Сжатие без потерь обычно используется для печати и обычно не одобряется в Интернете, потому что размеры файлов велики и могут привести к более медленной загрузке страницы.

Хотя мы не рекомендуем сжатие без потерь для Интернета, мы рекомендуем его, если вы хотите сохранить файлы изображений, с которыми вы работали в Photoshop или другой программе редактирования, такой как GIMP.Это уменьшит размер ваших файлов RAW (файлов прямо с камеры), которые следует заархивировать для дальнейшего использования.

Например:

• На вашей камере
  • Настройте камеру для съемки в формате RAW

• Постпродакшн / Редактирование изображений
  • Откройте файлы изображений RAW в Photoshop для редактирования и ретуширования
  • Сохранить обработанный файл как .TIFF для дальнейшего использования
  • Сохраните файл как.JPG для использования в Интернете (Подробнее о .JPG ниже!)

Другой метод сжатия без потерь — удаление метаданных из файлов изображений. Большинство цифровых камер и смартфонов включают данные EXIF ​​(Exchangeable Image File) в файлы изображений, которые включают такие вещи, как местоположение GPS, тип камеры, ISO, активность вспышки, тип объектива и т. Д. Эту информацию можно легко удалить из изображений, чтобы уменьшить размер файла. размер

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

Что в имени? Возьмите название сжатия: без потерь. Сжатие без потерь означает, что вы «меньше теряете» данные. Без потерь = без потерь.

Как вы можете видеть ниже, сохранение файла в формате TIFF может значительно уменьшить размер файла без ущерба для деталей изображения и данных. Изображение слева — это файл RAW, а изображение справа — это сжатый файл TIFF.

Выше наше стартовое изображение в формате RAW — 17,9 МБ

Сглаженный файл TIFF- 5.1 МБ

2. Сжатие без потерь

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

Наиболее часто используемый формат файлов для сжатия с потерями — .JPG. При сохранении изображения в формате .JPG можно выбрать значение «качества» изображения или степени сжатия.

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

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

Что в имени? Возьмите название сжатия: Lossy.Сжатие с потерями означает, что вы «теряете» данные. Lossy = проигрыш. / B>

Сглаженный файл TIFF — 5,1 МБ

JPG, сжатый с качеством 10–953 КБ

Посмотрите на огромное изменение размера файла: изображение размером 5,1 МБ в формате .TIF было сжато до 953 КБ в формате .JPG. Это более чем в 5,35 раза меньше. Другими словами, это уменьшение размера на 81%! Теперь умножьте это на количество изображений на вашем веб-сайте, и вы поймете, почему сжатие так сильно влияет на скорость загрузки страницы.

3. Удаление фона

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

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

Удаление фона может быть утомительной и зачастую утомительной задачей для тех, кто не имеет профессионального опыта работы с Photoshop. К счастью, очень легко поручить редактирование и ретушь изображений такой профессиональной компании, как Remove the Background. Всего за несколько простых щелчков мышью вы можете создать подробные спецификации, которые гарантируют, что изображения продуктов будут последовательно обрезаны, изменены по размеру, ретушированы и сжаты в соответствии с вашими потребностями. Хотите более продвинутые опции? Добавьте эффект манекена-призрака, добавьте тени и выполните цветокоррекцию, пока вы работаете.Используйте функцию «Удалить фон», чтобы высвободить время и силы и сосредоточиться на развитии своего бизнеса в Интернете.

Как показано ниже, удаление фона может значительно уменьшить размер файла!

Сжатие с потерями качества 10 с удалением фона — 819 КБ

JPG, сжатый с качеством 10–953 КБ

Как вы можете видеть в процессе сжатия, размеры файлов будут становиться все меньше и меньше.

Итак, теперь вы можете заметить разницу?

Изображение справа показывает сжатие с потерями (от.tiff в формат .jpg). Снижение качества не такое большое, как уменьшение размера файла: более чем в 6 раз меньше. Это отлично подходит для ускорения веб-сайта!

Снижение: 84%

Напоследок, что нужно знать:

Применение этих методов сжатия к изображениям продуктов не только уменьшит размер файлов, но и принесет пользу вашему бизнесу:

• Сокращение времени загрузки страницы
• Снижение показателя отказов
• Уменьшение пространства, используемого на вашем хостинге.
• Уменьшение полосы пропускания
• Точная презентация ваших продуктов с помощью четких изображений
• Повышение «рейтинга» ваших изображений в поиске картинок Google

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

Удачного сжатия!

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

Когда мы говорим о SEO и идее оптимизации, первое, что приходит нам в голову, — это контент, обратные ссылки или ключевые слова.В этом нет ничего плохого, но и возможности SEO не исчерпываются. Тем более, что существует множество факторов, влияющих на рейтинг страницы, которые не связаны исключительно с обратными ссылками или контентом. Так что не должно было стать большим сюрпризом, когда Google объявил, что скорость загрузки страницы является фактором ранжирования как для настольного, так и для мобильного поиска. Конечно, это один фактор из более чем 200, но тот, который все же стоит учесть.

1. Скорость веб-сайта как фактор ранжирования
2. Уменьшение размера файла изображения с помощью методов сжатия с потерями и без потерь
3. Пример использования — Инструменты сжатия изображений проверены до предела
   1. Как проводился тест оптимизации изображения
   2. 6 лучших показателей, протестированных для поиска лучшего инструмента сжатия изображений

1.Скорость веб-сайта как фактор ранжирования

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

Google думает так же, о чем свидетельствует сам факт, что он предоставляет нам инструменты для проверки скорости нашего сайта и предлагает решения для медленных страниц.В разделе для разработчиков Google есть модуль PageSpeed ​​ и Page Speed ​​Insights для проверки скорости каждого веб-сайта.

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

Что такое и как именно Google измеряет «скорость сайта»?

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

2. Уменьшение размера файла изображения с помощью методов сжатия с потерями и без потерь

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

Одно из решений — просто отложить загрузку изображений. Пусть сначала загрузится все остальное, а затем только в конце начнется загрузка изображений. Это гарантирует, что ваш сайт будет работать задолго до того, как вы перейдете к участкам страницы, требующим увеличения пропускной способности. Как и во всем остальном, в настоящее время существует множество плагинов, которые могут вам помочь. В WordPress вы можете попробовать Advanced Lazy Load или Smush . Но если вам нужно это сделать, возможно, проблема в том, что ваши изображения слишком велики, и они все равно замедляют скорость вашего сайта.Так почему бы не сжать ваши изображения для начала?

В нашем случае мы использовали два метода сжатия изображений:

• сжатие без потерь, что означает, что качество изображения остается практически неизменным.
• сжатие с потерями, что означает, что может произойти некоторая потеря точности, хотя в целом она может быть незаметной.

Брайан Джексон , директор по входящему маркетингу Kinsta, объяснил каждый метод сжатия:

Сжатие изображений с потерями — это сжатие, при котором теряются некоторые данные из исходного файла (JPEG).Этот процесс необратим, если вы конвертируете в формат с потерями, вы уже не можете вернуться. И чем больше вы его сжимаете, тем больше происходит деградация. Сжатие изображений без потерь — это сжатие, при котором изображение уменьшается без потери качества. Обычно это делается путем удаления ненужных метаданных из файлов JPEG и PNG. RAW, BMP, GIF и PNG — все форматы изображений без потерь.
	БРАЙАН ДЖЕКСОН
	Реж.отдела входящего маркетинга Kinsta

Ниже вы можете увидеть представление обоих уменьшенных файлов с использованием этих двух методов.

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

3. Пример — Инструменты сжатия изображений проверены до предела

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

Надеюсь, бесполезно упоминать, что этот анализ беспристрастен и ни один из упомянутых инструментов не предлагал нам выпить пива и не обещал никаких товаров взамен. Итак, мы собираемся протестировать эти инструменты 4 + 1 на одном артефакте и посмотреть, заметим ли мы какую-либо разницу в результатах скорости загрузки.

Чтобы сделать анализ более всеобъемлющим, мы добавили в сравнение 5-й элемент (5-е измерение, если хотите), который немного отличается от другого 4: Google PageSpeed ​​.В отличие от других инструментов сжатия изображений, которые мы включили в наше исследование, Pagespeed на самом деле не столько инструмент сжатия, сколько инструмент оптимизации, который работает комплексно с помощью серии настраиваемых фильтров, которые выполняются, когда HTTP-сервер обслуживает ресурсы веб-сайта.

То, что дает ему место в нашем тесте, так это тот факт, что он «динамически оптимизирует изображения, удаляя неиспользуемые метаданные из каждого файла, изменяя размер изображений до заданных размеров и перекодируя изображения, чтобы их можно было использовать в наиболее эффективном формате, доступном для пользователей». Пользователь.«Звучит неплохо, правда? Посмотрим, останется ли хвастовство в конце дня.

3.1 Как проводился тест оптимизации изображения

Тест должен был быть одинаковым для всех и дать возможность этим инструментам опробовать свои деньги, поэтому мы решили оптимизировать все данные изображений (галерею) нашего блога, которые в итоге составили 3824 изображения. Это было сделано на тестовой версии сайта, и она еще не запущена. Он был разработан только для тестирования.Большинство служб, которые мы использовали для сжатия изображений, имеют собственный API и несколько примеров сценариев, но для нашего теста мы создали собственные сценарии, которые отправляют запрос для каждого изображения.

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

Первый комментарий заключается в том, что JPEGMini был единственным инструментом, который был загружаемым программным обеспечением, а все остальное размещалось в Интернете. Во-вторых, у всех инструментов есть API, за исключением JPEG Mini. И последнее, но не менее важное: для Pagespeed мы использовали модуль Nginx.

3.2 Лучшие 6 показателей, протестированных для поиска лучшего инструмента сжатия изображений

Мы измерили несколько показателей, которые можно разделить на две категории:

• Показатели, связанные со сжатием изображений.
• Показатели, связанные со скоростью загрузки страницы.

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

• TinyPNG сжимал только файлы формата PNG и JPEG .
• JPEGMini сжимал только файлы формата JPEG .
• Kraken сжимает файлы формата PNG и JPEG .
• Puny PNG сжимает файлы формата PNG, JPEG и GIF .

Однако показатели в обеих категориях были рассчитаны относительно реальной работы, а не по абсолютным стандартам. И вот они:

1. Метрика 1 — время преобразования

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

Начнем со времени преобразования, которое измеряется в минутах. Поскольку количество конверсий не было одинаковым для всех инструментов (на самом деле, оно было немного разным в каждом случае), имеет смысл посмотреть на количество конверсий в минуту. Обособленный лидер — JPEGMini с примерно 113 преобразованиями в минуту, или почти 2 преобразованиями в секунду. Остальные 3 инструмента значительно отстают, с небольшой разницей между ними.TinyPNG и Kraken имеют 30 или 21 конверсию в минуту соответственно, в то время как PunyPNG совершенно не впечатляет — всего 11 сжатий в минуту.

2. Метрика 2 — мощность сжатия

Теперь давайте посмотрим на мощность сжатия. Это, опять же, показатель, являющийся результатом соотношения между двумя разными измерениями: сжатый размер выходных данных по сравнению с исходным размером входных данных. Победителем с небольшим отрывом стал TinyPNG с 2.78, при этом остальные три имеют менее половины скорости (1,19 для Kraken и 1,3 для JPEGMini) или, в лучшем случае, чуть лучше, чем половину скорости (1,53 для PunyPNG). Пока что инструменты, относящиеся к конкретному формату, работают намного лучше, чем инструменты общего формата.

3. Метрика 3 — страницы в основном с изображениями PNG

А теперь реальный тест: влияет ли это на время загрузки страницы? Для страниц, связанных с PNG, время после сжатия лучше всего улучшить с помощью TinyPNG (5.29 секунд) или Pagespeed (5,44 секунды). Разница между ними по большому счету незначительна. Kraken и PunyPNG, однако, значительно ниже (однако между ними практически нет никакой разницы: 7,47 и 7,45 секунды соответственно).

Последнее время загрузки более чем вдвое больше, чем если бы веб-страницы не использовали изображения, и ближе к скорости загрузки, если бы не было сжатия вообще (8,56 секунды). Размеры изображений, загружаемых на веб-страницы, как и ожидалось, соответствуют времени загрузки.Средний размер составляет 8 МБ для Pagespeed и 8,2 МБ для TinyPNG, что практически вдвое меньше размера изображений, полученных из Kraken (15,9 МБ) или PunyPNG (15,7 МБ). Для сравнения: средний размер изображений PNG на загруженной странице составляет 19,5 МБ, что не намного больше, чем у сжатых результатов для Kraken или PunyPNG.

4. Метрическая система 4 — страницы с изображениями в основном в формате JPEG

А как насчет формата изображений JPEG? Это еще одна победа для Pagespeed и инструмента для работы с конкретным форматом.Однако на этот раз изменение результата далеко не так драматично, как в случае с файлами PNG. На самом деле время загрузки страницы действительно близко:

• 3,24 секунды для Pagespeed
• 3,45 секунды для JPEGMini
• 3,53 секунды для Kraken
• 3,55 секунды для PunyPNG.
• 3,77 секунды для исходных изображений
• 3,03 секунды без изображений

Едва ли заметно, не правда ли? Добавьте к этому тот факт, что все эти значения по-прежнему не сильно отличаются от времени загрузки страницы, когда на странице нет изображений (3.03 секунды) или даже когда все изображения на странице имеют исходный размер (3,77 секунды). Как и следовало ожидать, разница в среднем размере изображений, загружаемых на страницу, также ничем не примечательна.

Pagespeed обеспечивает наилучшее сжатие — 3,4 МБ, за ним следует JPEGMini — 3,9 МБ. Kraken и PunyPNG превышают отметку 4 МБ, с 4,3 МБ и 4,4 МБ соответственно. Хотя первые два значения существенно отличаются от среднего размера страницы с несжатыми изображениями JPEG на ней (4.9 МБ), они и близко не соответствуют размеру страницы без файлов JPEG (1,2 МБ).

Давайте кратко рассмотрим сжатие JPEG и PNG.

Наилучшее сжатие JPEG (лучшее — первое)

1. Скорость страницы
2. JPEGMini
3. Кракен
4. PunyPNG

Лучшее сжатие PNG (Лучшее — первое)

1. Скорость страницы
2. TinyPNG
3. PunyPNG
4. Кракен

Наилучшее сжатие JPEG выполняется с помощью PageSpeed, затем JPEGMini, затем Kraken и PunyPNG.Когда дело доходит до файлов PNG, лидирует Pagespeed, связанный с Tiny PNG, за которым следуют PunyPNG и Kraken. За исключением Pagespeed, казалось, что лучшие инструменты предназначены для определенных форматов изображений (JPEGMini и TinyPNG), а универсальные инструменты работают хуже с точки зрения результатов.

5. Метрическая система 5 — Скорость массового преобразования

Общее время конверсии по инструменту

• JPEGmini — 20 минут / 2275 преобразованных изображений
• TinyPNG — 60 минут / 1460 преобразованных изображений
• Kraken — 197 минут / 3824 преобразованных изображения
• PunyPNG — 328 минут / 3722 преобразованных изображения
• Pagespeed — преобразование на лету / без начального преобразования

изображений, преобразованных за минуту с помощью инструмента

• JPEGmini — 113 изображений в минуту
• TinyPNG — 24 изображений в минуту
• Kraken — 19 изображений в минуту
• PunnyPNG 11 изображений в минуту
• Pagespeed — преобразование на лету

Что касается скорости массового преобразования, следует упомянуть несколько аспектов.Прежде всего, PageSpeed ​​выполняет преобразование мгновенно, на лету, а JPEGMini — это загружаемое программное обеспечение. Итак, между этими двумя инструментами и другими есть некоторые технические различия, которые могут затруднить сравнение между ними. В то же время способ работы JPEGMini и PageSpeed ​​в этом вопросе является их конкурентным преимуществом, поэтому мы должны отдать должное Pagespeed и JPEGMini за их скорость.

PageSpeed ​​кажется лучшим, поскольку он выполняет преобразование мгновенно, а JPEGMini — следующая лучшая вещь, но она ограничена файлами JPEG.TinyPNG и Kraken связаны с точки зрения скорости (оба не очень впечатляющие), причем первый полезен только для файлов PNG. PunyPNG, хотя и подходит для всех форматов файлов изображений, имеет наименее впечатляющую скорость массового сжатия из всех пяти инструментов.

Показатель скорости преобразования важно учитывать при выборе инструмента, если вы хотите использовать его на веб-страницах, которые в значительной степени полагаются на изображения. Если общее количество изображений на вашем веб-сайте сопоставимо или больше, чем у нас, возможно, стоит выбрать PageSpeed ​​или JPEGMini, поскольку у них лучшие результаты с точки зрения общего времени конверсии и изображений, преобразованных за минуту.

6. Метрика 6 — Простота процесса преобразования

Цифры и числа очень важны, но мы все знаем, что это еще не все. Программное обеспечение должно обеспечивать отличные результаты, но также должно быть простым в использовании, интуитивно понятным и простым для понимания. В конце концов, успех программного обеспечения зависит от конечного пользователя. Например, PageSpeed ​​- отличный продукт, который может быть независимым лидером во многих главах, но определенно не самый удобный продукт.

Если вы не разбираетесь в компьютерах и не знаете, как установить и настроить запрошенные модули Apache или Nginx, то, независимо от того, насколько хороши результаты, PageSpeed ​​может не подойти вам. Кроме того, вам потребуются права на изменение конфигурации веб-сервера, чтобы установить модуль PageSpeed ​​(он не работает для виртуального хостинга). Если вы не хотите обратиться к техническому эксперту, использование этого инструмента заставит вас почувствовать себя неадекватным и, как это ни парадоксально, усложнит ситуацию.

С другой стороны,

JPEGMini, Punny PNG, Kraken или TinyPNG имеют простой в использовании интерфейс и не требуют высоких технических навыков. С точки зрения простоты преобразования, эти инструменты сделаны простыми, полезными и действительно отвечают потребностям пользователя.

Определение победителя

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

Отличие лучшего универсального инструмента сжатия изображений с учетом всех результатов заключается в PageSpeed: он либо привязан к ведущему, либо ведущему инструменту с точки зрения как размера файла, так и времени, необходимого для загрузки страницы для обоих Форматы файлов изображений JPEG и PNG, и ни один из четырех других инструментов не может сделать это последовательно (он разделяет различие с двумя отдельными инструментами: TinyPNG для файлов PNG и JPEGMini для файлов JPEG).

Так насколько же вам помогает PageSpeed? Что ж, лучший способ измерить это — посмотреть, сколько времени вы экономите за счет сжатия при каждой загрузке на тестируемой странице. Для PNG вы получаете от 8,56 секунды (с несжатыми файлами) до 5,44 секунды для загрузки страницы. Это означает, что страница загружается на 36,45% быстрее. Для файлов JPEG время загрузки увеличилось с 3,77 секунды (для несжатых изображений) до 3,24 секунды, что означает, что страницы загружаются со скоростью 14 секунд.На 06% быстрее. Менее впечатляет, чем для PNG, но все же заслуживает внимания.

Подумайте об этом так: каждый раз, когда пользователь попадает на одну из ваших страниц, его опыт становится на 36,45% быстрее и лучше. В конце концов, жизнь веб-серфера улучшается с каждой секундой, когда он смотрит на соответствующую информацию, а не на мигающие песочные часы. Одна вещь, о которой следует помнить при использовании Pagespeed, заключается в том, что при его сжатии наблюдается некоторая потеря качества изображения, но оно настолько мало, что не должно быть серьезным недостатком для большинства веб-сайтов (т.д., если только высокое качество изображения не является тем, чего вы на самом деле добиваетесь, в этом случае, возможно, сжатие изображений — не лучший способ оптимизировать скорость вашего веб-сайта).

Это полностью сравниваемые данные таблицы метрик.

И победитель…

Оглядываясь на все графики и цифры, нетрудно сказать, что PageSpeed ​​выделяется среди остальных инструментов.В мире, где у пользователя нет терпения ждать более 10 секунд, прежде чем страница загрузится , Page Speed ​​можно рассматривать как одного из лучших друзей веб-мастеров. Модули PageSpeed ​​- это серверные модули с открытым исходным кодом, которые автоматически оптимизируют ваш сайт. Это определенно не инструмент среднего веб-мастера, поскольку для его использования требуются высокие технические навыки.

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

Заключение

Скорость сайта явно играет важную роль в работе пользователей и в алгоритме Google. Люди из индустрии SEO делают большие инвестиции в контент, и это здорово. Но какой смысл во всей этой борьбе, если загрузка занимает слишком много времени? Знание инструментов, которые могут помочь вам оптимизировать скорость вашего сайта и сделать вашу жизнь веб-мастера немного лучше, может действительно оказаться под рукой. Подводя итоги нашего исследования, можно сказать, что PageSpeed ​​кажется очень полезным инструментом.Кроме того, вы можете почерпнуть вдохновение из этого руководства по размеру изображений WordPress.

PageSpeed ​​- это бесплатный инструмент, который можно использовать на серверах Apache и Nginx и который позволяет вам вносить все изменения на лету. У него также есть кеш, поэтому он не будет слишком загружать сервер. Если у вас нет доступа к конфигурации сервера, мы рекомендуем использовать JPEGMini для сжатия JPEG и TinyPng для PNG.