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

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

Выбор правильных размеров изображения

Крайне важно найти баланс между изображениями, которые достаточно велики, чтобы пользователи могли их увеличивать, и изображениями оптимального размера, чтобы они не занимали слишком много места и не замедляли время загрузки страницы. На Shopify вы можете загружать изображения размером до 4472 x 4472 пикселей с размером файла до 20 МБ. Но создатель веб-сайта обычно рекомендует использовать 2048 x 2048 пикселей для квадратных фотографий продукта. Это изображения с высоким разрешением, которые придают вашему магазину профессиональный и всесторонний вид с большими возможностями масштабирования. Имейте в виду, что для работы функции масштабирования ваши изображения должны иметь размер более 800 x 800 пикселей.

Точно так же Amazon и Etsy предъявляют требования к изображению размером 1000 x 1000 пикселей для включения масштабирования.

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

Выбор правильного формата изображения

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

JPG

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

PNG

PNG был создан, чтобы улучшить формат GIF, убрав его ограничение в 256 цветов. Он широко распространен, без потерь (уменьшает размер файла без снижения качества) и поддерживает прозрачность (скажем, для прозрачного фона). Недостатком является то, что размеры файлов PNG могут быть большими из-за сжатия без потерь, а формат не так универсально совместим, как JPG.

гифка

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

ТИФФ

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

БМП

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

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

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

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

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

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

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

Об авторе

Холли Кардью является основателем Pixc, платформы, которая помогает магазинам электронной коммерции редактировать и оптимизировать фотографии своих продуктов, чтобы они могли увеличить продажи. Pixc превращает обычные изображения продуктов в красивые, редактируя и удаляя фон в течение 24 часов. Начав в подростковом возрасте, продавая на eBay и создавая собственную онлайн-площадку, Холли имеет опыт работы в электронной коммерции, онлайн-маркетинге, графическом дизайне и создании распределенных команд. У нее также есть опыт создания и управления магазинами Shopify и увеличения числа подписчиков в социальных сетях. В 2016 году Холли была включена в список Forbes «Розничная торговля и электронная коммерция 30 до 30 лет». Холли делит свое время между Сан-Франциско, Брисбеном и Сиднеем. Когда Холли не работает, она любит путешествовать, исследовать новые места, красивый дизайн, типографику и придумывать новые бизнес-идеи.