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

Содержание

Оптимальный размер фото для сайтов: пошаговая инструкция с фото

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

С чего все начинается?

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

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

Но в таком “сыром” виде его использовать нельзя. Поэтому RAW используют профессионалы, как отправную точку для дальнейшей обработки, – либо очень уж крутые фотохудожники, либо эксперты: в области науки, техники, криминалистики, или медицины. В тех случаях, когда надо вытянуть максимум качества из отдельного фрагмента изображения.

Большинство репортеров и даже художников довольствуются JPEG, настраивая камеру под свои цели. (Любой фотограф вам скажет – дайте мне светосилу, а зерно во вторую очередь. Поэтому огромный объектив с просветленной оптикой ценится больше, чем матрица с огромным разрешением.)

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

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

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

Так что тут важно, и что предпочесть, и как это сделать?
Давайте разберем по порядку.

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

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

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

Во-вторых, разрешающая способность экрана на большинстве устройств 72 пикселя на дюйм или 96. Совершенно незачем пытаться отображать на таких экранах изображения с 300 пикселей на дюйм. Лишние пиксели будут просто усреднены и будет взята их проекция на один.

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

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

Процесс обработки

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

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

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

1. Открываем фотографию в редакторе

Файл – Открыть. В появившемся окне выбираем нужную фотографию.

На рисунке мы берем фото, имеющее размер около 4,5 Мб. Этот файл у нас в формате JPEG, полученную с зеркальной фотокамеры.

2. Уменьшаем размер фотографии

Изображение – Размер

изображения

Здесь выбираем:

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

Важно! Ставим все галочки, картинки. Это:

Масштабировать стили;
Сохранить пропорции;
Интерполяция: Бикубическая автоматическая

3. Правильное сохранение

Здесь, мы будем сохранять, специально для веб публикаций. Для этого заходим, Файл – Сохранить для Web.

4. Выставляем качество

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

Выбираем «Высокое» качество 60%. У нас получилось в этом примере 193.5 Кбайт при качестве 60%. Ну и ладно. На вид обработанное изображение почти неотличимо от оригинала. Вот в таком самом виде его и сохраняем. Готово!

5. Проверим в браузере

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

На этом и все. Теперь вы можете выкладывать фотографию куда угодно, веб-сайт, социальные сети и так далее.

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

Всех вам благ.

требования к размеру, формату и смысловому наполнению ᐉ Веб-студия Brainlab

Содержание:

Технические характеристики фото для сайта

Размер и вес фотографии
Формат изображений для сайта
Оптимальные пропорции

Выделение кадра и миниатюры
Настройка резкости изображения
Не только Photoshop: другие доступные редакторы

Смысловое наполнение и другие особенности картинок для сайта

Релевантность бренду, корпоративному стилю сайта и контенту
Какие картинки на сайте работают лучше всего?
Цветовая гамма

Фото на сайте — это значимый контент, который во многом может повлиять на отношение и действия пользователей.

Чтобы правильно выбрать картинку, учитывают немало параметров — условно разделим их на две группы: технические характеристики и наполнение.

Технические характеристики фото для сайта

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

Размер и вес фотографии

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

Размер фото для сайта измеряется в пикселях. Хороший вариант для большинства ситуаций — 1000х1000 px. Чаще всего показатели при загрузке указываются вручную, но есть движки, при которых оптимизация происходит автоматически — изучите возможности платформы, с которой работаете.

Что касается веса, который измеряется в килобайтах, то для большинства картинок хороший вариант — это 200-400 килобайт. Чем меньше вес, тем быстрее подгружается страница, но не забывайте о качестве — изображение должно быть четким и давать возможность рассмотреть детали (если это необходимо).

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

Формат изображений для сайта

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

JPEG. В зависимости от изначального качества картинки позволяет произвести сжатие без потери четкости. Подходит в том случае, если нужно сохранить детальность.
PNG. Также сохраняет детальность, а еще хорошо подходит в том случае, если на изображении много ровных заливок.
GIF. Формат для добавления на сайт анимации.

