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

1833
0/10

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

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

Оптимизация графики, предназначенной для размещения не веб-странице необходима для:

  • уменьшения объема страницы (Кб),

  • увеличения скорости загрузки сайта (сек),

  • успешного поискового продвижения (SEO).

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

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

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

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

Чтобы этого не происходило, нужно провести несколько несложных действий. Читайте? как это сделать.

Оглавление

Зачем сжимать картинки?

Как сжимать фотографии?

Как делать SEO изображений?

Зачем сжимать картинки?

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

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

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

В начале 2000 годов требования к web-сайтам были гораздо жестче. Негласным стандартом считался вес страницы в 50кб и не больше. Сейчас одна фотография на сайте может весить свыше мегабайта.

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

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

Как сжимать фотографии?

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

  • «Adobe Photoshop»;

  • «FastStone Image Viewer», бесплатная программа.

В Фотошопе для сохранения оптимизированного изображения нажмите сочетание клавиш Alt+Ctrl+Shift+S или меню «Файл» — «Сохранить для WEB». В появившемся окне выберите подходящие параметры и сохраните файл в нужную папку. «Поиграйте» с настройками: качество изображения, его размер, степень и алгоритм сжатия, и прочие. Каждая настройка влияет на будущий вес изображения. Воспринимаемое глазом качество картинки в нашем примере не изменилось, а вес уменьшился втрое.

В Фотошопе для сохранения оптимизированного изображения нужно нажать сочетание клавиш Alt+Ctrl+Shift+S

В «FastStone Image Viewer» нажмите сочетание клавиш Ctrl+S или меню «Файл» — «Сохранить как...». В появившемся диалоге нажмите незаметную кнопку «Опции» в правом нижнем углу. Попадете в интерфейс выбора параметров сжатия. Для оптимизации без потерь установите цветовую схему «YCnCr», субдескридетацию цвета «Высокую» (лучшее сжатие), оптимизацию по Хаффману. Выберите прогрессивный алгоритм. Бегунок качества установите на такой уровень, чтобы новая картинка не имела заметных артефактов сжатия. На нашем примере — это около 50%. Объем изображения с такими настройками снизился больше чем в пять раз.

В FastStone Image Viewer нажмите сочетание клавиш Ctrl+S, меню “Файл” — “Сохранить как...”

Описанные методы сжатия подходят к фотографиям. Со скриншотами, снятыми с текстовых страниц, лучше поступать по-другому. Сохраняйте их не *.jpg, а в *.png. Назначьте сжатие без потерь восьмого уровня, а цветовую схему установите на 256 цветов, так как при чтении цвета колористика не очень важна. На выходе получите сжатие почти в 25 раз. Было 343 кб — стало 14 кб. Отличный результат и облегчение для вашего сайта.

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

Сжатие текстового скриншота в программе FastStone Image Viewer

Если картинок много, примените пакетное форматирование и переименование. Оно вызывается в «FastStone Image Viewer» кнопкой «F3». Тут есть следующие настройки:

  • изменение размера,

  • поворот,

  • обрезка,

  • размер холста,

  • глубина цвета,

  • настройки яркости, контрастности, гаммы и насыщенности,

  • DPI,

  • наложение текста,

  • наложение водяного знака,

  • рамка,

  • переименование,

  • удаление даты и времени фото,

  • изменение формата файла.

Пакетное форматирование и переименование вызывается в “FastStone Image Viewer” кнопкой “F3”

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

Как делать SEO изображений?

При добавлении картинок на сайт, используйте дополнительные ключевые слова. Употребляйте те фразы, которые органично не получилось вписать в текст. Только знайте меру. При переспаме попадете под фильтр от Яндекса «Баден Баден».

При верстке страницы в html, допишите к изображению два атрибута: «alt» и «title». Строка кода с картинкой будет выглядеть так:

<img src="picture.jpg" alt="Альтернативная надпись, когда картинка не видна" title="Всплывающая подсказка">

В системе управления контентом «Wordpress» воспользуйтесь удобной формой для ввода этих атрибутов.

В системе управления контентом “Wordpress” воспользуйтесь удобной формой для ввода атрибутов alt и title

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

Удачи вам!

Читайте также о том, что SEO больше никому не нужен.

Ваша оценка:
Нравится?
Обсуждение
    Для участия в обсуждении на сайт