Размеры изображений: полное руководство для Shopify-магазинов

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

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

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

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

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

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

В качестве общего ориентира можно использовать следующие значения: ≈1920 px по ширине для крупных баннеров, ≈1200 px для основного контента и от 300 до 800 px для миниатюр. Для веб-изображений также рекомендуется использовать сжатые форматы, например WebP, чтобы сохранить хорошее качество и не увеличивать время загрузки сайта.

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

Файлы размером более 20 МБ могут заметно влиять на скорость сайта. В большинстве случаев лучше стремиться к меньшему весу: до 1 МБ, а для многих изображений — примерно к 500 КБ. Но это практический ориентир, а не ограничение Shopify.

Еще один параметр — атрибут alt. Он не увеличивает вес изображения и практически не влияет на производительность страницы, но используется программами чтения с экрана и является важной частью доступности сайта. ALT-текст должен быть кратким, но прежде всего содержательным и соответствующим изображению и контексту страницы.; хорошей практикой считается ограничивать его примерно 125 символами вместе с пробелами, хотя официального ограничения от Google нет, но важно не перегружать alt ключевыми словами.

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

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

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

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

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

Размер фонового изображения

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

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

Ориентиры:

• Рекомендуемая ширина: 2560 px.
• Рекомендуемая высота: 1440 px.
• Соотношение сторон: 16:9.
• Максимальный ориентир по размеру файла: 1-2 МБ.

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

Lois Jeans

Размер hero-изображения

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

Если вы хотите подробнее разобраться в том, как выбирать hero-изображение, где его использовать и как оно влияет на eCommerce-сайт, рекомендуем также ознакомиться с нашим материалом «Hero Image для сайта: виды и как использовать в eCommerce».

Для hero-блока обычно подойдет изображение шириной от 1280 до 2500 px и высотой примерно от 720 до 900 px. Базовым ориентиром остается соотношение 16:9.

Рекомендуемый ориентир по размеру файла — до 3 МБ, хотя для быстрой загрузки желательно стремиться к меньшему весу.

Pure Peptides

💡 Для изображений первого экрана важно учитывать не только размер файла, но и способ загрузки. Если hero-изображение является Largest Contentful Paint (LCP), Shopify рекомендует не использовать для него loading="lazy", а загружать изображение сразу. Для LCP-изображения также может использоваться fetchpriority="high". 

Размер баннера

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

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

Для рекламных изображений следует ориентироваться на требования рекламной системы:

• Ширина: зависит от рекламной платформы.
• Высота: зависит от рекламной платформы.
• Соотношение сторон: различается.
• Размер файла: около 150 КБ, если это соответствует требованиям платформы.

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

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

Рекомендации Google по размеру изображений для
рекламных объявлений в браузерах на Desktop

Размер изображения для блога

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

Например, исходный файл может иметь размер 1800 × 1200 px, но на самой странице отображаться значительно меньше. Это нормальная практика: загрузочный размер дает необходимый запас качества, а размер отображения контролируется сайтом.

Для основного изображения статьи можно использовать:

• Ширину: 1200 px.
• Высоту: 800 px.
• Соотношение сторон: 3:2.
• Рекомендуемый размер файла: до 3 МБ.

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

Размер логотипа

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

Формат зависит от самого логотипа. Для компактных графических знаков подходит квадратное соотношение 1:1. Для длинного названия бренда или текстового логотипа удобнее использовать горизонтальный формат.

Размер файла желательно удерживать примерно в пределах 500 КБ.

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

Размер изображений для мобильных устройств

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

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

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

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

Размер изображений в Shopify

Для изображений товаров и коллекций Shopify допускает до 5000 × 5000 px (25 Мп) и менее 20 МБ. 

Для квадратных изображений товаров рекомендуется использовать размер 2048 × 2048 px. Такой размер обеспечивает достаточный запас качества для просмотра товара и масштабирования.

Если в магазине используется функция увеличения изображения, Shopify рекомендует использовать изображения размером более 800 × 800 px.

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

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

Почему важно контролировать вес файла

Размер изображения в пикселях — только часть вопроса. Не менее важен фактический вес файла.

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

Подготовка изображений для мобильных экранов

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

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

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

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

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

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

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

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

Например, fashion-бренд Aje сделал акцент на mobile-first опыте: после перехода на Shopify Plus компания переработала мобильный сайт, улучшив визуальную подачу, навигацию и взаимодействие с товарами. Такой подход помогает показать товар достаточно подробно, не перегружая небольшой экран.

Aje

Скорость загрузки сайта

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

Скорость загрузки и отображения контента оценивается с помощью показателей производительности, таких как First Contentful Paint (FCP) и Largest Contentful Paint (LCP). с помощью Google PageSpeed Insights.

Если хотите подробнее разобраться в том, как скорость сайта связана с SEO, продажами и удержанием пользователей, рекомендуем прочитать «Почему скорость загрузки сайта критически важна для Shopify-магазина».

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

На этом примере серверу потребовалось 1,8 секунды для загрузки первого изображения
и 1,9 секунды для загрузки самого большого изображения. PageSpeed Insights

Поисковая оптимизация

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

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

Для интернет-магазинов изображения также являются частью оптимизации товарных страниц. Подробнее о комплексном подходе к SEO карточек товаров можно прочитать в статье «Как улучшить SEO страниц товара в интернет-магазине Shopify».

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

Выбор формата влияет одновременно на качество изображения и его размер. Для разных задач подходят разные форматы.

WebP

WebP — современный формат изображений, разработанный Google для использования в интернете. Он поддерживает как lossy-, так и lossless-сжатие.

WebP обычно позволяет значительно уменьшить размер изображения по сравнению с JPEG и PNG при сопоставимом визуальном качестве. Конкретный результат зависит от исходного изображения и настроек сжатия.

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

JPEG

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

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

PNG

PNG использует lossless-сжатие, поэтому изображение сохраняет исходное качество после оптимизации. Формат также поддерживает прозрачность.

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

SVG

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

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

Кроме того, SVG-файлы часто имеют небольшой вес, что помогает уменьшить объем данных, загружаемых браузером.

AVIF

AVIF — современный формат изображений, ориентированный на использование в интернете.

Он обеспечивает очень эффективное сжатие и позволяет получать небольшие файлы при сохранении высокого визуального качества. Во многих случаях AVIF может быть значительно легче WebP или JPEG.

AVIF обеспечивает очень эффективное сжатие и часто позволяет получить меньший файл, чем WebP или JPEG. При этом WebP остаётся более универсальным вариантом, а конкретный выбор формата стоит делать с учетом браузерной поддержки, особенностей изображения и возможностей платформы.

GIF

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

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

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

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

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

Как проверить размеры изображения

Откройте нужную страницу и наведите курсор на интересующее изображение. Затем нажмите правую кнопку мыши и выберите пункт "Посмотреть код/Inspect".

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

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

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

Если необходимо узнать характеристики исходного файла, можно посмотреть ссылку на его расположение и открыть информацию о самом изображении.

Инструменты для оптимизации изображений

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

Среди подобных решений можно использовать Shopify Image Resizer, Image Optimizer by Squirai и LoyaltyHarbour Image Optimizer.

Shopify Image Resizer

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

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

Image Optimizer by Squirai

Squirai предлагает инструмент для автоматической оптимизации изображений. Он предназначен для подготовки изображений с учетом требований производительности и SEO.

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

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

LoyaltyHarbour Image Optimizer

LoyaltyHarbour Image Optimizer также автоматизирует сжатие изображений на сайте.

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

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

Но важно понимать, что для большинства Shopify-магазинов отдельное приложение для конвертации изображений не является обязательным: Shopify CDN автоматически оптимизирует изображения при доставке. Сторонние приложения могут быть полезны для массового сжатия уже загруженных файлов, управления alt-текстами или автоматизации дополнительных задач.

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

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

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

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

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

Изображение загружается слишком медленно

Проблема: изображение появляется значительно позже остальных элементов страницы или не загружается вообще.

Решение: проверьте формат и размер файла. Слишком тяжелые изображения стоит сжать или преобразовать в более подходящий формат. Для логотипов и графики можно использовать SVG, а для фотографий и других растровых изображений — WebP.

Изображение выглядит размытым

Проблема: фотография выглядит пиксельной или недостаточно четкой.

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

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

Если изображение стало заметно хуже после сжатия, можно уменьшить степень компрессии или выбрать lossless-формат, например PNG.

Изображение вообще не отображается

Проблема: вместо изображения появляется пустая область или иконка отсутствующего файла.

Решение: проверьте URL изображения. Ссылка должна вести непосредственно к нужному файлу. Также необходимо проверить имя файла и расширение в URL.

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

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

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

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

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

Оптимизация изображений — только один из элементов технической работы с магазином. Если требуется комплексно проверить производительность и другие технические аспекты Shopify-магазина, можно дополнительно ознакомиться с материалом «Базовая SEO-оптимизация Shopify-магазина: пошаговая инструкция».

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

Также, важно понимать, что отдельная мобильная версия изображения нужна не всегда. Если меняется только разрешение, responsive images (srcset/sizes) позволяют браузеру выбрать подходящий размер. Отдельное mobile-изображение особенно полезно, когда для мобильного экрана требуется другой кадр или соотношение сторон.