Как оптимизировать изображения и фото сайта


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

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

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

Оптимизируем векторные изображения 

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

Векторные изображения имеют основный формат svg. Файл svg можно создать прямо в текстовом редакторе с помощью тега <svg>. Также разметку svg встраивайте в веб-страницу.

Уменьшить размер векторных файлов можно, оптимизировав их с помощью решения svgo. Он очищает файлы от бесполезной информации: комментариев и скрытых ненужных элементов. Файлы становятся меньше, но качество отрисовки остается на прежнем уровне.

Оптимизируем растровые изображения 

Растровые изображения состоят из пикселей. Каждый пиксель содержит информацию о цвете и прозрачности в цветовой модели RGBA (red, green, blue, alpha — прозрачность). В браузере 256 оттенков на каждый канал цвета, который в пересчете занимает 8 битов. Каждый пиксель весит: 4 канала х 8 бит = 32 бита или 4 байта. 

Легко рассчитать вес фотографий самостоятельно, зная размер в пикселях. Допустим, изображения имеет размер 50 х 50 пикселей. Это 2 500 пикселей. 

1 пиксель = 4 байта. 
2500 пикселей х 4 байта = 10 000 байтов 
10 000 байтов / 1024 = 10 КБ

Пример расчета веса изображений для разных размеров: 

Размер изображения     Количество пикселей     Вес файла, КБ
100 х 100     10 000        39   
250 х 250     62 500        244   
500 х 500     250 000        977   
800 х 800     640 000        2500   

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

  • Снижаем глубину цвета. Иногда широкая палитра для отображения цветов не нужна. Если каждый канал имеет 256 оттенков, то мы имеем более 2500 цветов. Ограничьтесь палитрой в 256 цветов всего, тогда на каждый канал будет приходиться 2 бита вместо 8, а пиксель будет весить 2 байта вместо 4. Мы уменьшили вес изображений в два раза.

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

  • Масштабируем изображения. На большинстве сайтов используются изображения большего размера, чем нужно. Администраторы вставляют картинки тех размеров, что у них есть, а уменьшение их размера до требуемых выполняется со стороны браузера. Выясните, совпадает ли фактический и отображаемый размеры фотографий на вашем ресурсе с помощью Инструментов разработчиков Chrome. Наведите курсор и сравните значения.

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

Размер изображения больше всего лишь на 10 пикселей, но вес прибавляется существенно:
Фактический размер     Отображаемый размер     Лишний вес, пиксели
210 х 210        200 х 200        210х210 - 200х200 = 4100   
510 х 510        500 х 500        510х510 - 500х500 = 10 100   
910 х 910        900 х 900        910х910 - 900х900 = 18 100   

Сжимаем данные 

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

        Прозрачность
        ДА     НЕТ 
Анимация      ДА      GIF     -  
      НЕТ     PNG          JPEG 

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

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

  • Compressor сжимает картинки на 90% в формате lossy. Есть и второй режим — lossless, в котором сжимают без потери качества файлы png.

  • ezGIF работает с форматом gif. Доступны три способа сжимания: оптимизировать, обрезать изображение или уменьшить длину и ширину. В сервисе есть дополнительные опции: регулировка скорости, фильтры, надписи, водяной знак и создание новой гифки из видео, картинок или нескольких других гифок.

  • Jpegtran оптимизирует изображения в формате jpeg. Это утилита, которая входит в libjpeg. С ее помощью убираются метаданные из изображения. При сжатии указывайте значение самостоятельно. Подберите наилучшее соотношение методом подбора, попробовав значения от 5 до 95.

  • Optipng — инструмент сервиса Google Page Speed. С его помощью сжимайте картинки png без потери качества. Сжатие происходит разными способами. Основная идея — игнорирование ненужных функций. Например, полноцветности для черно-белых картинок.

  • Gifsicle оптимизирует gif файлы. Позволяет изменить размер в процентном соотношении или обрезать до нужных размеров.

  • Pngquant может сжимать изображения png  с потерями качества. Инструмент конвертирует 32-битные файлы png в 8-битные.

  • Compressjpeg сжимает картинки в формате jpeg. Два главных плюса: русскоязычный интерфейс и загрузка 20 картинок одновременно.

Прописываем мета-данные 

Название файла. Все картинки называйте понятными словами, используя латиницу. Если файлы уже были названы по-русски, переведите названия, используя сервис «Транслит». Избегайте спама в названии и нечитаемых символов.

    Нет     Да   
  • дом_кп_лесное.jpeg
  • img792138.jpeg
  • kupit-dom-nedorogo.jpeg 
  • dom-kp-lesnoe-front.jpeg
  • dom-kp-lesnoe-uchastok.jpeg
  • cottage-kp-lesnoe.jpeg

Поле Title. Когда пользователь наводит курсор на картинку, ему подсвечивается текст, прописанный в поле title. Прописывайте в это поле название фотографии. Пишите на русском.

    Нет      Да   
  • Отдых Подмосковье 
  • Фото378
  • Домик на базе отдыха цена
  • Въезд на базу отдыха «Лесные просторы»
  • Интерьер домика на базе отдыха «Соловьи»   
      

Поле Alt. Указывайте описание файла. Если он не загрузится, пользователь увидит описание из Alt. Поля title и alt могут совпадать по описанию. Лучше их заполнить одинаково, чем оставить пустыми. Обязательно добавляйте в мета-теги ключевые слова, но избегайте переспама. Делайте описания естественными и информативными.

Шпаргалка

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

  • Растровые изображения — для иллюстраций. Растровая графика состоит из пикселей, каждый из которых весит 4 байта. Определяйте вес файла по формуле: длина х ширина х 4 байта. 

  • Ограничьте палитру. В каждом пикселе закодировано 4 канала модели RGBA и используются более 2500 оттенков. Часто так много цветов не нужно, а ограничение палитры позволит уменьшить вес в два раза. 

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

  • Масштабируйте изображения, чтобы привести их к допустимому размеру. Размещая картинки большего размера, вы вынуждаете пользователей скачивать лишние данные. Я оптимизирую изображения даже на 10 пикселей больше, чем требуется. Проверяйте соответствие размеров в Инструментах разработчика Chrome. 

  • Используйте подходящие форматы: gif — для анимации, png — для прозрачности и для отображения мелких деталей, jpeg — для остального. Для сжатия воспользуйтесь сервисами: gif — ezGIF, Gifsicle, для png — Compressor, Optipng, Pngquant, для jpeg — Imagify, Jpegtran, Compressjpeg. 

  • Называйте файлы латиницей и понятным названием. В поле Title указывайте название картинки, в поле alt — описание. Title и Alt могут совпадать. Пишите понятные описания для людей, включайте ключевые слова, избегайте переспама.

Материал подготовила Светлана Сирвида-Льорентэ.

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

Знаете ли вы, что оптимизация изображений перед загрузкой в ​​WordPress может иметь огромное влияние на скорость вашего сайта?

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

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

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

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

Что такое оптимизация изображения? (Оптимизированные и неоптимизированные изображения)

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

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

Вот пример оптимизированного и неоптимизированного изображения:

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

Как работает оптимизация изображения?

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

Что значит оптимизировать изображения?

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

Почему так важна оптимизация изображения? Каковы преимущества оптимизации изображений?

Хотя оптимизация изображений дает множество преимуществ, ниже приведены основные из них, о которых вы должны знать:

  • Быстрее скорость веб-сайта
  • Улучшен рейтинг SEO
  • Более высокий общий коэффициент конверсии продаж и потенциальных клиентов
  • Меньше хранилища и пропускной способности (что может снизить стоимость хостинга и CDN)
  • Более быстрое резервное копирование веб-сайтов (также снижает стоимость хранения резервных копий)

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

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

