Как оптимизировать изображения для скорости сайта, поисковых систем и …

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

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

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

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

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

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

Изображение, используемое в верхней части этого поста, любезно предоставлено компанией Pexels, которая является отличным веб-сайтом для получения изображений без лицензионных платежей, изначально она имела ширину 5000 пикселей и размер файла 10 МБ, уменьшив размер пикселя до 1200 и сжатие без потерь, окончательная версия всего лишь 61 КБ и все еще высокого качества.

Альтернативные инструменты, подобные TinyPNG, которые также предлагают сжатие изображений без потерь онлайн бесплатно;

Smush.
krakken

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

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

Имя файла

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

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

Детали изображения / мета

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

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

Теги заголовка и Alt

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

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

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

Совет по WordPress

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

Доступные поля включают.

Название: не более 60 символов.
Описание Не более 155 символов.
Надпись: Необязательно, однако, она может хорошо смотреться на некоторых статьях и предлагать постоянно видимый контекст под вашим изображением.
Alt tag: не более 122 символов и, возможно, наиболее важно дополнить ваши ключевые слова и некоторую информацию об изображении.

Создать соглашения / протоколы и, возможно, шаблоны

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

заключение

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

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

Вот некоторые другие статьи, которые могут быть полезны: