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

kak_optimizirovat_izobrazhenie_dlja_sajta_1Всем, здравствуйте! Сегодня мы займемся подбором картинок для сайта с их дальнейшей оптимизацией. Как оптимизировать изображение для сайта в WordPress? Воспользуемся уже имеющимися. Для оптимизации фотографий используем всем известный графический редактор — фотошоп.

Используем программу Photoshop

У меня имеется установленная на компьютере программа Photoshop версии CS6. Все картинки и статьи на сайте должны быть уникальными. Как проверить их уникальность,  можно ознакомиться в этой статье.

Размещаем в графическом редакторе нужный снимок.  Смотрим, какой объем занимает данное фото.  В данном примере – 72,25х54,19 см., 2048х1536 пикселей, размер составляет — 1,377 Мб.

kak_optimizirovat_izobrazhenie_dlja_sajta_2

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

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

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

kak_optimizirovat_izobrazhenie_dlja_sajta_3

Давайте посмотрим, какой размер у нас получился. Файлы  имеют следующие размеры:  jpeg — 85 кб, а png — 294 кб, хотя при сохранении мы изменили только расширения файла.

kak_optimizirovat_izobrazhenie_dlja_sajta_8

Как сохранить снимок

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

kak_optimizirovat_izobrazhenie_dlja_sajta_5

Программа для скриншота

Сейчас  сделаем скриншот первоначального снимка. Воспользуемся программой Joxi, и сохраняем его на компьютер. Объем файла составил – 827 кб. Далее размещаем скриншот этого файла в фотошопе, изменяем его размер на 450 пикселей и сохраняем как для web устройств. Что у нас получается?

Величина фото также уменьшилась и составила – 50 Мб. Также при сохранении картинок для web устройств можно  уменьшать размер баланса между качеством изображения и степенью сжатия (в пределах 40-60). При этом качество картинки не должно пострадать.

kak_optimizirovat_izobrazhenie_dlja_sajta_9

Хочу обратить внимание на то, что ширину картинки мы устанавливали 450 пикселей.  Рекомендуется изображение устанавливать на всю ширину статьи. Как можно определить эту величину? Для этого можно воспользоваться инструментом My Size, и производим ее измерение.

Какие выводы можно сделать

  1. Файлы с расширением jpeg имеют меньший объем.
  2. Производить сохранение картинки как для web устройств.
  3. При сохранении файла для web устройств можно уменьшать величину баланса между качеством изображения и степенью сжатия (40-60).
  4. Для оптимизации картинки используем скриншот, который имеет меньшие параметры, чем файлы с расширением jpeg.
  5. Файлы картинок сохраняем размерами 30-60 кб, не в ущерб их качеству.

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

С уважением, Михаил Сойкин.

 

Спасибо, что поделились статьей в социальных сетях!


 

Запись опубликована в рубрике Продвижение. Добавьте в закладки постоянную ссылку.

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

  1. Владислав говорит:

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

    [Ответить]

  2. Михаил Сойкин говорит:

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

    [Ответить]

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *