Как легко добавлять изображения в свой блог, как профессионал

Вы написали свой лучший пост в блоге.

Серьезно, это отличный материал, который становится вирусным среди множества голодных читателей.

Ого, Сильвер! Во-первых, вам нужно привлечь их внимание.

Прежде чем кто-либо прочитает вашу блестящую статью, им нужно сначала остановиться и обратить внимание.

Вот и приходят образы..

Картинки, видео, скриншоты, диаграммы и иллюстрации — отличный способ удержать читателя от кликов. Добавление изображений в ваш блог помогает читателям понять вашу информацию и идеи и запомнить ваш пост.

Хитрость заключается в том, чтобы создавать и добавлять эти изображения для блога быстро и эффективно.

В этом посте мы расскажем вам обо всех шагах, инструментах и ​​​​хитростях, чтобы добавить изображения в свой блог, не тратя на это часы.

ПОЧЕМУ ИЗОБРАЖЕНИЯ РАБОТАЮТ

«Наш мозг — это в основном процессор изображений, а не текстовый процессор». – Психология сегодня

Мы (буквально) привязаны к изображениям. Нейроанатом Р.С. Фиксот подсчитал, что две трети активности нашего мозга посвящены зрительной деятельности. И это имеет смысл…

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

Онлайн ничем не отличается…

Ваши читатели бессознательно ищут актуальный или развлекательный контент, или и то, и другое. Фактически, статьи, содержащие релевантные изображения, имеют на 94% больше просмотров, чем статьи без изображений.

Статьи, содержащие релевантные изображения, набирают на 94 % больше просмотров, чем статьи без изображений . Нажмите, чтобы твитнуть .

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

Наш мозг может обрабатывать изображения в 60 000 раз быстрее, чем текст

На самом деле, 65% руководителей высшего звена по маркетингу говорят, что фотографии, видео, иллюстрации и инфографика являются основой для передачи истории их бренда.

Итак, если изображения так хороши, как вы должны добавить изображения в свой блог, чтобы получить больше трафика и лучшие результаты?

Начнем с размеров изображения.

ПИКСЕЛИ, ФОРМАТ, РАЗМЕР И ВСЕ ЭТО

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

Ориентация

Для большинства блогов лучше подходит горизонтальная ориентация (ширина больше высоты). Горизонтальные/пейзажные изображения занимают меньше места на экране, позволяя вашему контенту привлекать внимание читателей. Горизонтальные изображения также идеально подходят для публикации вашего блога в Facebook, Twitter и LinkedIn.

Но вертикальные или квадратные изображения лучше работают в Instagram и с большей вероятностью будут закреплены на Pinterest. Опять же, причина проста — Instagram и Pinterest посвящены изображениям. Вертикальное/портретное изображение занимает больше места на экране, что делает его более привлекательным.

Какую ориентацию вы выберете, зависит от ваших пользователей и социальных платформ, которые они используют.

Sprout Social поддерживает актуальный список лучших размеров изображений для различных каналов социальных сетей в этом посте.

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

Размер/сжатие

Размер изображения может означать две вещи: физический размер изображения (длина x ширина) и размер файла (в байтах).

Большинство изображений прямо с вашей камеры или с веб-сайта со стоковыми фотографиями имеют более высокое разрешение (размер файла) и физический размер, чем они должны быть для Интернета. Проблема с большими файлами изображений заключается в том, что они замедляют работу вашего сайта.

Цифровая фотография состоит из пикселей (px) — крошечных квадратных плиток цвета. Обычно мы говорим о пикселях двумя способами: количество пикселей и плотность пикселей. Количество пикселей — это количество пикселей, из которых состоит ваша фотография. Таким образом, фотография размером 800 на 600 пикселей просто означает, что ваша фотография имеет ширину 800 пикселей и высоту 600 пикселей.

Изображение слева имеет размер 3456 × 5184 пикселей и весит 2,7 мегабайта. Изображение справа было уменьшено до 800 x 1200 и 193 КБ.

Плотность пикселей или dpi — это количество пикселей на квадратный дюйм. Чем больше пикселей на квадратный дюйм, тем выше разрешение изображения и тем оно четче.

Для печати фотографий идеально подходит разрешение 300 dpi или выше. Но для Интернета хороший диапазон — 72–150 dpi.

Оптимальные размеры для вашего сайта

Целью вашего сайта является хорошее разрешение (не размытое) и скорость (не большая).

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

Найдите баланс между размером файла и качеством

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

Старайтесь, чтобы размер вашего изображения составлял от 150 КБ до 300 КБ. Взгляните на пример ниже. Исходное изображение было 7,6 МБ и шириной 5000 пикселей. Изображение слева было изменено до ширины 860 пикселей и сохранено в формате jpeg высокого качества, в результате чего был получен файл размером 250 КБ.

Вы едва сможете отличить это изображение от оригинала при просмотре в Интернете. Он идеально подходит для Интернета.

Изображение справа было изменено до ширины 860 пикселей, но сохранено в низкокачественном формате jpeg размером 30 КБ. Конечно, он будет загружаться быстро, но он нечеткий и будет выглядеть дилетантски.

Оптимальный размер изображения 150-300кб. Любое меньшее, и ваше изображение будет слишком нечетким.

Конечно, при добавлении изображений в блог не всегда возможно уложиться в размер менее 300 КБ. На дисплеях Retina сложная фотография может выглядеть нечеткой при размере 300 КБ.

Ключевой идеей для домашнего использования является сохранение как можно меньшего размера файлов, особенно если вы используете много изображений в своем посте! Время загрузки страницы влияет на ваш рейтинг в Google, и читатели, скорее всего, отключатся от страницы, которая загружается целую вечность.

Существует ряд бесплатных сервисов для уменьшения размера изображения, таких как Pic Resize и Tiny PNG. Или вы можете использовать бесплатные дизайнерские сайты, такие как Canva или PicMonkey, чтобы получить нужный размер и разрешение для любого сайта социальной сети или для вашего веб-сайта (подробнее об использовании этих инструментов ниже).

Такие инструменты, как Pic Resize, позволяют легко уменьшить разрешение изображения без ущерба для качества.

Использую ли я JPG, GIF, PNG, SVG?

Если вы когда-нибудь путались со всеми типами изображений (jpeg, gif…), это поможет.

При добавлении изображений в свой блог, какой формат лучше всего подходит?

• • JPG/JPEG — предлагает изображения отличного качества при небольшом размере файла. Это лучший вариант для фотографий, если они не должны быть прозрачными, анимированными или содержать много текста.
• • GIF – идеально подходит для небольшой графики и анимации, и они могут иметь прозрачный фон.
• • PNG — идеально подходит для детализированной графики, изображений с большим количеством текста или прозрачных изображений. Файлы PNG, как правило, больше, чем файлы JPG.
• • SVG — это масштабируемый векторный формат, что означает, что он остается четким и четким при любом разрешении. Они имеют тенденцию быть большими с точки зрения размера файла, но если у вас есть сложная графика, размер которой необходимо автоматически изменять, и/или есть эффекты прокрутки или анимация, SVG — идеальный выбор.

В большинстве случаев используйте jpeg для всех изображений, если вам не нужен прозрачный фон.

ПРИМЕЧАНИЕ. Не все веб-сайты настроены на автоматическую обработку файлов SVG. В WordPress есть плагины, которые помогут. Для сайтов, отличных от WordPress, попробуйте, и если ваш файл SVG не отображается, обратитесь к своему веб-разработчику.

Проверьте свои изображения

Не знаете, как ваше изображение будет отображаться в Интернете? Большинство систем управления контентом (например, WordPress) позволяют предварительно просмотреть черновик поста в блоге, прежде чем опубликовать его.

ПОПУЛЯРНЫЕ ИЗОБРАЖЕНИЯ

Каждая запись в блоге нуждается в избранном изображении.

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

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

В WordPress вы найдете ссылку для выбора избранного изображения в правой части меню WordPress.

СОЗДАВАЙТЕ СВОЙ ИМИДЖ

Стоковые изображения — это хорошо, но оригинал лучше, даже если вы просто добавляете изюминку к стоковому изображению.

Вам не нужно быть художником-графиком или иметь дорогое программное обеспечение, чтобы создавать собственные изображения. В бесплатных инструментах, таких как Canva и Picmonkey, есть широкий выбор шаблонов, изображений, а также готовой к использованию графики и шрифтов. Немного потренировавшись, вы сможете добавлять свои уникальные особенности изображениям или создавать цитаты, мемы, диаграммы и инфографику.

Вот изображение, которое я сделал в Canva всего за 5 минут.

Приложив немного дополнительных усилий, вы можете наложить заголовок на изображение.

Как только вы освоитесь с этими инструментами, вы сможете проявить творческий подход к своим результатам. Простые методы, такие как изменение размера изображений, добавление экранов, обрезка — даже выбор более интересных шрифтов сделает ваше изображение выделяющимся.

В этом посте вы узнаете больше о простых способах сделать ваши изображения яркими.

[Вам не нужно быть графическим дизайнером, чтобы украшать свои изображения, чтобы они выделялись.]

ИЗБЕЖАТЬ ЗАКОНА

Вы искали в Интернете, нашли идеальное изображение и добавили его в свой блог.

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

ЧТОАААААААААААА?

Изображения имеют право собственности, как и произведения искусства. И вы не можете использовать некоторые изображения без разрешения владельца. В этом посте мы объясним, как Creative Commons работает с изображениями.

Хорошей новостью является то, что существует больше сайтов, чем когда-либо, чтобы предоставить вам великолепные изображения, права на которые вы можете купить или использовать, указав автора.

Кредит художника

Если вы используете изображение под лицензией Creative Commons, рекомендуется указывать фотографа и источник. Большинство веб-сайтов со стоковыми фотографиями предоставят вам ссылку при загрузке изображения.

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

В BlogWorks мы используем несколько сайтов для наших изображений. У нас есть учетная запись в Adobe Stock, на которую мы полагаемся для блогов наших клиентов, плюс мы часто используем Pixabay, Unsplash, Refe и Magdeleine.

Adobe предоставляет высококачественный источник изображений вместе с другими программными пакетами для творчества. Если вы ищете новый простой способ поиска или создания изображений, вы можете ознакомиться с их продуктами здесь.

Если вы все еще не можете найти то, что хотите, перейдите на Librestock, где для поиска собраны изображения с более чем 40 сайтов. В этом посте мы перечислили 7 сайтов, где можно найти отличные фотографии.

Вы даже можете использовать Google для добавления изображений в свой блог — просто обязательно выберите «Помечено для повторного использования» в разделе «Инструменты».

Если вы используете Google для поиска изображений, всегда ищите «Помечено для повторного использования».

Небольшой совет по поиску «идеального» изображения: если вы найдете изображение немного лучше, чем то, которое вы нашли за первые 5 минут, это не сделает ваш пост вирусным. Ограничьте себя 5 минутами, чтобы найти достаточно хорошее изображение — вы всегда можете изменить его позже, если найдете лучшее.

ИСПОЛЬЗУЙТЕ ИЗОБРАЖЕНИЯ РЕАЛЬНЫХ ЛЮДЕЙ

Фотографии людей — одна из самых привлекательных форм контента в Интернете.

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

Но ваше изображение должно быть связано с содержанием или помогать объяснять концепцию или мысль — исследования показали, что читатели не обращают внимания на изображения людей, когда они являются общими, декоративными изображениями.

Когда дело доходит до социальных сетей, нас привлекают лица. Фотографии с лицами привлекают больше комментариев и лайков.

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

Стоковая фотография может быть шаблонной, неоригинальной и скучной (слева) или более интересной и оригинальной (справа).

ДОБАВЛЕНИЕ СКРИНШОТОВ И ДИАГРАММ

Допустим, вы пытаетесь объяснить, как использовать онлайн-поисковик или где найти на своем сайте вашу последнюю книгу, или даже как убедиться, что ваше электронное письмо с подпиской не попало в папку «рекламные акции» этого человека в Gmail.

Трудно объяснить словами, да?

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

Такой инструмент, как Snagit, является бесценным вложением. Всего за 50 долларов у вас есть готовая рабочая лошадка для скриншотов, видео и даже гифок (все скриншоты, используемые в этом посте, были созданы с помощью Snagit).

Вот видео, которое я создал в Snagit, используя Snagit для редактирования скриншота (теперь это мета!).

Пользовательские графики и диаграммы — еще один отличный способ объяснить сложные концепции или просто добавить немного веселья в ваш пост. OmniGraffle и Lucidchart предлагают инструменты для создания блок-схем, которые можно использовать для создания забавных диаграмм. У Piktochart есть бесплатная версия для создания инфографики и графики на основе данных.

Нужна диаграмма, чтобы помочь проиллюстрировать некоторую информацию? Вы можете взять их прямо из Excel, Google Sheets или Word. Просто скопируйте диаграмму и вставьте ее в текстовый редактор или сделайте снимок экрана.

И не бойтесь брать в руки карандаш или ручку! Набросайте свою идею и сделайте фото. Неважно, являетесь ли вы художником — вашим читателям понравится, что вы такие же, как они!

ДОБАВЛЕНИЕ ВИДЕО И GIF

Иногда одного текста недостаточно. Здесь могут помочь видео и анимация.

Giphy и Tenor — хорошие ресурсы для анимированных GIF-файлов. Sitepoint имеет большой список ресурсов, где можно найти изображения, видео и другие материалы Creative Commons.

Меня много раз спрашивали, как я добавляю видео в свой блог. Я, конечно, не эксперт, но когда дело доходит до чего-то, что пахнет техникой, я напоминаю себе, что «сделано лучше, чем идеально», и делаю это просто. От начала до конца, простое видео должно занять у меня не более 15 минут.

Вот иллюстрация шагов, которые я прохожу.

Вам нужно где-то разместить видео. Мы используем Vimeo уже много лет, и нам нравится его цена, быстрота и простота использования. Вы также можете использовать YouTube или Wistia.

Шаги по добавлению видео в свой блог довольно просты, если вы попрактикуетесь в них несколько раз, но они различаются в зависимости от вашего веб-сайта и места, где вы размещаете свое видео.

Вот как вставить видео с YouTube в WordPress:

1. Этот процесс стал очень простым. Начните с поиска нужного видео на YouTube.
2. Затем скопируйте URL-адрес этого видео (он будет выглядеть примерно так: https://www.youtube.com/watch?v=JKrPz6JHwYw).
3. Войдите на свой веб-сайт WordPress, откройте сообщение в блоге для редактирования, поместите курсор туда, где вы хотите видео, и вставьте URL-адрес.

Этот бесплатный инструмент позволит вам настроить внешний вид вашего видео на YouTube и, например, отключить надоедливые «связанные» видео.

Вот как вставить видео из Vimeo в WordPress:

1. • Чтобы получить код для встраивания вашего видео, перейдите на его страницу в Vimeo и нажмите кнопку «Поделиться».
2. • Щелкните ссылку «+Показать параметры» и скопируйте код для встраивания.
3. • Войдите на свой веб-сайт WordPress, откройте сообщение в блоге для редактирования и щелкните вкладку «Текст» в текстовом редакторе.
4. • Поместите курсор туда, где вы хотите разместить видео, и вставьте код для встраивания.

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

Примечание. Вы должны включить текст в свое сообщение с вашим видео, если вы хотите, чтобы ваше сообщение было обнаружено поисковыми системами, такими как Google. Вы можете увидеть, как это делается, в видеоблоге о путешествиях Gone with the Wynn. С каждым сообщением в блоге у них есть много текста, изображений и видео, чтобы заинтересовать вас, читателя, и в целях SEO.

ИСПОЛЬЗОВАНИЕ ПОСЛЕДОВАТЕЛЬНОЙ ТЕМЫ

Когда вы выбираете изображения или шрифты, рекомендуется соответствовать теме вашего сайта и блога.

Это может быть так же просто, как использование согласованного шрифта (я поклонник Helvetica Neue, Marker Felt, Yellowtail и Bebas Neue), цветовой схемы или стиля значков.

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

ВЫБОР ПРАВИЛЬНОГО ИМЯ ФАЙЛА

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

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

Например, если вы пишете статью о том, как выбрать лучшую жевательную игрушку для щенков, назовите свое изображение «лучшая жевательная игрушка для щенков.jpg». Если на вашем изображении изображен закат на пляже острова Самуи в Таиланде, назовите его «thailand-koh-samui-beach-sunset.jpg».

Используйте тире между словами, а не пробелы, знаки подчеркивания или объединение всех слов вместе.

Эта рекомендация исходит прямо от Google. Мы не уверены в точной причине этого, поскольку Google охраняет работу своего алгоритма поисковой системы лучше, чем фокусник охраняет свои уловки. Но Google Webmaster говорит, что тире между словами помогают Google находить ваши изображения!

АЛЬТЕРНАТИВНЫЙ ТЕКСТ

Когда вы загружаете свое изображение, видео или другой медиафайл, у вас есть возможность включить текст ALT. Вы должны делать это всякий раз, когда вы можете.

Текст ALT сообщает поисковым системам о вашем изображении, что помогает вашему рейтингу. Кроме того, программы чтения с экрана считывают ALT-текст, поэтому вы помогаете своему контенту быть более доступным.

Альтернативный текст на ваших изображениях объясняет, о чем ваше изображение.

Ваш ALT-текст должен помочь объяснить ваше изображение или мысль, которую вы пытаетесь проиллюстрировать. Как и при выборе имени файла, ваш текст ALT должен быть связан с содержанием вашей статьи или вашими ключевыми словами.

ТИТРЫ И ЗАГОЛОВКИ

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

В BlogWorks мы стараемся писать подписи, которые дополняют написанное. Идея в том, что если читатель прочитает только подписи, он получит хорошее представление о том, о чем статья.

BarkPost, изобретатели ежемесячной подписки на лакомство для собак Bark Box, дразнят любителей собак (таких, как я) дурацкими, забавными изображениями дворняжек, сочетающимися с заголовками в стиле голливудских таблоидов, например такими:

• • 5 признаков того, что шишки у вашей собаки вызваны чем-то опасным
• • 18 собак, которые не одобряют эту пытку водой, которую вы называете «время купания»
• • Я записал свою собаку в коробку для ухода за зубами, и вот что произошло

ВАШ КОНТРОЛЬНЫЙ СПИСОК

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

В качестве последней проверки задайте себе два вопроса:

• Будет ли это изображение удерживать читателя на странице дольше?
• Помогает ли это изображение читателю лучше понять мое сообщение?

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

В конце концов, наша цель — сделать так, чтобы наш блог читали, им делились и любили. Верно?

Понравилась эта статья? Вот еще 3 об изображениях, видео и о том, как сделать свой блог вирусным:

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

Сноски:

1. 1. В статье, опубликованной в Американском журнале офтальмологии, нейроанатом Р. С. Фиксот подсчитал, что 50% нашей нервной ткани прямо или косвенно связаны со зрением, а две трети электрической активности нашего мозга используются для обработки зрительных образов.
2. 2. Согласно одному исследованию, проведенному eMarketer, фотографии составляют 75% контента, публикуемого на страницах Facebook по всему миру, и вызывают 87% взаимодействия со стороны фанатов (по сравнению с менее чем 10% от любого другого типа сообщений).
3. 3. Исследование, проведенное Технологическим институтом Джорджии и Yahoo Labs, изучило 1,1 миллиона постов в Instagram и показало, что фотографии с человеческими лицами на 38% чаще получают лайки, чем фотографии без лиц. Они также на 32% чаще привлекают комментарии.

Фото LinkedIn Sales Navigator на Unsplash