Как сделать фотографии для сайта
Добавил пользователь Валентин П. Обновлено: 04.10.2024
Уникальность содержимого (текстового и графического) – обязательное условие для нормальной работы сайта и его адекватного ранжирования в поисковых системах. И если о тонкостях работы с текстами на нашем ресурсе написаны уже десятки публикаций, то о том, как правильно работать с графикой, мы еще не рассказывали. Пришло время исправлять этот пробел.
На самом деле ответ на вопрос, как сделать картинку уникальной для поисковиков, значительно проще, чем ответ на аналогичный вопрос о тексте. Во всяком случае, пока это именно так. Уникализация текста – сложный творческий и технических процесс, требующий знаний языка и оттачивающийся годами. А сделать картинку уникальной для поисковиков может даже ученик средних классов школы – без особых проблем. Но мы все равно расскажем об этом – для тех, кто совсем не имеет опыта подобной работы.
Зачем нужны уникальные изображения на сайте?
Ответ банален, но точен – только уникальный контент работает в XXI веке. Но создавать реально уникальные изображения не всегда посильно. Поэтому будем решать вопрос подручными средствами.
Что влияет и что не влияет на уникальность картинки?
На уникальность картинки сейчас уже никак не влияет обрезка ее как по длине, так и по ширине – если при этом изображение не деформируется. То есть поисковик в состоянии попиксельно, точка за точкой проанализировать изображение и определить, что это – кусок другого, не принадлежащего вам изображения. Также с большой долей вероятности можно утверждать, что поисковик определит как неуникальную картинку, которая является вертикальным или горизонтальным отражением исходника – опять же если не проводились другие манипуляции.
А вот что при уникализации картинки для поисковых систем подходит сейчас и будет подходить в обозримом будущем:
Все это достаточно просто и быстро позволит вам сделать картинку для сайта уникальной.
Как сделать уникальную картинку: простые шаги
Самым простым способом сделать картинку уникальной для сайта и для поисковых систем – использовать графический редактор. Причем совсем не обязательно профессиональный Photoshop, можно и какие-то значительно более простые инструменты, исключая лишь встроенный в Windows редактор Paint. Сейчас даже можно найти сайты, которые предлагают сделать картинку уникальной онлайн. Но мы остановимся на нормальных редакторах и для примера возьмем именно Фотошоп.
В общем, после нескольких таких движений вместо исходной картинки вы сможете получить примерно такую:
Такую картинку уже можно смело вставлять на сайт, она будет распознана как уникальная. Но помните — речь идет только про уникальность для поисковиков. В правовом поле такие манипуляции вряд ли будут считаться правильными.
==
Если вам нравятся наши публикации – подписывайтесь на канал Лаборатории Контента в Яндекс.Дзене и поощряйте наши тексты лайками и репостами!
Где брать фото на сайт?
Смартфоны, зеркальные и беззеркальные камеры – вокруг полно техники, которая умеет снимать. Выбираете нужный ракурс, сюжет – и вперед, творить. Будет здорово, если фотография получится уникальной в своем роде и будет отличаться от остальных картинок в Интернете. Иначе смысл делать свою просто теряется.
Знаете ведь, как фотографируются на фоне Пизанской башни? В голове сразу рисуется поза, композиция (если ее так можно назвать) и все остальное. Поэтому если делать фото самостоятельно, то лучше будет снять по-своему. Иначе гораздо проще найти уже готовую. На любимом вами сайте с бесплатными фотографиями. Две ссылки я написал чуть выше.
На этих сайтах, кстати, все в порядке с авторскими правами. В том смысле, что там открытая лицензия, можно брать и использовать на сайте. Есть, конечно, и платные варианты. Shutterstock, например, как наиболее известный. На нем изображения платные, но для кого-то это тоже хороший вариант поиска изображений.
Кстати, есть фотостоки, где можно найти инклюзивные снимки. Их подборку можно найти здесь.
Как подготовить фото для загрузки на сайт?
Итак, у нас есть исходная картинка. Это либо фото из фотобанка, либо вы сделали снимок сами. И первый шаг, который сразу стоит сделать, – уменьшить размер картинки.
И фотобанки, и камеры выдают изображения в максимальном качестве. Unsplash отдает фото в исходном разрешении, Pixabay позволяет выбрать разрешение при загрузке. Но если скачивать по умолчанию, фото будет загружено скорее всего в большом разрешении. А оно зачастую больше 4К (то есть больше 4 000 пикселей по горизонтали). Или очень стремится к этому.
Нужны ли на вашем сайте фотографии такой детализации? Скорее всего, нет. Есть, конечно, исключения, но это узкоспециализированные сайты. Камера смартфона выдает фотографию размером 5-8 Мб. Зеркальная камера – от 20 до 100 Мб (в формате RAW в профессиональных камерах). Но все это меркнет по сравнению с фотографией Луны разрешением 681 гигапиксель.
Шестьсот восемьдесят один гигапиксель! Буквами это выглядит еще более внушительно. На минуточку, размер этого изображения 950 гигабайт. У вас есть внешний жесткий диск на 1 терабайт? Так вот, одна фотография Луны как раз туда влезет. Даже останется немного свободного места. Или вот, например, панорама Рио-де-Жанейро разрешением в 152 гигапикселя. Детализация просто поражает.
Но эти два примера скорее исключение. На большинстве информационных сайтов такие разрешения просто ни к чему. Картинка размером 1200×800 или 1600×900 пикселей будет в самый раз. И по разрешению, и и по объему. До 500 килобайт – вполне уместный размер файла. Сжать изображение можно онлайн-сервисами типа Squoosh.
Что такое цифровые отпечатки?
В EXIF-данные записываются сведения о модели смартфона (или другой камеры), дате съемки, данных по кадру (диафрагма, выдержка, ISO). Вот пример моего недавнего фото и перечень данных из EXIF.
EXIF-данные из фотографии.
Но самое интересное в этих данных – это не какая-нибудь выдержка, а нижняя строчка, видите? В метаданные записывается место съемки. С очень подробными координатами. Копируем широту и долготу в браузер и, пожалуйста, – у нас есть точка на карте, где было сделано фото.
Здесь нужно уточнить, что место съемки записывается не постоянно, а при некоторых условиях:
- в смартфоне включен GPS. Если, например, включить авиарежим, то все внешние модули связи отключаются. При этом камера все равно снимает, но уже без записи координат;
- зеркальная камера будет записывать координаты, если только в фотоаппарате есть встроенный модуль GPS.
Особенности WordPress при обработке изображений
Итак, вы выбрали и подготовили изображение. Осталось его загрузить. Учитывайте, что, начиная с версии 5.3, WordPress всерьез взялся за большие изображения, загружаемые на сайт. Теперь все большие (неприлично большие) изображения автоматически уменьшаются. И это прекрасно. Можно больше не устанавливать плагины, которые подрезают такие большие картинки.
Но разрешение – это одно, а размер файла – другое. Можно иметь картинку разрешением 500х500 пикселей, но весить она при этом может пару мегабайт. Поэтому все загружаемые на сайт картинки лучше оптимизировать самостоятельно. Потому что это снежный ком. Большие и тяжелые картинки дольше грузятся. Долгая загрузка не лучшим образом сказывается на поисковой индексации сайта. Ну, и зачем вам такие проблемы?
Alt-описания
Буквально пару абзацев про seo-составляющую изображений. У каждой картинки на сайте есть поле для заполнения alt-описания. На тот случай, когда все картинки отвалятся при загрузке, в дело вступает это самое поле. Тогда вместо изображения будет показано его текстовое описание.
Зайдите на любой сайт, где можно включить версию для слабовидящих. Активируйте ее и в настройках отключите показ изображений. Теперь посмотрите, как выглядит сайт без картинок и какие alt-описания прописаны у каждого изображения. Будет сюрприз, но есть сайты, где alt-атрибут либо совсем пустой, либо там написано совсем не то, что нужно.
Подведем итог
Любая картинка или фотография на сайте должна привлекать внимание. Иначе можно обойтись и без нее. Ставить на сайт совсем уже стоковые и приевшиеся изображения не нужно. Есть хороший выбор качественных фотографий по самым разным темам. Но при прочих равных загружайте свои фотографии. Это и индивидуальность, и уникальность, и просто здорово.
Хорошая статья — это оформленная статья. Разумеется, важность содержания никто не отрицает, но без оформления текст, скорее всего, пройдет мимо читателя. Впрочем, просто добавить иллюстрации — тоже не выход. Для того чтобы картинки в тексте смотрелись органично, быстро грузились и участвовали в поиске, их необходимо правильно обработать и разместить на странице.
В этой статье я расскажу:
- где найти фотографии для своей статьи
- как обработать фото, чтобы уменьшить его вес, но не потерять качество
- как правильно публиковать картинки в админке 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.
Так как правильно уменьшать фотографии?
Мы видим, что в процессе сжатия вес фотографий уменьшился на несколько процентов. При этом качество изображения и его размеры остались прежними.
Как назвать изображение для публикации
Прежде чем загрузить фото на сайт, ему нужно дать имя. Название должно касаться темы статьи и коротко говорить о том, что на нем изображено. Для SEO-оптимизации в названии картинки лучше использовать ключи, которые мы гармонично вписывали в наш текст. Тогда наше фото сможет участвовать в поиске вместе с текстом. Особенно это хорошо для информационных статей.
Название картинки с помощью латинских букв — важный момент в оптимизации сайта.
Чтобы назвать картинку, прогоните ключ на русском языке через любой транслитератор и запишите его латинскими буквами. Между словами поставьте дефисы. Тогда при загрузке фото на сайт сразу правильно пропишется URL картинки.
В новых версиях wordpress транслитерация названий иллюстраций происходит автоматически. Это очень удобно, конечно.
Как загрузить фото на сайт
Теперь изображение загружаем на сайт и размещаем в тексте. Принцип загрузки фото в разных админках похож, потому что медиафайлы на сайтах хранятся в галереях. Сначала нужно загрузить фото в галерею, а потом оттуда вставить на нужную страницу.
Напомню, что перед этим изображение следует обрезать, сжать и правильно подписать. Все это нужно сделать для оптимизации сайта.
Когда фотография загружается в галерею, у нее автоматически прописывается правильный URL-адрес и заголовок латинскими буквами.
Теперь изменяем заголовок картинки и пишем его русскими буквами. Обязательно прописываем атрибут alt — очень важный элемент для поисковых машин. В теге устанавливается альтернативный текст для изображения. Это название отображается, когда загрузка графики в браузере пользователя отключена. По нему можно понять, что изображено на картинке, когда саму картинку не видно.
Проверьте, чтобы заголовок и атрибут alt для картинки обязательно были прописаны.
Сохранение иллюстрации на странице
Наша задача — чтобы у пользователя изображение корректно отображалось как на компьютере, так и на смартфоне. Поэтому настраиваем изображение так, чтобы в мобильной версии фото не меняло свои пропорции.
Для этого в HTML-коде ставим новые показатели ширины и высоты фотографии:
- width=”100%” — это означает, что на любом экране фото будет автоматически отображаться по ширине страницы, или блока, в котором оно находится; если мы хотим сделать фото меньше, прописываем меньше проценты
- height=”auto” — высота картинки будет выравниваться пропорционально к ширине.
Еще раз проверяем, прописался ли атрибут alt в коде. Если все в порядке, страницу можно сохранять в черновики.
Финальная проверка: как фото смотрится в основном тексте
Теперь вы знаете, где искать, как обрабатывать и как правильно публиковать изображения на сайте. Помогла ли вам статья? Прояснила ли какие-то незнакомые моменты? Поделитесь в комментариях.
Важная часть любого блога – контент, который помогает вовлекать и увлекать. Картинки в блоге могут быть статичными или анимированными, главное – чтобы они были красивыми и качественными. Создавайте лучшие картинки для своих блогов – в VistaCreate это можно делать бесплатно.
Создавать баннеры для блога легко
Делайте идеальные баннеры быстро и просто с помощью конструктора VistaCreate. У вас под рукой готовые шаблоны, более 10 500 дизайн-элементов и 60+ миллионов фото – выбирайте, адаптируйте, создавайте уникальное.
Создавайте собственные изображения для блога с инструментами VistaCreate
Дизайны, которые нравятся. Инструменты, с которыми просто. Создавайте визуальный контент так быстро, как хочется.
Стильные шаблоны
Выделяйтесь среди конкурентов с помощью наших профессиональных шаблонов. Каждый из них – уникальный, со своим стилем и дизайном. Включите воображение на полную, чтобы создавать потрясающие баннеры блога в любом из наших шаблонов. У вас под рукой тысячи готовых шаблонов – выбирайте любые и персонализируйте их на свой вкус.
Персонализировать
Создавайте изображение для блога в своем стиле, редактируя готовые шаблоны. Дизайн уже готов, но вы можете заменить цвета или изображения, добавить новые надписи и загрузить свои картинки. Или просто использовать любые дизайн-объекты из огромной библиотеки VistaCreate. Можно изменить буквально все, что захочется!
Редактировать просто
Любой графический объект, изображение или шрифт можно отредактировать за пару секунд – изменить размер или добавить визуальные эффекты. Мы помогаем создавать изображения, которые помогут обратить на себя внимание в огромном море контента.
Меняйте размер одним кликом
Дизайн-объекты для потрясающего оформления
У вас под рукой огромная коллекция линий, иллюстраций, наклеек, рамок, форм и масок – то есть все, чтобы создавать потрясающие изображения и баннеры для своего блога.
Безграничные возможности дизайна с
Творческие ресурсы
- Используйте 50K+ шаблонов и скачивайте без ограничений
- Доступ к 50M+ лицензионных фотографий, видео и векторных изображений
- Первоклассные шрифты, музыка, фоны и объекты дизайна
Возможности продукта
- Приглашайте до 10 участников в свою команду
- Создавайте фирменные стили с вашими цветами, шрифтами и логотипами
- Используйте безлимитное хранилище для ваших файлов
Как сделать изображение блога
Выбрать формат
Выбрать шаблон
Выберите один из шаблонов в коллекции – каждый их них создан профессиональными дизайнерами.
Персонализировать и редактировать
Сделайте дизайн авторским, отредактировав его на свой вкус. Добавьте или удалите дизайн-объекты, изображения и шрифты, измените размеры или цвета.
Загрузить и поделиться
Когда дизайн будет готов, загрузите его в одном из четырех форматов – JPG, PNG, PNG без фона или PDF. Еще можно поделиться им в соцсетях или по электронной почте.
Вдохновляйтесь коллекцией стильных шаблонов
Блоги с отличным визуальным контентом всегда привлекают больше внимания читателей. Вы можете создавать этот контент сами. В нашей коллекции изображений уже более 60 млн фотографий.
Частые вопросы
Можно ли конвертировать изображение блога в публикации для соцсетей?
Мне нравится дизайн изображения для блога, но хотелось бы заменить картинки. Это возможно?
Да. В шаблонах VistaCreate вы можете персонализировать и отредактировать любой элемент, включая изображения. Например, заменить фото любым из изображений из нашей огромной библиотеки бесплатных, премиальных (в VistaCreate Pro) и стоковых фото. Еще можно загрузить свои фото и одним движением перенести их в дизайн.
Можно ли сделать вертикальное изображение в VistaCreate?
Читайте также: