Оптимизация картинок нужна для качественного SEO-продвижения сайта. Но когда возникает речь об иллюстрациях, самый частый вопрос у предпринимателей — “Где их брать?”. А ещё — как находить картинки бесплатно и делать это легально. Сегодня же речь пойдет о технической стороне оформления картинок для сайта. Наталья Солодовник написала простой алгоритм подготовки изображений к загрузке на сайт, а также список сервисов, которые вам в этом помогут.
Если вы не очень давно завели блог, то можете не знать, что вам необходима оптимизация картинок для SEO-продвижения сайта. Разве не достаточно того, что вы их просто добавили на сайт и подписали? Нет, и сегодня расскажу, почему.
Оптимизация изображения для сайта: кому это вообще нужно?
Здесь есть сразу несколько аргументов, на которые стоит обратить внимание.
- От правильного оформления (оптимизации названия файла и атрибутов) зависит, смогут ли изображения с вашего сайта появляться в выдаче поисковых систем по картинкам. И, как следствие, будет ли у вас бесплатный трафик и посетители на сайте из этого источника.
- От правильного размера (веса) изображений зависит общий вес страницы и скорость её загрузки. Это оценят и пользователи (особенно те, кто заходит с мобильных устройств), и поисковые системы. Более “лёгкой” странице поисковики отдают более высокие позиции при прочих равных.
- Наличие атрибута Alt у картинок помогает правильно воспринимать содержимое сайта людям с ограниченными возможностями, которые не видят сайт, а используют программы чтения с экрана.
Ещё “тяжёлые” картинки быстро съедают место на хостинге, где расположен ваш сайт. А значит, вам придётся докупать дисковое пространство либо сжимать картинки на сайте. А это всегда хлопотно, особенно если сайт активно и давно ведётся.
Чтобы быстро выйти в онлайн, понадобится масса инструментов. В конце статьи или прямо сейчас скачайте бесплатную подборку из 116 сервисов, которые облегчат работу с текстами, изображениями, видео и аудио
Трафик с картинок: как заслужить любовь поисковых систем
Умные поисковики сегодня умеют определять множество параметров. Оптимизация картинок для SEO-продвижения сайта включает в себя:
- название файла,
- наличие и содержание атрибута alt,
- размер файла,
- формат картинки.
Как назвать файл и что прописать в поле Alt, чтобы изображения с вашего сайта появились в Гугле или Яндекс.Картинках
Обратимся к рекомендациям от самого Гугла:
Обратите внимание: сейчас поисковые системы очень неодобрительно относятся к переоптимизации картинок под ключевые запросы. Считывая название файла и значение alt, они сверяют его с тем текстом, которые расположен рядом с картинкой. Если смысловой связи нет, то это будет скорее минусом, а не оптимизацией.
Не злоупотребляйте ключевыми словами. Наша задача — помочь поисковым системам понять, что изображено на картинке.
И вот пример, как это сделать оптимально:
Как загружать картинки на сайт, вставлять в статьи и где прописывается атрибут alt, узнайте здесь.
Сам файл, как вы уже поняли, стоит также называть, ориентируясь на смысл картинки. Рекомендуется делать это в формате чпу. То есть русское название заменять транслитом — латинскими буквами, пробелы в фразах — коротким тире.
Так “домик в деревне” нужно превратить в “domik-v-derevne”, а сделать такую замену быстро поможет сервис [link]translit.net[/link], [link]http://translit-online.ru/yandex.html[/link] или аналоги.
Вариант domik-v-derevne.jpg в качестве названия предпочтительнее, чем IMG00025.JPG. Но если у вас уже загружены картинки с неоптимизированными названиями файлов, то удалять, переименовывать файлы и заново загружать их, конечно, не нужно — это не стоит усилий. Учтите рекомендацию на будущее.
Скорость загрузки сайта и вес картинок
Следить за скоростью загрузки страниц и сжимать картинки для уменьшения их веса важнее всего тем, у кого много посетителей с мобильных устройств. А также тем, кто работает в конкурентных темах (а особенно интернет-магазинам и онлайн-сервисам). Ведь пользователи спешат в поисках решения. Если ваша страница загружается долго, то её содержимое могут закрыть, так и не увидев.
Быстрые сайты находятся на более высоких позициях в поиске, а вот одной из главных причин долгой загрузки являются именно изображения.
Скорость загрузки страниц можно проверить сервисом от Гугла, он сразу покажет, какие картинки нуждаются в оптимизации, какие изображения можно уменьшить.
Если же на сайте много фото (например, это блог о путешествиях или визитка фотографа) и страница остаётся большой даже со сжатыми картинками, то можно настроить плавную загрузку изображений при помощи плагина [link]BJ Lazy Load[/link] (для сайтов с CMS WordPress). В этом случае картинки будут загружаться по мере появления на странице при прокрутке, а не все сразу.
Оптимизируем размер и вес картинок без потери качества: сервисы и лайфхаки
Чаще всего неоптимизированными остаются картинки с фотостоков, которые ставятся на лендинги в качестве фона страниц. Или личные фото, загруженные на сайт без обработки.
Обычно такие фото имеют размер не менее 5 Мегабайт, а их размер (ширина и высота) может достигать 7360х4912 пикселей. А ведь популярные размеры экранов — это 1024×768, 1152×864, 1280х960, оптимальные параметры фонового изображения для сайта всего 1680х900px, такой огромный формат как 7360х4912 просто не нужен.
Лайфхак: чтобы сжать картинку по весу, часто достаточно уменьшить её размер в пикселях.
Часто уменьшения размера в пикселях уже достаточно для того, чтобы снизить вес картинки до оптимального. Это можно сделать в любом графическом редакторе. К примеру, картинка для статьи на сайте azconsult.ru может быть шириной 650px или меньше.
Сервисы для сжатия картинок
Если нужно сохранить большой размер холста, чтобы передать качество и детали, то вам поможет Фотошоп или любой из множества онлайн-сервисов оптимизации изображений. Вот пара проверенных из нашего арсенала:
[link]Optimizilla[/link] — удобен тем, что позволяет загружать сразу до 20 файлов, регулировать процент сжатия и скачивать все файлы одним архивом.
[link]Squoosh[/link] — имеет встроенный редактор, что позволяет сразу масштабировать картинку. Наглядно показывает снижение качества при сжатии. Кроме привычных форматов jpeg, jpg, bmp умеет сжимать png (это, к примеру, файлы скриншотов или снимков экрана, их часто забывают оптимизировать) и файлы иконок svg.
Что делать, если на сайте уже есть картинки слишком большого размера
Для сайтов на Вордпрессе можно установить полезный плагин [link]Compress JPEG & PNG images[/link] от сервиса TinyPNG. Он поможет найти и сжать большие файлы сразу на вашем сайте. В бесплатной версии оптимизация картинок для SEO-продвижения сайта возможна, но до 500 файлов в месяц.
Не забудьте сделать резервную копию сайта или проверить её наличие на хостинге перед тем, как начинать работу с картинками, чтобы оставить возможность отменить изменения.
Чек-лист: оптимизация картинок для SEO-продвижения сайта
Давайте ещё раз, по пунктам, что нужно сделать с каждым изображением сайта перед публикацией.
- Уменьшить размер картинки (ширину и высоту в пикселях) под конкретную задачу на сайте.
- Оптимизировать размер (вес в Кбайтах) — насколько это возможно без потери качества, оптимально загружать файлы не более 50 Кб.
- Задать правильное имя файлу с картинкой перед загрузкой на сайт.
- Прописать атрибуты alt (обязательно) и title (желательно), которые будут соответствовать тому, что изображено на картинке.
- Добавить подпись к картинке (если она уместна по смыслу текста и в общем оформлении страницы).
Как видите, сам алгоритм оптимизации картинок довольно прост. Если вы будете ему следовать или впишете его в задачи контент-менеджера сайта, то хлопот в будущем можно избежать. А быстрый сайт и посетители из поисковых систем, заглянувшие в ваш блог или интернет-магазин с оптимизированных картинок, будут наградой за этот труд.
Наталья Солодовник, интернет-маркетолог, разработчик сайтов и лендингов на WordPress, технический продюсер онлайн-проектов.
[tip]
И ещё полезные онлайн-сервисы:
- 7 простых онлайн-сервисов для обработки видео
- Сервисы для обработки аудио
- Как записать видео с экрана: программы и онлайн-сервисы
- Онлайн-сервисы для создания презентаций
[/tip]
