Как лучше всего представить свои изображения в Интернете

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

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

Сохранение и загрузка изображений

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

Любой веб-браузер способен отображать изображения меньшего размера, чем они есть на самом деле, если это указано в коде, но это не приводит к уменьшению фактического размера файла. Изображение размером 500 КБ, отображаемое на 50% от его полной ширины и высоты, по-прежнему будет иметь размер 500 КБ. Блоггеры, которые не разбираются в HTML и WordPress, вполне могут предположить, что, поскольку их изображения не выглядят большими на экране, это означает, что они будут быстро загружаться, но это не всегда так.

Чтобы проверить размер изображения, щелкните правой кнопкой мыши или щелкните, удерживая нажатой клавишу Control, изображение в своем блоге и выберите в меню пункт «Просмотреть/открыть изображение» (формулировка может незначительно отличаться в зависимости от используемого браузера). Если открывшееся изображение намного больше, чем то, которое вы видите в своем блоге, это означает, что ваши изображения имеют неправильный размер.

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

Стоит потратить пару дополнительных минут на изменение размера и сжатие изображений перед их загрузкой. Это можно легко сделать в Photoshop или любой другой программе для редактирования изображений, которую вы используете. Вы также можете использовать бесплатные онлайн-инструменты, такие как PicMonkey и оптимизатор изображений Dynamic Drive.

Изменение размера изображений вручную дает вам полный контроль над сжатием и значительно сокращает время загрузки, но при желании вы также можете использовать изображения с измененным размером, которые WordPress автоматически генерирует при каждой загрузке. Когда вы вставляете изображение в сообщение, у вас есть возможность вставлять полноразмерные, большие, средние или уменьшенные изображения. Вы можете изменить эти размеры в соответствии с дизайном вашего блога в меню «Настройки» > «Мультимедиа» . Имейте в виду, что если вы выберете этот метод, ваши исходные полноразмерные изображения будут доступны любому для бесплатной загрузки с вашего веб-сайта — не лучший вариант для фотографов и иллюстраторов!

Оптимизация изображений и удобство использования

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

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

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

1. Имя файла

Во-первых, когда вы сохраняете изображения, убедитесь, что они имеют описательное имя файла. Если вы оставите ваши изображения с именами IMG_013445.jpg или какими бы они ни были, когда они сняты с вашей камеры, это не даст поисковым системам никакой подсказки относительно того, что они изображают. Используйте подходящие описательные ключевые слова, разделенные дефисом, например, kids-playing-ocean.jpg

2. Альтернативный текст

Когда вы загружаете свое изображение через Media Uploader, WordPress предлагает несколько полей для описания файлов. Хотя их можно оставить пустыми (что многие блоггеры делают для экономии времени), чем больше полей вы заполните, тем лучше для SEO и удобства использования. наиболее важным из них является альтернативный текст, сокращение от «альтернативный текст».

Это текст, который отображается, когда изображения отключены или не могут быть показаны по какой-либо другой причине, поэтому он должен действовать как описание того, что представляет собой изображение. Поисковые системы также читают этот текст и используют его, чтобы решить, о чем страница и где разместить ваш сайт в списках. Например, если вы свадебный фотограф из Техаса, вы должны убедиться, что замещающий текст для всех ваших изображений в блоге включает много описательного текста, включая такие ключевые слова, как «свадебный фотограф» и «свадебная фотография в Техасе». Однако имейте в виду, что, как и в случае с текстом вашего блога, важно не переусердствовать с ключевыми словами в описаниях изображений.

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

3. Название изображения

Название изображения похоже на замещающий текст, но имеет немного другое назначение. Вместо того, чтобы предоставлять альтернативную информацию к изображению, заголовок должен предоставлять дополнительную информацию. Название изображения — это текст «подсказки», который появляется во всплывающем окне, когда вы наводите курсор на изображение. Этот текст важен как для удобства использования, так и для SEO и должен предоставлять быструю и актуальную информацию об изображении или о том, на что оно ссылается.

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

4. Подпись к изображению

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

Связывание изображений

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

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

Чтобы решить эту проблему, просто выберите «Нет» в качестве поля «URL-адрес ссылки», когда вы загружаете изображение в WordPress, если вы действительно не хотите связать его с определенной страницей. Если вы делаете это, убедитесь, что вы используете название изображения или подпись, чтобы указать, на что изображение ссылается.

Размещение изображения

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

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

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

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

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

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

Украсьте свой блог изображениями

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

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