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

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

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

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

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

Разное соотношение сторон в картинках
Разное соотношение сторон в картинках

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

Так почему картинки отображаются разными по размеру, в основном по высоте?

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

Лучше всего это рассматривать на примере популярного движка wordpress.

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

Допустим, что в выбранной теме оформления предусмотрен показ картинок в следующих местах:

  1. Слайдер в верхней части сайта, где размер картинок будет 728х420 px;
  2. В сайдбаре 280х310 px;
  3. Футере 1024х728 px;
  4. В конце поста 3 картинки 320х250 px;
  5. И т. Далее…

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

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

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

Примерно так и произошло у меня на сайте. При смене темы оформления, у многих картинок нарушилась пропорциональность.

А теперь самое главное! Как узнать тот идеальный размер картинки или фото на «все времена»?

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

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

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

Ширина 1600 px;
Высота 1067 px;

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

Никто не будет ждать пока такая картинка загрузится на странице сайта.

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

Самый лучший способ подготовить изображение – это воспользоваться программой photoshop.

Как подготовить размер картинки в photoshop

Главным параметром здесь является соотношение сторон и в программе выставить их проще всего.

соотношение сторон картинки

Возьмем инструмент «Прямоугольная область», в стилях выставим «Заданные пропорции», затем укажем ширину – 3, высоту – 2 и готово.

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

Оптимальные размеры сторон картинки
Равные пропорции картинки
размер 1600х1067 px

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

Следующим этапом устанавливаем необходимую ширину и высоту. Ставим ширину в 1600 px. При данном соотношении сторон высота подставится автоматически.

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

параметры для сохранения изображения
Сохранить для web

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

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

Как узнать размер картинки на сайте

Самым распространенным способом является просмотр изображения в web-браузере, с помощью правой кнопки мыши, «открыть картинку в новой вкладке».

А если изображение скачано на компьютер, то размер картинки можно узнать с помощью свойств.

Свойства изображения

Для проектов, созданных на сервисах (wix, tilde и прочие), оптимальный размер изображения для сайта можно узнать в инструкции по добавлению контента.

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

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

Где скачать изображения для сайта

На мой взгляд, на данный момент самым безопасным вариантом использования картинок – это сервис pexels

Почему безопасным?

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

Еще несколько сайтов, где можно взять изображения для использования на сайте: Freepik, stockvault.

iconfinder — для поиска разного рода иконок.

Оптимальный размер изображения для сайта. Заключение

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

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

Add a Comment

Ваш адрес email не будет опубликован.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: