Загрузка изображений на сайты «по канону»

Загружайте фотки на сайт правильно, вот так выглядит общий алгоритм:

• Изображение сжато до нужного разрешения, нужная плотность пикселей DPI;
• Изображение в jpg;
• Изображение проведено через компрессор;
• Название изображения имеет ключевики на транслите;
• Если новая фотка должна заменить старую, то старую нужно Удалить навсегда из Медифайлов;
• Прописать alt ключевыми словами связанными по смыслу;
• Использовать относительный адрес изображения при вставке через код;
• Сбросить кэш и проверить как отображаются изображения на мобильном и десктопе

Конкретные комментарии:

Изображение сжато до нужного разрешения, нужная плотность пикселей DPI. Нужный размер всегда разный, для примера, если это фотка из инструкции, как пройти, то разрешение 1200 px по ширине (высота меняется автоматически в соотношении сторон, чтобы не было ни сплюснутых, ни растянутых фото). Если это маленькое лого, то ширина может быть и 40 px, если фото на шапку вверху или фото с занятий, то 1600 px. Чем важнее качество изображения, тем выше разрешение, можно уточнить по конкретным фото. Второй параметр разрешения это плотность пикселей на дюйм DPI. По умолчанию это 72 dpi. Делается это в фоторедакторах, например, в Photopea так:

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

Изображение в jpg. Нельзя загружать обычные изображения на сайт в формате png. Есть соблазн загружать скриншоты, которые часто сохраняются в png по умолчанию, это нельзя делать. Все фотки надо переводить в jpg (jpeg это то же самое). Где переводить из png в jpg? например тут png2jpg.com, но в идеале сразу сохранять в редакторе в jpg.

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

Изображение проведено через компрессор. Когда изображение в нужном разрешении в jpg, его можно прогнать через compressjpeg.com, можно сразу до 20 файлов. Уменьшается размер изображения.

Название изображения имеет ключевики на транслите. На сайте translit-online.ru/yandex.html переводим русский текст с ключевиками в транслит по правилам Яндекса. Когда фоток много, можно набирать сразу много строк для перевода. У каждой фотки должно быть уникальное название с ключевиками, по которым продвигается страница, куда будут загружены фото. Полученными названиями на латинице переименовываем изображения перед загрузкой.

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

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

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

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

Абсолютный адрес имеет такой формат: https://spb.gymbalance.ru/wp-content/uploads/2022/06/sostavlenie-uprazhnenij-po-gimnastike_3__1.jpg

А относительный такой: /wp-content/uploads/2022/06/sostavlenie-uprazhnenij-po-gimnastike_3__1.jpg

Если вы загружали изображение в Медифайлы в админке сайта на WordPress, то относительный адрес изображения начинается с /wp-content/uploads/….

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

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

В скором времени все изображения будут загружаться в новом формате webp, на это есть инструкция Загрузка изображений на сайты «по канону плюс»