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

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

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

  • Качество изображения
  • Небольшой вес изображения
  • Наличие СЕО мета данных

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

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

Это без потери качества сделать изображение легким по весу (файла).

Кто фотографирует на цифровой фотоаппарат, те знают, что стандартный размер (вес) файла фотографии составляет в среднем около 3,5 Мб.

При фотографировании на смартфон вес фотографий колеблется в пределах от 0,5 Мб. Вес фотографий в телефонах зависит от ваших настроек качества снимка.

Форматы фотографий в цифровых фотоаппаратах и смартфонах разные. На выходе мы получаем размеры:

  • Фотоаппарат — в пределах 2800×2100 px
  • Смартфон — в пределах 2600×1500 px

Такие огромные во всех смыслах (размер и вес) файлы изображений ни в коем случае нельзя вставлять на сайт!

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

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

Вы спросите, — каким лучше способом сделать файл изображения меньше, и по размеру (ширина х высота) и по весу (Мб) ?

Как уменьшить размер (ширина х высота) изображения

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

На мой взгляд, идеальным размером фотографий (изображений) для записей и страниц являются снимки:

  • Альбомные — максимальный размер по ширине выводимого текста записи и страницы
  • Портретные — 50% от максимальной ширины текста записи и страницы

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

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

Я уменьшаю изображения (если это необходимо) в программе Фотошоп. Там же оптимизирую (уменьшаю вес) ее для публикации в Интернет. Насколько хорошо Фотошоп уменьшает вес изображений? Есть ли альтернатива Фотошопу, и желательно, в онлайне?

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

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

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

Я скачал в Интернет фотографию большого размера, формат PNG, размер — 1500х1126px, вес — 2,19 Мб.

Сейчас я ее уменьшаю до размера 799px в ширину, делаю качество — наилучшее, формат файла не меняю.

В результате я получил файл размером 802х602px, весом — 256 Кб.

Онлайн-сервис, которым можно воспользоваться для уменьшения размера и веса изображения — http://www.fotor.com

fotor

Я добавил свое изображение, уменьшил его размер и получил на выходе файл с такими результатами: размер — 800х600px, вес — 300 Кб. Кроме этих функций, с изображением можно было продолжить работать: изменить или добавить разные фишки и плюшки в виде текста, водяного знака, фона и т.д.

Следующий сервис, которым я решил воспользоваться, это сайт — http://croper.ru

croper

Как видите на скриншоте, сайт тоже умеет не только уменьшать размер и вес фотографии.

В итоге, я получил изображение с такими параметрами: размер — 804х604px, вес — 182 Кб

А как же Фотошоп, — спросите вы? Или как поступаю я?

Я писал выше, что размер я меняю в программе Фотошоп. А оптимизацию веса провожу чаще всего на сайте — https://tinypng.com

Фотошоп при уменьшении размера изображения до 800×600 px и оптимизация для публикации в Интернет выдает следующий результат: размер — 800×601 px, вес — 265 Кб.

Затем я отправляю изображение на сайт — tinypng.com

tinypng

В результате я получаю файл того же размера, и весом всего 147,9 Кб.

Теперь давайте подведем итог:

Онлайн сервисРазмер (высота и ширина), pxВес, кб
fotor.com800 х 600300,0
croper.ru804 х 604182,0
Фотошоп + tinypng.com800 х 600147,9

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

Если материал вам понравился, нажмите или расскажите о нем друзьям!

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

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

Ваш email нигде не будет показан. Обязательные поля помечены *