Как добавить изображения в WordPress

Опубликовано: 2020-05-10

Этот пост поможет вам понять, как добавлять изображения в WordPress. Я даю вам знать, как добавить одно изображение прямо на страницу.

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

Вы также узнаете об источниках изображений, изменении размера и сжатии.

Пройдите прямо, чтобы добавить одно изображение в WordPress

Зачем использовать изображения в WordPress?

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

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

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

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

Поиск изображений для блога или веб-сайта

Учитывайте форму

Выбирая изображение, прежде всего подумайте о форме.

  • Он должен вписываться в обозначенное пространство - пейзаж, портрет или квадрат?
  • Мы не хотим потерять основной фокус изображения после изменения его размера.

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

Где искать изображения

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

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

Есть несколько способов получить фотографии для веб-сайта или блога, платные или бесплатные.

Платите профессиональному фотографу

Я сторонник профессиональных фотографов. Профессиональные фотографии могут сделать веб-сайт четким.

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

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

Сделайте фотографии продуктов, портфолио и команд за один день.

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

Однако я понимаю, что фотограф может стать дорогим для стартапов с большим оборотом продукции. Фотографировать дома может работать.

Самостоятельно фотографируй

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

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

Полезные товары, которые помогут в домашней фотосъемке.

  • Штатив для камеры.
  • Крепление для мобильного телефона на штатив.
  • Осьминог штатив.
  • Комплект освещения для фотосъемки.
  • Набор лайтбоксов для студии.

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

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

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

Спросите у друзей или деловых знакомых

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

Используйте стандартный веб-сайт

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

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

Вы можете получить профессиональные фотографии всего за 5 фунтов стерлингов за пожизненную лицензию. Это того стоит, если у вас есть бизнес.

Вот несколько сайтов с изображениями, которые мне нравятся: istockphoto.com ,enty20.com, shutterstock.com.

Сайт бесплатных изображений Pexels великолепен. Скачайте бесплатные фотографии от фотографов-любителей и загрузите свои собственные.

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

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

  1. Либо перейдите прямо на www.google.com и выполните поиск по теме, а затем нажмите ИЗОБРАЖЕНИЯ.
    Или перейдите прямо на images.google.com.
  2. Вверху нажмите ИНСТРУМЕНТЫ ПОИСКА.
  3. Выберите вариант "помечено для повторного использования".

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

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

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

Щелкните изображение, чтобы перейти на веб-страницу. Прочтите требования об авторских правах.

Может потребоваться ссылка на страницу фотографов или кредит.

Предупреждение при использовании изображений Google

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

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

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

Изменение размера и сжатие изображений для Интернета

То, как изображение изменяется, сжимается, сохраняется и размещается, влияет на рейтинг веб-страницы в поисковых системах.

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

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

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

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

Имейте в виду следующее:

  • Фотографии никогда не должны быть меньше 450 пикселей в ширину, потому что они, вероятно, будут складываться на мобильном устройстве, 450 заполнят экран мобильного телефона и будут чуть больше половины среднего экрана, поэтому хорошо для отображения в два столбца. Это значения по умолчанию для большинства плагинов WordPress.
  • Полноэкранные увеличенные изображения или «изображения-герои», как их называют (те, которые находятся в верхней части веб-сайта, которые растягиваются слева направо от экрана), должны иметь ширину 1920 пикселей, чтобы можно было разместить очень большие экраны. Он довольно большой, и даже не для больших телевизоров.
  • Подумайте об использовании плагинов адаптивных изображений в WordPress для отображения адекватных размеров для устройств.

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

Сохраняйте изображения для поиска Google

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

Сохраните изображение в соответствии с темой фотографии.

Т.е. сохранение изображения как <клубничный-сыр-торт.jpg> более информативно и эффективно, чем <image07_912.JPG>.

Поисковые системы распознают усилия.

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

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

Добавить изображение в WordPress

