Качване на изображения

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

За да се показват изображенията във Вашия онлайн магазин точно както искате, трябва да използвате правилното съотношение на страните на изображението. Изображенията се оптимизират автоматично за Вашата витрина с мрежата за доставка на съдържание (CDN) на Shopify.

Качване на изображение в редактора на теми

Можете да добавяте изображения към Вашата тема в редактора на теми. Можете също така да качвате изображения в раздел Съдържание > Файлове на Вашия администраторски панел на Shopify. За да научите повече, вижте Качване и управление на файлове.

Стъпки:

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

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

Задаване на точка на фокусиране на изображение

Можете да използвате точки на фокусиране, за да определите най-важната част от дадено изображение във Вашия онлайн магазин. Когато зададете точка на фокусиране на изображение, Вие я превръщате в областта на фокус. Точките на фокусиране винаги се показват в кадър, дори ако имате тема, която изрязва изображението Ви, за да пасне на оформлението. Точките на фокусиране Ви дават повече контрол върху начина, по който изображението Ви се показва на екрани с различен размер, както и в случаите, когато темите използват различни съотношения на страните.

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

Съвместимост на точката на фокусиране с безплатните теми на Shopify

Можете да зададете точка на фокусиране на следните версии на безплатните теми на Shopify:

• Всички теми от семейството Horizon
• Colorblock версия 3.0.0 и по-нова
• Craft версия 5.0.0 и по-нова
• Crave версия 5.0.0 и по-нова
• Dawn версия 7.0.0 и по-нова
• Origin версия 1.0.0 и по-нова
• Publisher версия 1.0.0 и по-нова
• Refresh версия 2.0.0 и по-нова
• Ride версия 3.0.0 и по-нова
• Rise версия 1.0.0 и по-нова
• Sense версия 5.0.0 и по-нова
• Spotlight версия 0.0.1 и по-нова
• Studio версия 4.0.0 и по-нова
• Taste версия 4.0.0 и по-нова
• Trade версия 1.0.0 и по-нова

Ако използвате тема от трета страна, проверете документацията на темата си, за да разберете дали тя поддържа използването на точки на фокусиране.

Добавяне на точка на фокусиране към изображение

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

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

Стъпки:

1. Натиснете изображение от някое от следните местоположения във Вашия Shopify админ:
   • В секция „Съдържание“ > „Файлове“.
   • В редактора на теми.
   • В секция „Мултимедия“ на Вашите продуктови обяви в секция „Продукти“.
   • В имейл редактора на Shopify Messaging.
   • В секция „Метаполета“ на всеки ресурс, който има метаполе от тип „Референция към файл“ за добавяне на изображение.
2. За да изберете частта от изображението, където искате да зададете точка на фокусиране, натиснете изображението или плъзнете синята точка.
3. Натиснете „Запазване“.

Премахване на точка на фокусиране от изображение

Стъпки:

1. Натиснете изображение от някое от следните местоположения във Вашия Shopify админ:
   • В секция „Съдържание“ > „Файлове“.
   • В редактора на теми.
   • В секция „Мултимедия“ на Вашите продуктови обяви в секция „Продукти“.
   • В имейл редактора на Shopify Messaging.
   • В секция „Метаполета“ на всеки ресурс, който има метаполе от тип „Референция към файл“ за добавяне на изображение.
2. Натиснете „Премахване“.
3. Натиснете „Запазване като ново“.

Формати на изображенията

Поддържат се следните формати на изображения:

• JPEG
• Прогресивен JPEG
• PNG
• GIF
• HEIC
• WebP

Използване на JPEG изображения

JPEG изображенията са идеални за фотография и други неподвижни изображения със сложни цветове. Форматът JPEG има палитра с милиони цветове. JPEG също така има компресиране със загуба на качество, което може да помогне за поддържане на бързо време за зареждане на страницата без забележима загуба на качеството на изображението. Използвайте формата JPEG за следните типове изображения:

• продукти
• банери или слайдшоута
• страници и публикации в блога

Използване на PNG изображения

PNG изображенията са идеални за графики и икони с плътни цветове и без градиенти. Форматът PNG също поддържа прозрачност в изображенията. Използвайте формата PNG за следните типове изображения:

• лога
• икони
• бордюри и кантове

Автоматично компресиране на изображения и избор на формат

Изображенията не се компресират, когато ги качвате в администраторския панел на Shopify, което помага да се запази оригиналното им качество. Може обаче да се случи следното, за да се поддържат бързи времена за зареждане на страниците за Вашите клиенти:

