Оптимизация изображений для сайта wordpress. Пакетное переименование, сжатие и изменение размера

Всем привет! Пишет Денис Повага. Просто решил показать, последовательность простых действий, как загружаю фото в  блоге. Вы сможете повторить простые шаги, для своих рецептов. Покажу всё от начала до конца. Уверен, статья пригодиться как начинающим блогерам, так и профессионалам. За последние годы развития и мониторинга десятков блогов, мы нашли ряд решений, позволяющих удобно и быстро загружать статьи в блог. При этом, можно их пакетно переименовывать, сжимать по весу и изменять размер — всё в автоматическом режиме. Очень удобно. Скорее всего, будучи в школе блогеров, вы уже знаете ряд решений. Но возможно, что-то возьмете на вооружение сегодня, из свежего выпуска. Напишите в комментариях ниже, понравился ли выпуск?… Или быть может, знаете более удобные способы пакетной оптимизации картинок, при загрузке на блог.

Загрузка пошаговых фото в статью.  Переименование + оптимизация

Итак! Первым делом, фотографии с телефона или фотоаппарата загружаю в медиабиблиотеку блога. Стараюсь не загружать лишние фото с разных ракурсов, а предварительно удаляю лишние изображения на фотоаппарате. Скажу даже больше — раньше фотографировал каждый этап — все ингредиенты разом, затем каждый ингредиент отдельно, с нарезкой и т.д. Но сейчас, стараюсь не делать лишних фото, а только самое необходимое и интересное. Иначе, если всё фотографировать каждый шаг — возьмите сковороду, налейте масла, поставьте масло на стол, помойте картофель, почистите картофель, разогрейте сковороду, начните жарить… Ух, ну понимаете о чем я. Тогда как, можно обойтись одним фото — обжариваем картофель в масле.

Так, в среднем на 1 рецепт бывает 40 фото на устройстве. А в итоге получается не более 30, либо менее. Вообще, любой рецепт оптимально описать от 5 фото. Это конечно же, когда речь про одиночный рецепт. А если в статье планируется больше рецептов или одиночный необходимо написать более развернутым, с нюансами, то и фотографий всегда больше 5. Но до 30 фото легко укладываемся на статью.

Опять же, если вы в школе блогеров, то смотрели мои видео по длине статьи, и знаете когда можно обойтись короткой статьей одиночкой. В моём случае — Деревенская картошка с беконом, после удаления лишних фото — всё равно остается 33 фото. Конечно же, в статье не будет столь много. И завершающие фото готового блюда будут уже подбираться на месте, чтобы определиться с 3 лучшими…

Так, одно фото готового блюда добавим после 3-5 абзацев после текстового вступления статьи. И затем в конце статьи, ещё буквально 2 фотографии, чтобы читатель видел — что у нас получилось в итоге. То есть 1-2 фото делаю во вступлении, и 1-2 фото в завершении статьи. Начальное фото помогает понять, что читателя ждёт, чтобы принять решение — читать эту статью, или перейти на следующий блог из поиска. Поэтому, так важно — первое фото поставить самое лучшее, чтобы у посетителя потекли слюнки ))… Ну вы понимаете!

Пакетное переименование фото в автоматическом режиме

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

Вот посмотрите:

Сразу после установки программы, нажимаем правую кнопку мыши по изображениям, и выбираем пункт: Bulk Rename Here

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

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

Название программы: Bulk Rename Utility

Нажимаем кнопку — Rename, и всё готово.

Скачивал программу здесь: https://www.bulkrenameutility.co.uk/Download.php (там синяя кнопка будет)

Если хотите ускорить процесс, то рекомендую!

Двигаемся далее, и загружаем фото в статью…

Автоматическая оптимизация картинок при загрузке в статью

Вероятно, вы обратили внимание, что каждое фото весит запредельно много… Так, в моем случае, размеры каждого 6000 на 4000 пикселей, и при этом в районе 6 мегабайт. Это очень много для статей блога. Так, для статьи нет смысла делать большие изображения, ведь по ширине страницы — оптимальны фото в районе 800 на 600 пикселей. Да и по весу, до 150кб. оптимально…

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

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

И ранее, многие пользовались фотошопом или сторонней программой, и требовалось загружать все фото в программу и затем пересохранять, вида: «Сохранить для web…» Очень утомительно, особенно когда много фотографий.

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

Посмотрите моё видео, где всё подробно показываю…

Сжатие и изменение размера. Оптимизация изображений при загрузке на блог (OnePress Image Elevator + Resize Image After Upload)

Отлично! Загружаем все фото в статью, и они автоматом преобразуются под нужный размер и оптимизируются…

…пожалуй, это самое крутое решение, которое нашел для Вас. И всё бесплатно! Пользуйтесь пожалуйста…

Правильное размещение всех фото поэтапно в статье

Ну вот, все фото загрузились в библиотеку. И здесь, обратите внимание на следующие пункты, которые выделил красным. Прежде всего — имя файла, мы уже задали как нужно. Очень хорошо. Затем самое главное — размер фото 800 на 533 пикселя, и весит всего 125 кб. Это более, чем в 50 раз меньше исходника. Просто великолепно! Увидит ли читатель это в статье? Конечно же 99% ничего не заметит. Это супер решение!

Далее, посмотрите важные моменты…

Я не делаю изображения ссылкой. То есть, они не кликабельны. Ведь всё необходимое видно на фото, которое будет по ширине статьи. И нет необходимости увеличивать их, или открывать в новой вкладке, чтобы рассмотреть детали. У нас ведь не фото сайт и не сайт с фотообоями для скачивания большого качества на рабочий стол. Да и кликая на фото, посетитель может заблудиться и покинуть ваш сайт. Это не тот сайт, на котором это нужно. Поэтому, настройки выше!

И ещё один интересный момент, которым хочу поделиться…

Чтобы все фото сразу становились поэтапно с первого в статье, обратите внимание на нижние миниатюры, где выбираете фото для вставки в статью. Посмотрите, они все с первого по последнее (Выбрано 33), и всё по порядку. Вот именно в таком порядке, они и будут загружены в статью. И далее, вам не придется переставлять их с одного на другое место.

Очень удобно!

Смотрим, что получилось:

…и самое последнее, уже фото готового блюда:

Вот и всё. Теперь остается начать описание рецепта, и опубликовать на блоге.

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

А именно:

  • -Как выбирать нужные поисковые фразы
  • -Как составить заголовки и подзаголовки
  • -Какой длины должна быть статья
  • и т.д.

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

Кстати! Предыдущий месяц, был одним из самых посещаемым за всё время по Вашим блогам… Топовый результат, был зафиксирован на блоге Маргариты 1 миллион 561 тысяча посетителей за 30 дней (в среднем 50 000 посетителей в сутки)

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

Кому нужно начать уже сейчас, используйте мою бесплатную книгу, и добро пожаловать в Бесплатную группу ожидания «WhatsApp — Хочу в блогеры» https://chat.whatsapp.com/Crt6grV9LGS7NmMaAkRhto  (если ссылка будет не рабочей, пишите в комментариях). Свою книгу по блогу, пришлю в личку всем участникам группы бесплатно… Спасибо!