Как добавить изображения в WordPress
  • Войдите в админку WordPress и перейдите к записи или странице.
  • Используя редактор блоков Гутенберга, мы нажмем значок + PLUS, чтобы добавить «блок изображения». Просто наведите указатель мыши на любой блок, который уже используется на странице. Значок ПЛЮС появляется под блоком.
Добавление изображений в WordPress в редакторе блоков (Гутенберг)
  • Как только вы нажмете знак PLUS, появится меню, содержащее параметры блока.
  • Есть раздел «Наиболее часто используемые», который удобен для регулярно используемых блоков. Если вы не видите здесь ИЗОБРАЖЕНИЕ, воспользуйтесь полем поиска вверху.
  • Новый блок изображения помещается под символом ПЛЮС, на котором вы щелкнули. Блоки можно легко перемещать с помощью стрелок ВВЕРХ / ВНИЗ слева от выбранного блока.
  • Нажмите кнопку ЗАГРУЗИТЬ, чтобы загрузить изображение.
  • Изображение появится внутри блока. Любое загруженное вами изображение также будет отображаться в медиатеке.

Выравнивание изображений в WordPress

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

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

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

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

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

Изображения также можно связать или заменить с помощью панели инструментов изображения.

Столбцы WordPress для размещения изображений

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

Вот как, например, мы разместим изображение рядом с абзацем.

На небольшом устройстве, таком как смартфон, столбцы будут располагаться друг над другом. Обычно левый столбец располагается поверх правого.

Чтобы создать 2 столбца:

  • Нажмите символ ПЛЮС, чтобы создать блок.
  • Теперь нажмите КОЛОННЫ или найдите КОЛОННЫ.
  • Выберите крайний левый вариант, два столбца, равное разделение.
  • Нажмите знак плюса в каждом столбце, чтобы добавить изображение, как указано выше, в один столбец.
  • Нажмите знак плюса в следующем столбце, чтобы добавить абзац.

Оптимизация изображений для поисковых систем в WordPress

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

Альтернативный текст (тег alt)

Альтернативный текст означает альтернативный текст, это информационный тег.

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

Тег alt также помогает Google понять, что это за изображение.

При написании используйте ключевые фразы.

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

Подписи к изображениям

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

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

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

Если вы не добавите подпись, здесь вообще ничего не появится.

Галереи WordPress

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

Краткое руководство по добавлению галереи WordPress:

  • Нажмите символ ПЛЮС, чтобы создать блок.
  • Выполните поиск и нажмите ГАЛЕРЕЯ.
  • На странице или в публикации появится блок галереи.
  • Нажмите кнопку «Загрузить», чтобы загрузить изображения с компьютера.
  • Используйте кнопку «Медиа-библиотека», чтобы добавить изображения, которые уже размещены в мультимедийной библиотеке.
  • Выберите несколько изображений - они будут выделены синим цветом, и вы увидите галочку.
  • Нажмите синюю кнопку с надписью внизу справа - СОЗДАТЬ НОВУЮ ГАЛЕРЕЮ.
  • Продолжайте добавлять в галерею, используя ссылки слева.
  • Или ВСТАВЬТЕ ГАЛЕРЕЮ на страницу, используя синюю кнопку в левом нижнем углу.

После того, как галерея появится на странице, настройки можно будет изменить - выберите блок ГАЛЕРЕЯ, затем используйте настройки блока, которые отображаются на боковой панели справа.

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

Быстрый процесс добавления изображений в WordPress

  • Найдите изображение с подходящими пропорциями.
  • Убедитесь, что он доступен для повторного использования, или купите лицензию.
  • Измените ширину в пикселях по размеру статьи.
  • Используйте программу сжатия, чтобы сбить kb.
  • Сохраните его в соответствии с требованиями Google.
  • Добавьте его в сообщение, страницу или галерею WordPress с помощью блоков.
  • Оптимизируйте каждое изображение, используя теги ALT, теги заголовков и подписи.