Комментарий эксперта: Чтобы изменить параметры с минимальной потерей качества, воспользуйтесь услугами сервисов JPEGmini и TinyPNG.

Оптимальные пропорции

Важен не только оптимальный вес картинок для сайта, но и то, какие пропорции нее пропорции. Для сайтов используются несколько видов прямоугольника: высокий (4:3), простой (3:2), низкий (16:9) — а также квадрат (1:1).

Выделение кадра и миниатюры

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

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

Настройка резкости изображения

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

Комментарий эксперта: Большие снимки необходимо уменьшать и настраивать постепенно – не более чем на 1000 пикселей за один раз. После каждого уменьшения используйте параметры Bicubic Sharper.

Не только Photoshop: другие доступные редакторы

Чтобы изменить разрешение фото для сайта и осуществить другие настройки, необязательно использовать исключительно популярный Photoshop. Есть и другие удобные программы, приложения: GIMP, Paint (для очень простых задач), PicMonkey (онлайн-режим), Pixlr (частичная замена Photoshop). Все программы, исключая PicMonkey, легко устанавливаются на MacOS и Windows. Для каждой в сети есть пошаговая инструкция и много обучающих роликов, позволяющие освоить как простые, так и довольно сложные задачи для продвинутых пользователей.

Смысловое наполнение и другие особенности картинок для сайта

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

Релевантность бренду, корпоративному стилю сайта и контенту

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

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

Какие картинки на сайте работают лучше всего?

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

Используйте больше изображений людей. На такие картинки посетители реагируют лучше. А в магазинах одежды изделия рекламируются эффективнее, если они находятся на моделях. А еще читателям нравятся фотографии домашних питомцев (животных, собак), если это отвечает задачам площадки.
Делайте ставку на эмоциональность. Человек с искренней улыбкой подсознательно воспринимается нами положительно, ассоциируется с чем-то безопасным.
Проявляйте оригинальность. Ищите или делайте снимки, не похожие на все остальное. Например, можно вдохновиться контентом, сделанным National Geographic.
Создавайте уникальные снимки. Если финансовые возможности позволяют, лучше всего заказать фото для создания сайта у профессионального фотографа.
Учитывайте дизайн сайта. Какой бы красивой ни была картинка, если она не вписывается в общий дизайн площадки, лучше ее не использовать — она рискует испортить все впечатление.
Наносите на изображение логотип только в том случае, если это необходимо и не портит общее впечатление от фото.

Пример фото от National Geographic

Цветовая гамма

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

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

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

Хотите сделать что-то великое?
Позвольте помочь вам.

Готовы? Свяжитесь сегодня.

Свяжитесь с нами!

info@brainlab.com.ua

Наш офис

Украина, Киев

улица Евгения Сверстюка, 19

Номер телефона

+380633746749

Мы в соц.сетях

Отправить запрос Калькулятор стоимости

Калькулятор стоимости сайта Brainlab

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

1. Тип сайта

Сайт визитка

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

Подробнее о сайте

Landing Page

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

Подробнее о сайте

Корпоративный
сайт

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

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

Подробнее о сайте

Сайт-каталог

Представляет собой многостраничный сайт с многоуровневой структурой. Такой сайт содержит каталог продуктов компании, есть возможность указывать цены, скидки, акции, разделять контент для различных групп пользователей (опт/розница).

Подробнее о сайте

Интернет магазин

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

Подробнее о сайте

3. Вёрстка

4. Движок CMS

OpenCart

CMS WordPress

OpenCart

CMS WordPress

Tilda

CMS WordPress

Tilda

CMS WordPress

OpenCart

CMS WordPress

Tilda

CMS WordPress

Tilda

CMS WordPress

OpenCart

CMS WordPress

OpenCart

CMS WordPress

OpenCart

CMS WordPress

OpenCart

CMS WordPress

OpenCart

CMS WordPress

OpenCart

CMS WordPress

OpenCart

CMS WordPress

OpenCart

CMS WordPress

Тип сайта: Не выбрано

0 $

Вёрстка: Не выбрано

0 $

Движок CMS: Не выбрано

0 $

Примерная стоимость: 0 $

Примерные сроки: 0 дней

Хотите сделать что-то великое?

Позвольте нам помочь вам.

Готовы? Свяжитесь сегодня.

Лучший размер изображения для веб-сайтов: размеры, соотношение, вес

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

Обычно рекомендуемые размеры изображений для веб-сайтов Рекомендации по изображениям веб-сайтов 2023 года Рекомендации по размеру изображения для мобильных устройств Почему размер изображения важен для веб-сайтов? Какой формат изображения использовать для Интернета? Другие аспекты оптимизации изображения Как узнать размеры изображений для вашего сайта? Резюме

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

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

Вот шпаргалка стандартных размеров изображений для веб-страниц, которые лучше всего подходят для рабочего стола с разрешением 1920 x 1080 px (самый популярный по статистике).

Тип изображения веб-сайта	Размеры изображения (Ш x В)	Соотношение сторон изображения
Фоновое изображение	1920 x 1080 пикселей	16:9
Главный образ	1280 x 720 пикселей	16:9
Баннер сайта	250 x 250 пикселей	1:1
Изображение блога	1200 x 630 пикселей	3:2
Логотип (прямоугольник)	250 х 100 пикселей	2:3
Логотип (квадратный)	100 х 100 пикселей	1:1
Фавикон	16 х 16 пикселей	1:1
Иконки социальных сетей	32 х 32 пикселя	1:1
Изображения в лайтбоксе (полный экран)	1600 x 500 пикселей	16:9
Эскиз изображения	150 х 150 пикселей	1:1

Важны не только размеры изображения, но и размер файла изображения. Обязательно сжимайте изображения на своем веб-сайте — попробуйте онлайн-инструмент сжатия изображений TinyIMG бесплатно!

Почему размер изображения важен для веб-сайтов?

Одна из первых вещей, которую порекомендует SEO-эксперт, — это размер изображения медиа-элементов на веб-сайте. Загрузка больших изображений на веб-сайты снижает общую производительность веб-сайта. Затрачивается ценное пространство для хранения веб-сайта, и скорость загрузки веб-сайта может резко снизиться. И упущенная из виду скорость сайта — одна из самых распространенных ошибок SEO.

Медленный веб-сайт отвлекает потенциальных клиентов и трафик с вашего веб-сайта. Поисковая система Google понизит рейтинг сайта, и ваш бизнес пострадает.

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

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

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

JPEG — Будучи одним из наиболее распространенных форматов изображений, используемых для изображений, JPEG представляет собой облегченный формат изображения со сжатием с потерями. Форматы файлов JPG отлично подходят для продуктов, блогов и фоновых изображений, используемых на веб-сайтах.
PNG — PNG — это формат изображения, использующий сжатие без потерь. Альфа-канал в формате PNG также обеспечивает прозрачность фона. PNG идеально подходит для значков, логотипов и другой графики.
GIF — формат файла GIF — отличный формат файла изображения, который можно использовать для коротких анимированных клипов с файлами небольшого размера. GIF также имеет альфа-канал и отлично подходит для изображений продуктов.
WEBP — изображения WEBP — это новый формат изображений, который становится популярным. Формат предлагает меньшие размеры файлов изображений, чем JPEG, с превосходным качеством, что делает его идеальным для любого продукта, баннера и избранного изображения.

Другие аспекты оптимизации изображений

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

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

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

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

SEO-оптимизация изображений