Теперь вам может быть интересно, насколько действительно важна оптимизация изображений?

Согласно исследованию Strangeloop, задержка загрузки веб-сайта в одну секунду может стоить вам 7% продаж, на 11% меньше просмотров страниц и на 16% снижения удовлетворенности клиентов.

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

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

Видеоурок

Подписаться на WPBeginner

Если вы предпочитаете письменные инструкции, просто продолжайте читать.

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

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

Три вещи, которые играют огромную роль в оптимизации изображения:

  • Формат файла изображения (JPEG против PNG против GIF)
  • Сжатие (более высокое сжатие = меньший размер файла)
  • Размеры изображения (высота и ширина)

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

Давайте рассмотрим каждый из них более подробно.

1. Формат файла изображения

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

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

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

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

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

В WPBeginner мы используем все три формата изображений в зависимости от типа изображения.

2. Сжатие

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

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

Большинство инструментов для редактирования изображений, таких как Adobe Photoshop, On1 Photo, GIMP, Affinity Photo и другие, имеют встроенные функции сжатия изображений.

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

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

Существует также несколько популярных плагинов WordPress, таких как Optimole, EWWW Image Optimizer и другие, которые могут автоматически сжимать изображения при их первой загрузке. Многие новички и даже крупные корпорации предпочитают использовать эти плагины для оптимизации изображений, потому что это просто и удобно.

Мы расскажем больше об этих плагинах WordPress позже в этой статье.

3. Размеры изображения

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

Обычно эти фотографии имеют разрешение 300 точек на дюйм и размер от 2000 пикселей и более. Эти высококачественные фотографии хорошо подходят для печати или настольных издательских систем. Они не подходят для веб-сайтов.

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

Например, мы оптимизировали фотографию с исходным размером файла 1,8 МБ, разрешением 300 точек на дюйм и размером изображения 4900 × 3200 пикселей.

Мы выбрали формат jpeg для более высокого сжатия и изменили размеры до 1200 × 795 пикселей, а также уменьшили размер файла изображения до 103 КБ. Это на 94% меньше исходного размера файла.

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

Лучшие инструменты и программы для оптимизации изображений

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

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

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

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

Adobe Photoshop

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

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

GIMP

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

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

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

TinyPNG

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

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

У них также есть расширение для Adobe Photoshop, которое мы используем в процессе редактирования изображений, потому что оно сочетает в себе лучшее из TinyPNG и TinyJPG внутри Photoshop.

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

JPEG Mini

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

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

ImageOptim

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

Альтернатива Windows для этого - Trimage.

Лучшие плагины для оптимизации изображений для WordPress

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

Ниже представлен наш список лучших плагинов для сжатия изображений WordPress:

  1. Optimole - популярный плагин от команды ThemeIsle.
  2. EWWW Оптимизатор изображения
  3. Сжатие изображений JPEG и PNG - плагин от команды TinyPNG, упомянутой выше в статье.
  4. Imagify - плагин от популярной команды плагинов WP Rocket.
  5. Оптимизатор изображения ShortPixel
  6. WP Smush
  7. reSmush.it

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

Последние мысли и передовые методы оптимизации изображений

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

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

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

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

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

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

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

1. Размеры файлов

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

Самый простой способ избежать слишком больших изображений - убедиться, что при редактировании фотографий вы выбрали «Сохранить для Интернета.Вы можете сделать это с помощью быстрого сочетания клавиш - command + option + shift + s - в Photoshop, которое откроет новое окно с несколькими различными параметрами веб-оптимизации. Вы можете отформатировать файл (о чем мы поговорим ниже), настроить качество изображения (в правом верхнем углу диалогового окна) и установить размер файла (в правом нижнем углу).

Розовые фламинго на закате, автор - Анна Омельченко

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

Close Up Shih Tzu Dog by chaoss

Знание параметров вашей веб-страницы является ключевым моментом, так что вы всегда можете настроить изображение до нужного размера.Например, если на вашем сайте есть столбцы шириной 800 пикселей, вам нужно настроить изображения, чтобы они также были шириной 800 пикселей. Высота изображения не имеет большого значения, если вы не собираетесь использовать изображения определенной формы. Также важно следить за количеством килобайт в изображении, которое можно просмотреть в левом углу окна «Сохранить для Интернета». Хорошее практическое правило состоит в том, что небольшое количество килобайт означает более быструю загрузку. Но вам все равно нужно внести соответствующие изменения, и вам не придется жертвовать качеством фотографий ради времени загрузки.Менее 300К обычно безопасно.

2. Форматирование файлов изображений

Изображения бывают всех форм и размеров, и важно убедиться, что они имеют соответствующую маркировку для их конечного назначения. Существует три стандартных типа файлов изображений, с которыми вы, скорее всего, будете работать: JPEG, PNG и GIF. Каждый тип файла обладает уникальными качествами, которые делают его подходящим для конкретных сценариев: JPEG наиболее подходит для сжатия цифровых фотографий, а GIF обычно используется для видеоклипов с низким разрешением, анимированных изображений и логотипов с ограниченной цветовой палитрой.PNG широко используются в Интернете, поскольку они поддерживают изображения на основе палитры, оттенки серого и изображения RGB.

Котенок дома в солнечный день, Максим Ширков

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

3.Не делайте миниатюрные изображения разрешенными

Черника крупным планом от bozulek Человеческий глаз, Макро Анемона Свежий мед в сотах от StudioSmart Черно-белые зебры от Шанталь де Брюйн

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

4. Именование изображений

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

В центре Тосканы от JaroPienza

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

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

Хотите найти изображения для оптимизации для Интернета? В нашем отчете «Тенденции творчества за 2015 год» представлено более десятка тщательно отобранных коллекций, в том числе несколько, посвященных тому, что популярно в социальных сетях и Интернете. Посмотреть »

Верхнее изображение: Летающие мыльные пузыри с отраженными домами от bonzodog

Создаете мощный мультимедийный веб-сайт? Узнайте еще больше о сжатии изображений.

.

Как оптимизировать изображения для Интернета

Стратегия успешного поиска

Эта статья была первоначально опубликована 5 сентября 2013 г. и обновлена ​​18 октября 2019 г.

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

Руководство по оптимизации изображений

В этом руководстве вы найдете все, что вам нужно знать об оптимизации изображений для Интернета, в том числе о том, как оптимизировать изображения для SEO:

Приступим!

Почему изображения имеют значение

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

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

Изображения усиливают контент

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

Подумайте, сколько времени нужно, чтобы прочитать короткий, насыщенный абзац. Не долго, правда? Однако изображения могут быть обработаны за 13 миллисекунд - в 60 000 раз быстрее, чем один текст.

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

Изображения улучшают удержание контента

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

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

Точно так же электронные информационные бюллетени с визуальными элементами получают больше кликов и вовлеченности.Изображения также увеличивают время пребывания на странице.

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

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

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

Эта способность ассоциироваться с брендом без использования текста невероятно сильна.

Связано: Как заявить о себе в социальных сетях

Изображения привлекают трафик на ваш сайт

Поисковые запросы по изображениям составляют 27% всех запросов, созданных в 10 самых популярных поисковых системах США. Таким образом, количество посещений веб-сайтов в результате поиска изображений значительно увеличилось после того, как Google изменил свою кнопку «Просмотр изображения» с «Поиск изображений» на «Посетить [Страница]».

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

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

В начало

Что такое оптимизация изображения?

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

В начало

7 шагов по оптимизации изображений для Интернета

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

Давайте изменим это с помощью следующих семи шагов:

  1. Выберите правильные изображения.
  2. Внимательно рассмотрите текст, связанный с вашими изображениями.
  3. Отрегулируйте размер и формат изображения.
  4. Учитывайте отложенную загрузку.
  5. Включить кеширование браузера.
  6. Не забывайте метаданные изображения.
  7. Создайте карту сайта для изображений.

1. Выберите нужные изображения

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

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

Не добавляйте изображения в сообщение ради изображений.

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

Используйте свои изображения

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

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

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

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

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

Связано: Рекомендации по использованию изображений на страницах товаров электронной коммерции

Stock Photo - это вариант

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

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

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

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

По теме: 8 разных способов использовать стоковую фотографию

Перед фактами

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

Безусловно, существует множество ситуаций, когда использование изображений лиц людей просто не работает. Но когда есть возможность - делайте.

В начало

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

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

Не поддавайтесь искушению пропустить ввод этих текстовых деталей.

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

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

Имея это в виду, давайте разберемся во всем.

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

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

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

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

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

Альтернативный текст изображения

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

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

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

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

По теме: Как провести SEO-исследование ключевых слов для привлечения трафика на ваш сайт

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

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

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

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

Описание изображения

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

В начало

3. Отрегулируйте размер и формат изображения

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

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

Измените размер изображений

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

Это особенно верно, когда изображения не оптимизированы для просмотра в Интернете.

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

Когда дело доходит до онлайн-доступа, скорость - почти все.

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

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

Здесь важно отметить, что размер изображения и размер файла - это разные вещи.

Размер изображения - это размер изображения (например, 1024 x 680 пикселей), а размер файла - это объем места, необходимый для его хранения на сервере (например, 350 КБ).

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

Связано: 10 лучших практик редактирования изображений

Выберите правильные типы файлов изображений

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

Наиболее распространенными типами файлов веб-изображений являются JPEG, GIF и PNG.

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

JPEG

Joint Photographic Experts Group - более известная как JPG / JPEG - является одним из старейших типов файлов.

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

GIF

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

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

PNG

Portable Network Graphics, PNG, поддерживается большинством браузеров, имеет меньший размер файла и большее количество цветов, чем GIF, и его цвета не так легко ухудшаются, как JPEG. Однако прозрачные изображения PNG вызывают ошибку при использовании в Internet Explorer, поэтому лучше использовать формат PNG, когда вы не имеете дело с прозрачными изображениями.

Выберите правильную степень сжатия

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

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

Сжатие от 60% до 75% обеспечит достойное качество изображения. Однако лучше всего использовать этот диапазон в качестве отправной точки, а затем поэкспериментировать с разными размерами файлов и соотношениями, чтобы определить, какой из них лучше всего подходит для вашего сайта.

Эксперимент, проведенный Ahrefs, сравнил, как инструменты изменения размера изображения работают при уменьшении среднего размера файла:

  • Imageoptim: 69% (JPEG) против 40% (PNG)
  • Shortpixel: 42% (JPEG) против 59% (PNG)
  • Kraken.io: 13% (JPEG) против 63% (PNG)
  • TinyPNG: 27% (JPEG) против 65% (PNG)
  • Optimizilla: 27 (JPEG) против 60% (PNG)
  • Imagify.io: 6% (JPEG) против 1% (PNG)
  • Compressor.io: 42% (JPEG) против 58% (PNG)

Интересно отметить, что хотя Imageoptim подходил для JPEG, он был ужасен для PNG.Итак, в целом Shortpixel - ваш лучший выбор. Вы также можете сжимать изображения с помощью плагина, такого как Smush, или инструмента оптимизации изображений, такого как Pixlr (JPEG) или GIMP.

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

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

Связано: 5 важных приемов Photoshop для начинающих

Другие советы по работе с файлами изображений большого размера

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

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

В начало

4. Рассмотрите ленивую загрузку

Ленивая загрузка - это когда браузер откладывает загрузку изображений до тех пор, пока они не появятся на экране. Это означает, что изображения в нижней части веб-сайта (в нижней части страницы) не загружаются, пока пользователь не перейдет в эту часть веб-сайта.

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

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

