Блогосфера

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

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

Также, на днях будет важное дополнение,
для тех, кто использует плагин Seo Yoast
(а его используют практически все здравые ребята из класса блогеров).

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

Ожидайте, готовится короткая статья…

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

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

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

Ниже, реальный пример проблемы. Загрузили одно изображение, и помимо изображения по умолчанию создалось ещё 7 копий. На скрине не совсем правильно показал. Но суть в том и есть, что одно и тоже изображение в разных размерах. Хотя изначально только 1 картинка загружается, и одна отображается в вашем посте…

Вот такие дела получаются. Проходит год, проходит другой. А ваша папка изображений весит 2, 4, 6, 8 гигабайт . И далее, далее, далее… Тогда как, если предотвратить создание этих копий, то можно существенно сберечь время по занимаемому месту. И соответственно, это сэкономит вам деньги в дальнейшем, на услуги хостинга. Потому как, рано или поздно место закончится, и придется либо менять тарифный план, либо дополнительно покупать место.

Да, конечно! Какая-то часть копий используется и всё не стоит отключать… Например, какой смысл в самой библиотеке выводить оригиналы больших изображений, когда можно подгружать именно уменьшенные миниатюры, и это правильно для стабильной работы самой библиотеки. Там размер миниатюр делается 150 на 150 пикселей:

Если бы библиотека грузила оригиналы сразу, то админка сайта бы могла просто зависнуть, или потребовалось гораздо больше времени, чтобы отобразить все фото. Именно по этой причине, мы оставим только копию миниатюр, по умолчанию 150 на 150 , а остальные размеры  — Средний и Крупный, предлагаю отключить в самой админке вордрпесс, как показано ниже. Просто сделайте также, как на скриншоте ниже, поставив «Ноль». И нажмите кнопку сохранить…

Это было самое простое, и первое что мы сделали!

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

Но это ещё не всё…

Мы отключили только 2 копии — средний и крупный размер. А создается, как помните — до 7 копий. Размер 150 х 150 — пускай создается. Остальные логично отключить! Потому как если не сейчас, проблема возникнет всё равно. Если сейчас это не решить сразу, дальше у вас может стать проблема масштабная.

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

Это всё не оригиналы подгружаются, а шаблон цепляет нужный размер из папки где загружено ваше изображение, и отображает его нужный вариант в нужном размере. То есть, не оригинал уменьшает задавая размер (потому как вес изображения остается в этом случае прежним), а именно нужный размер находится и отображается. Это экономит время отклика, при загрузке изображений. И в принципе это логично. Ведь если загружаемые изображения будут при этом не обработаны, например размером по 1 мб., и при этом когда посетитель попадает в вашу статью, там ещё 10 таких изображений  + эти же оригиналы подгружает сам виджет справа — в итоге получаем что изображения загружаются долго. Потребления ресурсов растет. В итоге, всё это не правильно!

Поэтому, помимо отключения копий изображений, нам нужно будет уменьшить загружаемый вес изображений, и при этом, ограничить их по размеру. Например, чтобы если картинка огромная на 4500 х 2700 пикселей , которая весит более 1 мб., автоматом при загрузке уменьшалась по большой стороне до 800 пикселей максимум, и при этом её весь уменьшался в десятки раз. Представляете, какая экономия ресурсов вас ждёт. И самое интересное, никакие редакторы вида  — paint (хотя я удивлен, что вы им пользуетесь…), или фотошоп (сохранить для веб устройств)… — всё это вам не понадобится. Вы сразу экономите время + если вам пишут копирайтеры статьи на блог через личный кабинет, их изображения также будут автоматически уменьшаться в размерах. При этом, без особой потери качества. Способ очень классный, и нашел для вас решение через бесплатный плагин. Читайте ниже покажу всё…

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

Вот посмотрите, что получается без плагина, который нашел для вас… Оригинал изображения, даже не помещается на экране моего монитора…

А ниже, тоже самое изображение. То есть его оригинал, только уже с включеным плагином, который вы также сможете поставить самостоятельно. Вот посмотрите, автоматом уменьшается до нужного размера, при этом визуально всё четко, как будто без потери качества. Для статьи самое то…. И даже, для миниатюры если будет подгружаться такое обработанное изображение (на случай, если вы отключите все копии создаваемые темой. А как помните, мы ещё отключили только 2 из них. Но есть ещё копии, которые создаются, и мы их отключим ниже… там будет чуть сложнее!)

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

Затаите дыхание. Мы не использовали никакие внешние редакторы и фотошопы, или сервисы, которые уменьшают изображения. Всё автоматом. Вес первого изображения был 1.3 Мб , а вес второго 70 кб .

Внимание! Практически в 20 раз меньше!!! А результат для вашей статьи будет — тот же самый. ВЫ просто не заметите разницы!!! А если при этом, отключить генерацию копий… То будет ещё лучше для рационального использования ресурсов хостинга. Более того, обработанный изображения для ваших статей, загружаются быстрее, что сказывается на времени отклика статьи конечному посетителю в браузере, и это в перспективе — хороший показатель для поискового робота.

Теперь посложнее…

Как отключить генерацию всех копий изображений в теме colormag wordpress?

Важно! По теме сегодняшней статьи пишите ниже в комментариях. В личных сообщениях эти вопросы не рассматриваем.

Если вы не уверены в своих силах, то лучше обратиться к специалисту. Возможность заказать, чтобы всё приведенное в статье сделал за вас,  этим могу заняться только до 1 марта включительно! Дальше к этому вопросу больше не возвращаемся. Это доп. услуга — и она платная! О цене — пишите в личку, в порядке очереди сделаю.

А если делаете самостоятельно, обязательно позаботьтесь, чтобы была копия изменяемого файла и базы данных, на случай, если что-то пойдет не так, и сайт сломается.

Прежде всего, решение было найдено благодаря этой статьи — https://wp-kama.ru/id_4409/ubiraem-generatsiyu-kopiy-zagruzhaemyih-izobrazheniy-v-wordpress.html Если технари, и любите всё это — почитайте! Также, в приведенной выше статье по ссылке, рекомендуются плагины, но они в нашем случае не понадобились.

Чтобы сделать… Идем в файловый менеджер на вашем хостинге переходим в папку с вашей темой (/domains/ваш сайт/public_html/wp-content/themes/colormag) и открываем файл functions.php. На спринтхост это здесь:

…и ниже будет сам файл functions.php

 

Итак. В теме colormag за генерацию копий изображений отвечают следующие строки в файле functions.php темы:

1. Просто закоменнтируем их двойным слешом (каждую строку. показано оранжевым)

//

2. добавляем хук, чтобы отключить создание файлов для размера medium_large , потому как из админки его не получится отключить. Только так (показано красным). Кстати, по ссылке выше на блоге wp-kama Тимура, есть этот хук. Я его просто скопировал, и вставил ниже. Как показано красным на скрине ниже…

Вот и всё!

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

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

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

Искал решение далее, и кто ищет, тот найдет…

Вот классный плагин: Resize Image After Upload

Идем в Плагины — Добавить новый, и устанавливаем этот самый плагин…

На вкладке Установленные, он отобразится так:

После чего, на вкладке Настройки — Resize Image Upload, предлагаю сделать точно также:

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

И ниже, ещё одна интересная опция — Compression options, благодаря которой вы полюбите этот плагин ещё сильнее….

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

Вот и всё. Просто не так ли?


p.s. И в завершении статьи, хочу сказать по поводу старых изображений, который возможно у вас не обработаны и помимо этого, по поводу старых копий. Я решил на это дело просто закрыть глаза. Тем более, если вашему блогу меньше 2 лет , и статей менее 500 штук — просто не парьтесь по этому поводу. Главное, сделайте то, что сегодня в выпуске.

Да, конечно есть решения поиска неиспользуемых миниатюр, которые мы отключили, например через плагин — Force Regenerate Thumbnails , но есть большая проблема в том, что любое автоматическое решение, вместе с неиспользуемыми миниатюрами, может ошибочно удалить нужные изображения. Например, если изображение называется вида — pomidor_320х400.jpg , но при этом оно используется в статье, то большая вероятность, что это изображение также стерется. И в статье получится битое изображение (удаленное). Как бы ладно, когда статей не так много, это ещё ничего страшного. Но в моем случае, проблема получилась масштабной. И за всё время ведение сайта, получилось 1400 битых изображений. Поэтому, я решил не удалять старые, а оставить, чтобы не навредить сайту. Как никак до этого момента, всё было хорошо.

Кстати, битые ссылки и битые изображения, можно отслеживать через плагин: Проверка нерабочих ссылок 

Broken Link Checker — Проверка нерабочих ссылок

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

Всем спасибо!

Денис Повага

Мой телеграм канал, про блогинг и не только... Присоединиться!

Комментариев к статье: 36

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

    Ответ
    • Вероятно вы открыли не ту вкладку. Вам нужен подраздел — медиафайлы, основного разлела — настройки. (настройки-медиафайлы)

      Ответ
  • Добрый день, Денис! Спасибо за очень полезную и познавательную статью. Много нового для себя узнала.

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

    Ответ
  • Денис, спасибо!! Конечно, буду поправлять, как раз были недоумения по поводу загрузки изображений. Очень своевременно!

    Ответ
  • Денис, огромное спасибо за статью!! Очень полезный материал, и вопрос почему нельзя подписывать картинки -фото на русском языке? А если подписывать на латинице то тогда использовать переводчик переводчик транслит? На каком языке тогда подписывать в окошке тайтл?

    Ответ
  • Спасибо, Денис! Буду исправлять на своём блоге! Ваша идея значительно экономит время. Ведь на уменьшение рисунков очень много затрачиваю времени, которое можно посвятить семье или на что-нибудь другое.

    Ответ
  • Денис, огромное спасибо за статью!! Ваша оптимизация по фото такая большая помощь для нас всех, теперь время на обработку картинок сэкономлено, ура!!

    Ответ
  • Спасибо за подробный разбор. Всё получилось с первого раза без проблем. Отлично всё работает. Проверил через файловый менеджер — теперь грузится всего 2 копии.
    В итоге экономия места на диске и экономия времени на обработку фотографий. Класс!!!

    Ответ
  • А вот плагин по проверке нерабочих ссылок мне найти не удалось. Он именно так и называется?

    Ответ
  • Денис, спасибо, вроде бы все получилось правильно, а вот плагина «Проверка нерабочих ссылок» нет….
    пишет, что не найдено:
    может быть Broken Link Checker тогда?

    Ответ
  • Денис, спасибо за статью. Но для меня сложно все исправить.
    Возможность заказать, чтобы всё приведенное в статье сделал за вас, этим могу заняться только до 1 марта включительно.

    Ответ
  • Спасибо, Денис за очередную полезную информацию. Я к сожалению только недавно начала обращать внимание на вес фотографий, начала уменьшать вручную — требуется много времени. Загрузила плагин Compress JPEG&PNG images, но там быстро закончился бесплатный лимит. Наверное мне его стоит удалить и загрузить Resize Image After Upload?

    Ответ
    • Да, тот плагин с лимитом, а представленый в статье бесплатный и отлично справляется со своей задачей. Тот удалите, этот поставьте

      Ответ
  • У меня к вам Денис вопрос с темой (наоборот): При установке плагина Resize Image After Upload вы больше уделяете внимание на уменьшение загружаемых увеличенных фото, которые будут стоять в блоге с размерами 800 х 600 px. Я согласна пусть так будет в новых моих статьях. А если я нашла фото с размерами 600 х 400 px — то какими размерами оно загрузится в мою статью ? Плагин их увеличит или как-то сделает по другому ?

    Ответ
    • Здравствуйте Ирина, те которые меньше размера, останутся без изменений. Только компрессуются по качеству, и все.

      Ответ
  • строки // размеры которые нужно удалить и ## отключаем создание миниатюр файлов для указанных размеров, должны присутствовать в коде?

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

    Ответ
  • Добрый вечер ! Денис, зашла в файловый менеджер. Не могу найти файл functions.php

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

    Ответ
  • Только что поставила плагин и отключила создание копий по инструкции в статье. Все отлично получилось с первого раза. Спасибо за инструкцию без лишней воды, по делу и за сэкономленные байты хостинга!

    Ответ
  • Мне больше всего нравиться этот плагин для оптимизации изображений
    _https://wordpress.org/plugins/opti-mozjpeg-guetzli-webp/
    Его создал мой знакомый сначала для себя. Но потом решил поделится и выложил в интернет. Главная его специфика — он реально полностью бесплатный, нет никаких подвохов. И он 100% работает в Google Pagespeed, исправляет там все претензии по оптимизации изображений. Может автору статьи будет интересно протестировать и его и написать свою рецензию.

    Ответ
  • Плагин скачала и установила. Отключила большой и средний размеры. Какие именно буквы и цифры означают этот хук я не поняла. То что здесь выделено красным на блоге у Тимура я таких слов не нашла. На странице скрытых настроек поставила ноль. Сохранила. Broken Link Checker скачала. Пока не показывает никаких битых изображений.

    Ответ

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

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