Когда изображения оптимизированы для поисковых систем, они помогают с ранжированием в поисковых системах, скоростью, объемом памяти и удобством для пользователя. Поисковые системы отдают предпочтение веб-сайтам с изображениями, которых нет больше нигде в Интернете. Поиск изображений важен для пользователей, которые ищут изображения, чтобы вдохновлять и визуально объяснять темы. Таким образом, оптимизация изображений помогает поисковым системам понять содержание вашего сайта. Вот некоторые элементы оптимизации изображений для SEO:

Уникальное изображение
Заданные размеры
Текст тега ALT и заголовок
Карта сайта для изображений
Подписи к изображениям
Оптимизация размера изображения

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

Сайты уникальны по стилю, выбранному создателем. Для сайтов, использующих WordPress, Shopify, Wix, Squarespace и другие CMS, требуются изображения рекомендуемых размеров.

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

Shopify Темы

Shopify позволяет пользователям загружать изображения размером до 4472 x 4472 пикселей с ограничением 20 МБ на изображение с разрешением 72 dpi.
Минимальный размер изображений товаров на Shopify — 800 на 800 пикселей.
Проверьте, есть ли в вашей теме Shopify руководство по рекомендуемым размерам изображений.
Обратите внимание на размеры изображений, которые лучше всего подходят для вашего магазина Shopify для использования в будущем.

Попробуйте приложение TinyIMG Shopify сегодня с 50 бесплатными оптимизациями изображений

Установить сейчас

Темы WordPress

Рекомендуемый размер изображения в WordPress — до 1024 на 1024 пикселей.
Большинство тем WordPress имеют полный файл документации, который помогает пользователям найти наилучшие размеры изображений для темы.
Если вы изменили размер изображения в соответствии с вашим дизайном и дисплеем, запишите это.

Пользовательские веб-сайты

Разработчик веб-сайта, созданного на заказ, обычно предоставляет документацию, в которой указаны оптимальные размеры изображений
«Щелкните правой кнопкой мыши» изображение, размеры которого вы хотите найти в браузере Chrome. Выберите «Проверить элемент», чтобы найти размер изображения в выделенном коде.

Резюме

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

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

Часто задаваемые вопросы

Какое разрешение изображения лучше всего подходит для Интернета?

Лучшее разрешение изображения для Интернета — 72 пикселя на дюйм (PPI). Изображения с разрешением 72ppi отлично подходят для просмотра и обмена. Они также имеют небольшие размеры файлов, идеально подходящие для хранения веб-сайта и целей SEO.

Что делает опция «сохранить изображение для Интернета»?

Параметр «Сохранить изображение для Интернета» адаптирует изображения для просмотра в Интернете и поисковой оптимизации. Эта функция видна в Abobe Photoshop как единственная кнопка. Однако те, у кого нет Photoshop, могут использовать инструменты сжатия и оптимизации изображений, такие как TinyIMG, чтобы получить те же преимущества.

В чем разница между высоким разрешением и веб-размером?

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

Об авторе

Лучший размер изображения для веб-сайтов: размеры, соотношение, вес

Вот шпаргалка стандартных размеров изображений для веб-страниц, наиболее подходящих для рабочего стола с разрешением 1920 x 1080 px (которое по статистике является самым популярным).

Тип изображения веб-сайта	Размеры изображения (Ш x В)	Соотношение сторон изображения
Фоновое изображение	1920 x 1080 пикселей	16:9
Главный образ	1280 x 720 пикселей	16:9
Баннер сайта	250 x 250 пикселей	1:1
Изображение блога	1200 x 630 пикселей	3:2
Логотип (прямоугольник)	250 х 100 пикселей	2:3
Логотип (квадратный)	100 х 100 пикселей	1:1
Фавикон	16 х 16 пикселей	1:1
Иконки социальных сетей	32 х 32 пикселя	1:1
Изображения в лайтбоксе (полный экран)	1600 x 500 пикселей	16:9
Эскиз изображения	150 x 150 пикселей	1:1

Почему размер изображения важен для веб-сайтов?