На этом всё.

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

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

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

  • 2019-09-23 в 5:18 дп
    Permalink

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

    Ответ
    • 2019-09-23 в 6:00 дп
      Permalink

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

      Ответ
  • 2019-09-23 в 5:31 дп
    Permalink

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

    Ответ
    • 2019-09-23 в 6:01 дп
      Permalink

      Виктор, теперь будет проще. Всё постарался по полочкам показать — весь процесс с загрузкой фото.

      Ответ
  • 2019-09-23 в 5:33 дп
    Permalink

    1_kartoshka, 2_kartoshka… А что, так можно? А я все время пишу длинные названия этапов приготовления во избежании повторных с предыдущих статей…

    Ответ
    • 2019-09-23 в 6:02 дп
      Permalink

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

      Ответ
  • 2019-09-23 в 6:34 дп
    Permalink

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

    Ответ
    • 2019-09-23 в 2:25 пп
      Permalink

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

      Ответ
  • 2019-09-23 в 6:36 дп
    Permalink

    Спасибо за кейс Денис. Теперь напишу, как это делаю я. Я много с экспериментировал с оптимизацией картинок на своем блоге и вот какая методика у меня:

    У меня на блоге в основном скриншоты, поэтому я задаю правильное имя файла уже на этапе создания скрина.
    Затем я их обрабатываю (меняю размер и добавляю водяной знак) бесплатной программой XnView:
    Меню — Пакетная обработка — добавляю папку с фото — Преобразования — Изменение размера — 800*600. Качество сохранения Jpeg — ставлю 90%. _https://i.imgur.com/QvKkP0k.png
    Добавляю водяной знак с названием своего блога ко всем картинкам _https://i.imgur.com/BtJSpqI.png
    И все это делается за раз ).
    Кстати, XnView умеет также переименовывать файлы: Меню — Пакетное переименование _https://i.imgur.com/X3mP22q.png

    Затем все обработанные картинки я пропускаю через сервис tinypng.com для уменьшения их веса (бесплатно можно обрабатывать 20 картинок за раз).
    Затем уже загружаю картинки на блог и там их уже оптимизирует (уменьшает вес) плагин Compress JPEG & PNG images (бесплатно 500 картинок в месяц). Этот плагин уже оптимизирует все дополнительные картинки, которые получаются при загрузке на блог (по умолчанию WordPress создает 4 дополнительных размера миниатюр при загрузке изображения и некоторые из них могут использоваться на вашем блоге).

    Кто загружает много картинок на блог, попробуйте плагин от сервиса _optipic.io/ru/price/ (он недорогой в отличие от того же EWWW Image Optimizer, который я использовал до этого).
    Я пишу на блоге очень редко, поэтому мне хватает бесплатной версии Compress JPEG & PNG images.
    В последней статье по программе для резервного копирования файлов использовал 117 скриншотов! Статья получилась на 3200 слов.

    Денис, если будет время, сделай аудит и моего блога ).

    Ответ
    • 2019-09-23 в 2:21 пп
      Permalink

      Марат спасибо за свою технику. Признаюсь — достаточно временно затратная… Но некоторые моменты взял на вооружение и для себя. По водяным знакам, использую плагин Easy Watermark . Всё предложенное в статье — бесплатные решение, которыми пользуемся. По аудиту, когда будет проверка обязательно посмотрю Ваш блог более детально. При беглом — вижу, что сайт до сих пор не на https

      Ответ
      • 2019-09-23 в 4:01 пп
        Permalink

        Да спасибо Денис, по поводу https все руки до него не дойдут ). Ушел в нишу создания сайтов и рекламы их в Яндекс Директ.

        Ответ
  • 2019-09-23 в 2:16 пп
    Permalink

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

    Ответ
    • 2019-09-23 в 2:23 пп
      Permalink

      Динара, всегда рад помочь! В случае чего, спрашивайте…

      Ответ
  • 2019-09-24 в 3:36 дп
    Permalink

    Здравствуйте, Денис! Прочитал вашу статью, хороший вариант подготовки фотографий для сайта. Я решил тоже показать свой вариант, как я преобразовываю картинки перед публикацией на сайте, может кому пригодится. https://domovodstvo-online.ru/podgotovka-foto-dlya-sajta.html
    Не судите строго, занимаюсь этим второй год. Ваша книга,это моя настольная книга.

    Ответ
  • 2019-12-29 в 7:24 дп
    Permalink

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

    Ответ