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

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

Оглавление

Почему размер файлов изображений имеет значение в магазине Shopify

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

Скрытая конкуренция на каждой странице

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

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

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

Практическая выгода

Причина, по которой это важно, проста. Базовое количество пикселей задает базовый уровень, а сжатие и формат определяют конечный размер файла. 24-мегапиксельное изображение в 24-битном RGB содержит около 72 миллионов байт необработанных пиксельных данных, в то время как то же изображение может занимать около 423,41 КБ в формате JPEG со 100% качеством или примерно 211,7 КБ в формате JPEG с 90% качеством, в зависимости от параметров экспорта ( Scantips ). Именно эта разница объясняет, почему два хранилища могут использовать изображения, которые выглядят почти идентично, и при этом получать совершенно разные результаты по скорости.

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

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

Размер изображения против размера файла: почему важны оба параметра

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

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

Пиксели устанавливают потолок

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

Параметры экспорта быстро меняют результат. Одна и та же исходная фотография может получиться размером около 423,41 КБ в формате JPEG со 100% качеством и примерно 211,7 КБ в формате JPEG с 90% качеством. Пиксели остаются теми же, при этом экспорт сохраняет большую или меньшую часть исходных деталей.

Сжатие и формат определяют результат.

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

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

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

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

Сравнение форматов JPEG, PNG, WebP и AVIF

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

Инфографика, сравнивающая форматы изображений JPEG, PNG, WebP и AVIF, с описанием их характеристик и вариантов использования.

JPEG и PNG по-прежнему занимают своё место.

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

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

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

WebP и AVIF позволяют уменьшить размер файлов.

Современные форматы обычно ещё больше уменьшают размер файлов. Например, изображение в формате JPEG с 75% сжатием занимает около 1,25–1,53 МБ , WebP с потерями — около 0,72–0,88 МБ , AVIF — около 0,57–0,69 МБ , а JPEG XL — около 0,55–0,67 МБ ( W3Techs ). Это существенное снижение по сравнению со старыми методами экспорта, и это объясняет, почему многие магазины приложений могут уменьшить размер файлов, не ухудшая качество фотографий.

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

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

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

Как разрешение и сжатие влияют на цифры

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

Больше пикселей — больше данных

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

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

Сжатие экономит ваши ресурсы, но не освобождает лишние пиксели.

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

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

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

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

Основные веб-показатели и SEO-стоимость больших изображений

Крупные изображения напрямую вредят SEO, поскольку Google оценивает удобство использования, а не намерение пользователя загрузить изображение. На многих страницах Shopify самое большое видимое изображение, скорее всего, влияет на скорость загрузки. Если это изображение слишком большое, процесс Largest Contentful Paint замедляется, и посетителю приходится дольше ждать, прежде чем страница станет удобной для использования.

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

В отношении LCP обычно винят не то, что нужно.

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

Другой показатель, на который влияет вес изображений, — это кумулятивное смещение макета (Cumulative Layout Shift) . Если ваша тема не резервирует место для изображений должным образом, макет смещается по мере загрузки ресурсов. Это выглядит неаккуратно для покупателей и затрудняет использование страницы. Темы Shopify часто уже выполняют часть этой работы, но не всегда в достаточной мере, чтобы избавить продавца от неэффективного процесса обработки изображений.

Целевые размеры не выбираются случайным образом.

Технические рекомендации по размещению веб-сайтов обычно предусматривают размер фотографий товаров от 800 до 1000 пикселей и от 80 до 150 КБ , изображений для заголовка менее 200 КБ и общий бюджет изображений на страницу менее 500 КБ . Те же рекомендации указывают размер файлов JPEG в диапазоне от 200 до 600 КБ , WebP — от 150 до 450 КБ , AVIF — от 80 до 300 КБ , а PNG — от 500 КБ до 3 МБ ( Vizua ). Эти диапазоны существуют потому, что вес изображений и производительность страницы взаимосвязаны.

Чтобы страница работала быстро, не обязательно делать её искусственно маленькой. Главное — дисциплинированность. Если изображения загружаются слишком много, вы заставляете браузер выполнять работу, которая не улучшает пользовательский опыт. Это прямые издержки для SEO, а не теоретические.

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

Целевые размеры файлов изображений в зависимости от места размещения в Shopify

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

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

Изображения во всю ширину обычно требуют больше места, чем небольшие блоки макета. В рекомендациях по адаптивным изображениям обычно указывается, что изображения во всю ширину должны быть около 1600 пикселей и размером от 200 до 300 КБ , изображения меньшего размера (от 25% до 50%) — около 800 пикселей и размером от 70 до 350 КБ , а также изображения, размер которых примерно в 2 раза превышает пространство экрана, чтобы они оставались четкими на экранах с высокой плотностью пикселей. На практике это означает, что для одной и той же исходной фотографии часто требуются разные варианты экспорта: один для занимаемого ею места, а другой — для более четкого отображения, ожидаемого на экране с высокой плотностью пикселей.

Целевые значения размера файлов изображений в зависимости от места размещения в Shopify Трудоустройство Целевая ширина Целевой размер файла Рекомендуемый формат
баннер героя Герой в верхней части страницы Примерно 1600 пикселей 200–300 КБ JPEG или WebP
миниатюра сетки коллекции Коллекция плиток Примерно от 400 до 600 пикселей 40–80 КБ JPEG или WebP
Фотография на странице товара Главная галерея товаров Примерно от 800 до 1200 пикселей 100–200 КБ JPEG, WebP или AVIF
Миниатюрное изображение или образец цвета Небольшой опорный паз Примерно от 200 до 400 пикселей Старайтесь быть как можно легче JPEG или PNG, в зависимости от содержимого.

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

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

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

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

Общее правило Shopify: пусть слот сам определяет экспорт. Главный элемент может быть достаточно информативным. Миниатюра в сетке — нет.

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

Распространенные заблуждения, замедляющие работу магазинов.

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

Пять убеждений, вызывающих неизбежные вздутия живота

  • Более высокое разрешение всегда означает лучшее качество. Это перестаёт быть правдой, как только изображение становится больше, чем занимаемое им пространство. Дополнительные пиксели никак не улучшают восприятие покупателя, они лишь увеличивают вес изображения.
  • Формат PNG всегда чётче, чем JPEG. PNG — правильный выбор для логотипов и графики с чёткими краями, но для фотографий товаров обычно не требуется такой объём данных без потерь.
  • Shopify автоматически оптимизирует всё. В некоторых случаях Shopify помогает, но исходный файл всё равно устанавливает предельный размер, который может занимать ресурс.
  • WebP вредит SEO, потому что Google не может его прочитать. Это убеждение устарело. Поисковые системы могут отображать современные форматы как обычные изображения.
  • Размер изображения имеет значение только на настольных компьютерах. Пользователи мобильных устройств в первую очередь ощущают ненужный размер файла, поскольку их устройства и скорость соединения имеют меньший запас прочности.

Корректировка, которую могут использовать продавцы немедленно.

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

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

Как уже говорилось в разделе о разрешении, изображение с разрешением 24 МП после сжатия может занимать от 2 до 8 МБ , что достаточно ясно показывает, почему количество пикселей само по себе не говорит о том, готово ли изображение для размещения в интернете. Главный вопрос заключается в том, соответствует ли файл месту размещения в Shopify, для которого он предназначен. Для главного изображения допустимо больше, чем для карточки сетки, а для изображения с увеличением — больше, чем для миниатюры. Экспорт должен соответствовать роли.

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

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

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

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

Простая процедура экспорта, подходящая для Shopify.

  1. Экспортируйте изображение с заданной шириной для соответствующего размещения. Изображение-заставка, карточка коллекции, увеличенное изображение товара и миниатюра выполняют разные функции, поэтому не загружайте файл большего размера только потому, что исходное изображение это позволяет.
  2. Выберите формат в зависимости от роли. Фотографии обычно подходят для форматов JPEG, WebP или AVIF. Логотипы и графические изображения с большим количеством текста лучше подходят для формата PNG, если важна прозрачность или четкие края.
  3. При необходимости сохраните версию для реального магазина и версию с увеличением. В файле с увеличением можно сохранить больше деталей, но видимая часть страницы не должна занимать слишком много места, если только это действительно не требуется для макета.
  4. По возможности используйте более лёгкий современный формат. Для отображения изображения в реальном времени используйте WebP или AVIF, а JPEG используйте в качестве запасного варианта, если важна совместимость.
  5. Перед публикацией проверьте метаданные изображения и альтернативный текст. Если изображение достаточно важно, чтобы его выделить, значит, его необходимо проверить. Используйте генератор альтернативного текста RankEngine, чтобы обеспечить согласованность этого этапа рабочего процесса.

Скриншот с сайта https://rankengine.app

Что дает вам постоянство?

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

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

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