• Когато изображенията се показват чрез темата на Вашия магазин, те може да претърпят компресиране за висококачествени изображения
• Shopify автоматично определя най-добрия възможен файлов формат, който да използва при показване на Вашите изображения
• Когато уеб браузърът на клиента поддържа модерни формати на изображения, като например WebP и AVIF (AV1 Image File Format), Вашите изображения се предоставят в тези формати
• GIF файловете се конвертират автоматично в анимиран WebP формат, за да се подобри ефективността чрез намаляване на размера на файла

Обмислете следните действия за най-добро качество на изображението:

• Качвайте изображения с по-висока разделителна способност до 5000 px x 5000 px или 25 мегапиксела
• Избирайте типове изображения с по-малко загуби, като например PNG, за щрихови графики, текст и иконична графика с прозрачност
• Използвайте JPEG за изображения на продукти или слайдшоута
• SVG файловете се поддържат, но имат ограничения – те не могат да бъдат трансформирани (оразмерявани, изрязвани и т.н.), без да се изисква растеризиран формат (JPEG, WebP, PNG)

Други типове файлове, като например PSD (Photoshop Document), TIFF (Tagged Image File Format) и BMP (Bitmap), се приемат, но ще бъдат конвертирани в JPEG/PNG при качване.

Ограничения за качване на изображения

Качването на изображения в Shopify има ограничения както по отношение на мегапикселите (MP), така и на размера на файла, който се измерва в мегабайти (MB). Мегапикселите се използват, за да се посочи от колко милиона пиксела е съставено едно изображение. Мегабайтите се използват, за да се посочи колко милиона байта памет или дисково пространство заема едно изображение.

Изображенията, качени в Shopify, не могат да надвишават нито едно от следните ограничения:

• 20 мегапиксела
• 20 мегабайта

За да намерите стойността на мегапикселите на Вашето изображение, можете да използвате следното уравнение:

(широчина в пиксели x височина в пиксели)/1 000 000

Например, изображение с разделителна способност 4900 px на 6930 px е 33,9 мегапиксела въз основа на уравнението: (4900x6930)/1 000 000 = 33,9 MP.

Цветови профили на изображението

Когато разглеждате изображение във Вашия онлайн магазин, цветовете в него може да се показват по различен начин от тези в оригиналното изображение, което качвате в Shopify. Това може да се случи, когато дадено изображение има цветови профил, който представлява набор от данни, съхранявани във файл с разширение .ICC или .ICM.

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

Цветовите профили се премахват поради следните причини:

• Не всички устройства могат да четат .ICC или .ICM цветови профили, така че запазването им може да доведе до несъответствия в цветовете на изображението на различните устройства.
• Когато дадено качено изображение не включва цветови профил, тогава уеб браузърът приема sRGB, който е най-често срещаният цветови профил, използван за показване на изображения в интернет. Това гарантира, че Вашите изображения се показват по един и същ начин във всички основни уеб браузъри и устройства.
• Цветовите профили могат да заемат голямо дисково пространство, което може да доведе до по-дълго време за зареждане на страницата.

Премахване на цветовия профил от изображение

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

Прегледайте документацията на Adobe за това как да зададете или премахнете цветови профил (Illustrator, Photoshop) и да зададете или премахнете цветови профил (InDesign).

Най-добри практики за слайдшоута, банери с изображения и изображения с пълна ширина

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

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

Тъй като големите изображения не могат да се поберат на всички устройства, понякога Shopify показва само част от изображението в зависимост от устройството, което използвате. Ако Вашето слайдшоу с изображения съдържа много големи изображения, може да откриете, че части от изображенията не се виждат.

Съображения при използването на изображения за слайдшоута или банери с изображения

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

• Изображенията, които използвате за слайдшоута или фонове, не трябва да съдържат текст. Ако текстът е част от самото изображение, той може да бъде преместен, изрязан или коригиран в зависимост от Вашата тема. Използвайте редактора на теми, за да добавите текст и връзки към Вашите слайдшоута и фонове.

• За изображения, които използвате в слайдшоута или като фонове, избирайте прости изображения, така че всеки текст, който се наслагва върху тях, да е лесен за четене.

Широки изображения на високи екрани

Широките изображения може да бъдат изрязани отляво и отдясно, когато устройството, използвано за разглеждането им, има висок екран, като например мобилен телефон или таблет, гледан в портретен режим. В примера по-долу, ако хората са най-важната част от изображението, тогава можете да поставите фокусна точка от дясната страна на изображението.

Високи изображения на широки екрани

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

Поведение при зареждане на изображение

Когато посещавате страница в своя онлайн магазин, може да забележите, че изображенията първоначално изглеждат леко размазани и след малко стават ясни. Това е очаквано поведение, което помага за подобряване на скоростта на зареждане на магазина Ви и потребителския опит.

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

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

Отстраняване на неизправности с изображения