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

Здравствуйте дорогие читатели блога Вебмастерская партнерок

Cжатие изображений WordPress. Почему стоит оптимизировать изображения на сайте.

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

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

Представьте себе страницу, на которой находится несколько десятков фотографий (на главной странице, а не на всей 🙂 Каждый из них весит хотя бы 2 МБ (не веришь, что есть такие страницы? Я гарантирую вам, что они есть.) В верхней части страницы расположена, кроме того, слайдер, который прокручивает несколько фотографий, конечно, полноразмерных, по всему экрану (эти темы стали сегодня очень популярны.)

 Содержание :

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

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

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

Тогда Вы, как администратор страницы видите в Аналитике Google, показатель отказов достигает, например, 90%, а коэффициент Страницы/Встречи на уровне, например, 1, что о времени, проведенного на веб-сайте, не вспомню, потому что он короче, чем 10 секунд...

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

Скорость загрузки страницы после сжатие изображений WordPress.

 

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

Самый простой способ проверить, какие большие файлы находятся в библиотеке на Вашей сайте. Если вы работаете на WordPress, то у вас в панели вкладка „media”, в которой вы проверите вес и размер своих файлов. В других CMS-ах будет так же. Если Ваш сайт-это обычный html на этот пример, то свойства картинок вы откроете, например, с помощью FTP-клиента, которым вы войдете в каталог, содержащий изображения на Вашем сайте (этот способ работает, конечно, также в случае CMS-ов 😉


Если вы хотите, проверить каким-то автоматом, изображения, которые делают самые большие проблемы, вы можете использовать для этого инструмент on-line. Я лично часто пользуюсь GTMetrix и я думаю, что для Вас тоже может оказаться полезным. Он анализирует не только изображения, но и другие составляющие Вашего сайта.

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

 

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

Как видите, состояние страницы оставляет желать лучшего. Нужно на ней немного прибраться и некоторые вещи оптимизировать – о чем будут еще статьи. Сегодня фокусируется на изображениях, список которых (не оптимизированных) вы найдете открывая вкладку „Optimize images”.

Изображения не оптимизированы:

Картинка

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

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

 

Когда мы уже установили в каких картинках  слишком много веса, заходим на наш FTP-сервер с помощью какого-то клиента ftp. Затем найдите те файлы которые занимают много места– по пути, указанное в отчете GTmetrix и копируем этот проблемный файл на наш компьютер.

Эта описываемая сейчас процедура на 100% делается вручную. Если вы не собираетесь вручную проводить оптимизацию, или вы используете WoprdPress, вы можете этот раздел пропустить.

Заходим по FTP

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

Отправка – замена

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

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

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

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

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

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

 

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

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

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


Это, конечно, субъективный выбор. Вы можете использовать и другие размеры. Вы можете руководствоваться также способностью изображения для Facebook. Когда вы будете публиковать запись, и вы захотите иметь образ адаптирован для FB (чтобы хорошо выглядеть). Тогда установите себе минимальные размеры 1200 x 900 px. Как видите, FB способствует соотношение сторон 4:3 и такие, как правило, пользуюсь.

Для изображений, которые не будут выполнять функции отличающихся, их размер зависит от Вас, от того, где они будут использованы. Если вам нужно изображение 300 x 200, например, в тексте, тогда  не добавляйте из своей библиотеки что-нибудь 1920 широкого, а потом параметрам. Такие картинки изменен рассматриваются как недостатки сайта (ну, и напрасно расходуют пространство и трансфер). Если вам нужен небольшое изображение – создайте себе такое.

Наконец мы переходим к тому, как оптимизировать изображения на нужные.

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

Ручная оптимизация изображений.

 

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

Оптимизация изображения в Photoshop

 

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

Для этого из вкладки файл выбираем „экспорт”, затем „сохранить для web.

У нас откроется окно параметров записи в интернет, и в нем именно мы определяем интересующие нас параметры фотографии. Устанавливаем себе JPEG (ну, я думаю, что подменяя какой-то PNG, тогда не меняем расширение), уточняем. Оптимизировать или Преобразовать в sRGB (ведь изображение идет в интернет, а не для печати).

Мы можем изменить размер (если не сделали этого раньше, а есть такая необходимость) и переходим к окошку Качество где при нажатии в s откроется ползунок, на котором мы установим степень сжатия.

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

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

 Смотрите на эту же тему: Настройка фотошоп cs6

Оптимизация изображений Gimp

В случае Gimpa ситуация выглядит очень похоже, хотя, конечно, интерфейс программы значительно отличается. Скачать программу можно на сайте бесплатно. http://gimp.ru/download/gimp/

Мы открываем модифицированный файл  (вкладка изображение). Затем нажмите кнопку Файл выбираем Экспорт... и переходим в окно экспорта. Оставляем наше имя по умолчанию и нажмите кнопку Экспорт.

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

Мы можем отметить пункт предварительный Просмотр... окно слоев покажет нам новый слой. Одновременно мы видим, размер конечного файла (под ползунком). Когда это значение будет для нас удовлетворительным – нажмите кнопку Экспорт.

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

 

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

Можно воспользоваться инструментами, доступными онлайн. Их как минимум несколько, как в версиях бесплатных, так и платных. Для наших целей мы будем использовать инструмент, доступный по адресу http://compressjpeg.com/ благодаря которой мы проведем быструю компрессию наших изображений.

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

Оптимизация изображений GTmetrix?

Я уже упоминал GTmetrix в качестве инструмента для проверки „работоспособности” и степени оптимизации нашего сайта. Теперь, говоря о функциональности, связанной с оптимизацией изображений. Функциональности, которая не так очевидна.

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

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

Сравнение степени сжатия в случае использования онлайн-инструментов.

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

 

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

Что означают эти цифры:

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

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

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

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

Автоматическая оптимизация изображений в WordPress

 



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

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

Еще такое небольшое примечание в вопросе безопасности.

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

Плагин WP Smush – Smush Image Compression and Optimization

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

сжатие изображений WordPress

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

Когда его  активируете нашим глазам появится дополнительная вкладка, находящаяся в админ-панели WordPress в разделе Media. Достаточно туда зайти, и мы можем приступить к оптимизации наших изображений.На скриншоте ТОП 6 лучших плагинов сжатия изображений wordpress.

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

Скажу еще только о некоторых ограничениях в базовой версии WP Smush:

Поддерживает только изображения, хранящиеся в галерее WordPress (выполнения оптимизации изображений с других галереях например NextGen Gallery)

Если файл тяжелее чем 1 МБ – будет пропущен. Такие файлы можно сжимать только в платной версии.

За один раз вы можете оптимизировать 50 изображений. После сжатия последнего из этого списка изображения, вы должны нажать на Bulk Smush Now.

Теперь несколько вещей, которые мне нравятся в WP Smush:

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

За один раз вы можете оптимизировать 50 изображений... Ну вы видите. Та же функциональность является как недостатком, так и преимуществом. Недостаток заключается в наличии ограничении сжатия изображений WordPress, преимущество в безопасности. Интересно, почему? Ну, это потому, что в случае одноразовой оптимизации всей медиа-библиотеки могут возникнуть некоторые проблемы. У меня был такой случай когда оптимизируя около 1500 изображений одновременно (с помощью другого плагина) у меня весь процесс застрял примерно на 80% индикатора. Что еще хуже, он был, видимо, настолько сильным, что сторона начала сыпаться ошибками и... упала. Мне пришлось восстанавливать базу данных и вернуться к способу по 50 на один раз. Так, на всякий случай 🙂

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

Здесь вы видите, как протекает процесс сжатия, наряду с сообщениями о том, что изображения можно оптимизировать (в этой версии плагина) из-за его размер более 1 МБ

Плагин EWWW Image Optimizer

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

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

После загрузки и установки плагина в разделе media появится ссылка Массовая оптимизация.

Установка

сжатие изображений WordPress

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

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

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

Во время самого процесса вы будете наблюдать прогресс-бар, а окно сообщений будет вам wypluwało информацию о том, какие файлы и в какой степени были оптимизированы и сжатие изображения WordPress (или не были, и почему).

Процесс

сжатие изображений WordPress

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

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


Результаты до и после оптимизации изображений.

Когда весь процесс подошел к концу, мы подвергаем нашу сторону анализе с помощью GTmetrix, чтобы увидеть, сколько очков мы заработали.

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

После оптимизации

сжатие изображений WordPress

Значит ли это, что оптимизация изображений - это важно?

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

Даже если это так на самом деле, то давайте в виду тот факт, что это „дополнение” может испортить нам рейтинг сайта (как в глазах посетителей, как и в глазах Google). Если изображения будут слишком большие/тяжелые, это, скорее всего, повлияет на комфорт использования страницы и время ее загрузки, и это, наконец, всегда влияет на ход...








Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *