Оптимизация изображений для сайта 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 (если ссылка будет не рабочей, пишите в комментариях). Свою книгу по блогу, пришлю в личку всем участникам группы бесплатно... Спасибо!
На этом всё.
Денис, здравствуйте. То есть, получается, что программа переименовывает фото только по одному названию? Получается, что все фото будут одинаково прописаны, за исключением нумерации? В дальнейшем это не создаст проблем, как было раньше, когда фото вылетали из статьи? Спасибо.
Пользуюсь более 3 месяцев, полет нормальный. Там чуть иначе было. Все фото с телефона или фотоаппарата, задавались программно. И часто имена из статьи в статью - были схожие. А сейчас, для каждой статьи можно задавать свой уникальный шаблон. А если по умолчанию, то шаблон единый для множества статей - вот и получались проблемы с фото
Хорошо, спасибо. Попробуем.
Денис, если с уменьшением размеров фото с помощью плагина мне всё было ясно из Вашей книги, то по их количеству и по названию стало полностью понятно из статьи – спасибо! Сам часто увеличиваю фото нажатием клавиши Сtrl и прокруткой на мыше, а потом делаю скрин в программе Lightscot.
Виктор, теперь будет проще. Всё постарался по полочкам показать - весь процесс с загрузкой фото.
1_kartoshka, 2_kartoshka... А что, так можно? А я все время пишу длинные названия этапов приготовления во избежании повторных с предыдущих статей...
Наталья, тут начало и конец статьи будет разным, а имя можно для каждой статьи делать своё уникальное. И всё будет хорошо. Попробуйте так поработать.
Это проще!
Денис, спасибо. Вы всегда в нужное время и с необходимой информацией. Именно переименование было моей большой работой с фото, так как программа, которой я пользуюсь, к сожалению, этого функционала не имеет. Теперь вопрос с работой фото в полном цикле будет быстрым и приносить удовольствие.
Надежда, это действительно так, что работа с фото - стала более простой, и приносит одно удовольствие. Всё быстро и просто. Это главное! Нет необходимости, отдельно оптимизировать каждый файл на компьютере, а также переименовывать вручную. Пакетное переименование и обработка файлов - упрощает задачу!
Спасибо за кейс Денис. Теперь напишу, как это делаю я. Я много с экспериментировал с оптимизацией картинок на своем блоге и вот какая методика у меня:
У меня на блоге в основном скриншоты, поэтому я задаю правильное имя файла уже на этапе создания скрина.
Затем я их обрабатываю (меняю размер и добавляю водяной знак) бесплатной программой 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 слов.
Денис, если будет время, сделай аудит и моего блога ).
Марат спасибо за свою технику. Признаюсь - достаточно временно затратная... Но некоторые моменты взял на вооружение и для себя. По водяным знакам, использую плагин Easy Watermark . Всё предложенное в статье - бесплатные решение, которыми пользуемся. По аудиту, когда будет проверка обязательно посмотрю Ваш блог более детально. При беглом - вижу, что сайт до сих пор не на https
Да спасибо Денис, по поводу https все руки до него не дойдут ). Ушел в нишу создания сайтов и рекламы их в Яндекс Директ.
Очень нужная и познавательная статья. Самое интересное, что когда-то я столкнулась с подобной проблемой, и решить самостоятельно не смогла. Большое спасибо Денис, что даёте такую нужную информацию.
Динара, всегда рад помочь! В случае чего, спрашивайте...
Денис спасибо за познавательный и интересный подход с обработкой и загрузкой фотографий. Для себя взял некоторые моменты!
Здравствуйте, Денис! Прочитал вашу статью, хороший вариант подготовки фотографий для сайта. Я решил тоже показать свой вариант, как я преобразовываю картинки перед публикацией на сайте, может кому пригодится. https://domovodstvo-online.ru/podgotovka-foto-dlya-sajta.html
Не судите строго, занимаюсь этим второй год. Ваша книга,это моя настольная книга.
Денис, спасибо за полезную информацию, только сейчас ее увидела. Беру на вооружение, наверняка пакетное переименование должно ускорить процесс, уж очень он трудоемкий.