Есть несколько способов реализовать отложенную загрузку. Однако большинство из них требует ручного кодирования. Тем не менее, если вы используете WordPress, команда Ahrefs настоятельно рекомендует плагин A3 Lazy Load.

Изображение: Плагин A3 для отложенной загрузки

К началу

5.Включить кеширование браузера

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

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

  ExpiresActive On # Изображений ExpiresByType image / jpg «доступ на 1 год» ExpiresByType image / jpeg "доступ на 1 год" ExpiresByType image / gif "доступ на 1 год" ExpiresByType image / png "доступ на 1 год"  

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

В начало

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

Метаданные могут составлять до 15% от общего размера изображения JPEG.

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

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

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

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

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

В начало

7.Создать карту сайта изображения

Карта сайта важна, потому что она сообщает поисковым системам обо всех страницах вашего сайта.

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

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

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

Изображение: изображения Sitemap Справка консоли поиска

По теме: 12 лучших инструментов SEO, которые помогут вашему сайту отображаться в результатах поиска

В начало

Заключение и следующие шаги

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

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

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

Эта статья включает материалы, изначально опубликованные в блоге GoDaddy следующими авторами: Кристофером Эмблером, Женевьев Туэндж и Томом Эвером.

.

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

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

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

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

Неоптимизированное изображение

Оптимизированное изображение

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

Есть четыре различных способа оптимизации изображения или фотографии для SEO:

1. Размер изображений, подходящий для использования в Интернете

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

  • Размер изображений должен соответствовать вашему содержанию или ширине избранного изображения. Если ширина вашего контента или избранного изображения (используйте самое большое) составляет 750 пикселей, нет причин загружать изображения большего размера, не говоря уже о тысячах пикселей в ширину.
  • Понизить разрешение изображения. Часто для изображений со стоковых фото сайтов или даже некоторых цифровых камер установлено разрешение 300 dpi - разрешение для печати. Убедитесь, что для всех изображений, которые вы загружаете на свой веб-сайт, установлено разрешение 72 dpi.

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

2. Используйте описательные имена изображений

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

Поисковые системы не могут «увидеть» изображений, но они могут «прочитать» ваш HTML, что означает, что они будут читать / сканировать имя изображения.Присвоение вашим изображениям описательных имен не только поможет находить или идентифицировать изображения в будущем, но если вы разрешите Google Images извлекать изображения с вашего веб-сайта, имена изображений будут играть роль, помогая им отображаться в результатах поиска.

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

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

  • Photo.jpg
  • logo.gif
  • img_23.png
  • ebookcover.jpg

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

  • jennifer-bourn.jpg
  • bourn-creative-logo.gif
  • вяленых-помидоров-polenta.png
  • Электронная книга «Как получить клиентов».jpg

Вот пример базовой структуры HTML для изображения:

3. Определите альтернативный текст для каждого изображения

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

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

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

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

При написании альтернативного текста для изображения:

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

4.Удалите лишние данные из ваших изображений

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

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

Одно изображение, четыре возможности для оптимизации

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

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

  • Обрезка и размер каждого изображения для использования в Интернете
  • Дайте каждому изображению описательное имя с множеством ключевых слов
  • Дайте каждому изображению описательный альтернативный текст, используя атрибут alt изображения / HTML-тег alt
  • Оптимизируйте изображение с помощью такого приложения, как ImageOptim, чтобы удалить лишние данные
  • В идеале имя изображения и замещающий текст должны быть уникальными
  • Не используйте ни одну из этих возможностей для наполнения ключевыми словами и рассылки спама

Дополнительная возможность оптимизации изображения!

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

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

Что насчет тебя?

Вы уже являетесь экспертом по оптимизации изображений? Или вы узнали что-то новое в этом посте, что может помочь улучшить SEO на странице? Я хотел бы услышать ваши мысли в комментариях ниже!

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий