О ЧЕМ СТАТЬЯ?
Хорошая статья — это оформленная статья. Разумеется, важность содержания никто не отрицает, но без оформления текст, скорее всего, пройдет мимо читателя. Впрочем, просто добавить иллюстрации — тоже не выход. Для того чтобы картинки в тексте смотрелись органично, быстро грузились и участвовали в поиске, их необходимо правильно обработать и разместить на странице.
В этой статье я расскажу:
- где найти фотографии для своей статьи
- как обработать фото, чтобы уменьшить его вес, но не потерять качество
- как правильно публиковать картинки в админке WordPress.
Начнем?
Где взять картинки для статьи
Есть несколько способов получить качественный фотоконтент для сайта:
- сделать фото самому
- купить картинки в фотобанке
- скачать с бесплатных фотостоков
- создать иллюстрации в специальных программах.
У каждого из этих вариантов есть свои плюсы и минусы. Рассмотрим их.
Свои фотографии
Самый простой, но самый дорогой способ получить уникальные изображения для сайта. Нам нужно потратить время и деньги, чтобы найти хорошего фотографа и заплатить ему за фотосессию. Зато таких изображений больше ни у кого не будет. Поисковые роботы обязательно это оценят.
Готовые фотографии можно купить и у самих фотографов. Такие фотоматериалы обойдутся дешевле, чем фотосессия, но придется потратить больше времени на поиски нужного фотоконтента.
Фотобанки
Если вы не знаете, где брать картинки для оформления текста, рекомендую обратить внимание на фотобанки, например: Shutterstock, Depositphotos, Gettyimages, Photocase и др.
На этих сервисах находятся миллионы файлов. Нужное изображение ищем при помощи фильтра. Купить фото можем поштучно. Но если нам нужно много фотографий, то лучше оплатить подписку на месяц.
За авторство файлов с фотобанков можно не беспокоиться. Они все продаются со стандартной лицензией, и их можно использовать на сайтах, в блогах, для печати и рекламы продукции.
Бесплатные фотостоки
Самые популярные сервисы — Pixabay, Burst, Pexels, Unsplash, Free Images. Фото здесь можно скачать бесплатно, но их выбор значительно скромнее, чем на платных ресурсах. К тому же бесплатные изображения доступны всем, и вполне вероятно, что выбранная нами картинка давно есть на сайте конкурентов.
Для того чтобы такое изображение понравилась поисковым роботам, его нужно сделать уникальным. Об этом я расскажу дальше.
Скриншоты
Для некоторых статей, как, например, для этой, в качестве изображений можно использовать скриншоты. Их можно сделать бесплатно при помощи специальных программ: Lightshot, Joxi и др. Расширение для скриншотов можно установить в браузере.
Для этой статьи я делала скриншоты с помощью расширения Standardized Screenshot. Поэтому все иллюстрации одном стиле.
Самостоятельно созданные иллюстрации
Прелесть этого способа в том, что вам необязательно быть крутым художником или специалистом по Photoshop. Вы вполне можете сделать картинки без слёз и боли в сервисе Canva или Crello. Впрочем, некоторые авторы рисуют скетчинги в обычном блокноте, а потом оцифровывают изображения и используют в тексте.
Какого размера должны быть фото на сайте
Картинка в тексте должна не должна быть слишком маленькой или большой. Главное — она должна быть качественной. Для этого нам нужно загрузить на сайт фото с высоким разрешением. При скачивании фотографии обращаем внимание на ее размеры и выбираем самый оптимальный.
Лучше уменьшить большую картинку, чем увеличить маленькую.
В последнем случае изображение потеряет в качестве и станет размытым. Оптимальная ширина — 1000–1200 px.
Для примера поищем картинку на бесплатном сайте Pixabay. Если нам подходит все фото, достаточно будет размера 1280×853 px. Но если нужно вырезать лишь часть изображения, скачиваем размер 1920×1279 px.
Обработка изображения
Для того чтобы не занимать на сайте память тяжелыми изображениями, их нужно уменьшить. При этом фото не должно потерять в качестве. В интернете есть специальные сервисы для сжатия, например Tinypng или JpegMini.
Так как правильно уменьшать фотографии?
- Обрезаем фото так, чтобы на нем было нужное нам изображение. Это можно сделать в Photoshop, Canva и даже Paint.
- Уменьшаем ширину картинки до 1200 px.
- Сжимаем в сервисе https://tinypng.com/.
- Скачиваем в папку на Рабочем столе.
Мы видим, что в процессе сжатия вес фотографий уменьшился на несколько процентов. При этом качество изображения и его размеры остались прежними.
Как назвать изображение для публикации
Прежде чем загрузить фото на сайт, ему нужно дать имя. Название должно касаться темы статьи и коротко говорить о том, что на нем изображено. Для SEO-оптимизации в названии картинки лучше использовать ключи, которые мы гармонично вписывали в наш текст. Тогда наше фото сможет участвовать в поиске вместе с текстом. Особенно это хорошо для информационных статей.
Название картинки с помощью латинских букв — важный момент в оптимизации сайта.
Чтобы назвать картинку, прогоните ключ на русском языке через любой транслитератор и запишите его латинскими буквами. Между словами поставьте дефисы. Тогда при загрузке фото на сайт сразу правильно пропишется URL картинки.
В новых версиях wordpress транслитерация названий иллюстраций происходит автоматически. Это очень удобно, конечно.
Как загрузить фото на сайт
Теперь изображение загружаем на сайт и размещаем в тексте. Принцип загрузки фото в разных админках похож, потому что медиафайлы на сайтах хранятся в галереях. Сначала нужно загрузить фото в галерею, а потом оттуда вставить на нужную страницу.
Напомню, что перед этим изображение следует обрезать, сжать и правильно подписать. Все это нужно сделать для оптимизации сайта.
Смотрим, как загрузить фото в админку на примере WordPress. Чтобы верстка была была правильной, делать это нужно в коде HTML. Нажимаем кнопку «Добавить медиафайл».
Открывается «Редактор фото», и мы загружаем изображение из компьютерной папки в галерею.
Когда фотография загружается в галерею, у нее автоматически прописывается правильный URL-адрес и заголовок латинскими буквами.
Теперь изменяем заголовок картинки и пишем его русскими буквами. Обязательно прописываем атрибут alt — очень важный элемент для поисковых машин. В теге <img> устанавливается альтернативный текст для изображения. Это название отображается, когда загрузка графики в браузере пользователя отключена. По нему можно понять, что изображено на картинке, когда саму картинку не видно.
Проверьте, чтобы заголовок и атрибут alt для картинки обязательно были прописаны.
Сохранение иллюстрации на странице
Когда все готово, нажимаем кнопку «Вставить». В редакторе записи появляется новый кусок HTML-кода. Это и есть наша картинка. Обязательно проверяем, прописался ли атрибут alt, и обращаем внимание на размеры ширины и высоты фото: “width”, “height”.
Наша задача — чтобы у пользователя изображение корректно отображалось как на компьютере, так и на смартфоне. Поэтому настраиваем изображение так, чтобы в мобильной версии фото не меняло свои пропорции.
Для этого в HTML-коде ставим новые показатели ширины и высоты фотографии:
- width=”100%” — это означает, что на любом экране фото будет автоматически отображаться по ширине страницы, или блока, в котором оно находится; если мы хотим сделать фото меньше, прописываем меньше проценты
- height=”auto” — высота картинки будет выравниваться пропорционально к ширине.
Еще раз проверяем, прописался ли атрибут alt в коде. Если все в порядке, страницу можно сохранять в черновики.
Финальная проверка: как фото смотрится в основном тексте
Нажали «Сохранить»? Самое время проверить итоговый вариант текста с оформлением. Если необходимо, выравниваем фотографии, смотрим, как контент будет отображаться в мобильной версии. Все иллюстрации должны быть опубликованы в одном стиле, желательно — одного размера.
Если вы пока не очень здорово разбираетесь в нюансах, обязательно изучите материал про оформление текстов для сайтов и блогов.
Когда все выглядит так, как требуется, и корректно работает, смело жмем кнопку «Опубликовать».
Теперь вы знаете, где искать, как обрабатывать и как правильно публиковать изображения на сайте. Помогла ли вам статья? Прояснила ли какие-то незнакомые моменты? Поделитесь в комментариях.
