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

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

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

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

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

Зачем менять размер и сжимать изображения на сайте?

1) Дисковое пространство сайта не резиновое.

2) Вес картинки влияет на скорость загрузки сайта.

3) У конкурентов таких косяков, скорее всего — нет.

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

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

На примере моего сайта расскажу, что и как делается:

  1. Готовое изображение открываю в стандартной программе Paint.
  2. У меня было фото, размером 1920*1080, которое весило 312 кб.
  3. Выбрал в Paint: изменить размер и задал 501 px. по горизонтали с сохранением пропорций.
  4. Получилось изображение 501*281, которое весит 45 кб.
  5. Это уже неплохо, но не идеально в плане сжатия изображения.

Более наглядно все манипуляции показаны в видео:

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

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

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

В данном случае, мне уже известен размер изображения для сайта — 501 px, осталось правильно провести сжатие картинки, фотографии. Для этого понадобится:

[tip]

— сайт для обработки изображений;

— программа для уменьшения веса картинок;

— желание сделать один раз, но — правильно.

[/tip]

Думаю понятно, что загрузка изображений на сайт — важная процедура, от которой многое зависит. Будете использовать веб ресурс Tiny Png или любой подобный? Помните, что такой сайт для обработки изображений имеет шаблонные настройки (лучшие, по мнению владельцев). Используя сайт, срезал с картинки еще 8 кб (немного, но в качестве картинка не потеряла).
[note]
Читайте также: как увеличить посещаемость сайта до 1 000

[/note]

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

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

Правила комфортного сжатия и обрезки фотографий

  1. Сжимать изображения для сайта надо в меру (качество имеет значение);
  2. Все надо делать так, чтоб увеличение изображения на сайте не отразилось на качестве;
  3. Если картинка сразу весит 20-30 кб., сайт для обработки изображений можно не использовать.

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

Надеюсь, из статьи вы узнали:

[help]

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

— за счет чего можно сжать изображения для сайта;

— оптимальный размер изображения для сайта.

[/help]

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

[warning]

Если у друзей имеется в наличии собственный сайт, порекомендуйте им статью, либо ролик в любой соц. сети. Возможно, именно этот материал научит их правильно работать с изображениями на сайте.
[/warning]

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

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