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

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

Змест

Чаму памеры файлаў малюнкаў маюць значэнне ў краме Shopify

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

Схаваная канкурэнцыя на кожнай старонцы

Кожная выява на вітрыне канкуруе з тэкстам, скрыптамі, схемай і цярпеннем кліента. Калі галоўная фатаграфія занадта вялікая, яна не толькі спажывае трафік, але і запавольвае момант, калі наведвальнік можа ацаніць прапанову. Вага выявы — гэта пытанне канверсіі і пытанне Core Web Vitals адначасова.

Прадаўцы 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 тут аказваюцца няўдалымі. Прадаўцы мяркуюць, што вялікае малюнак занадта цяжкае для вэб-сайта, але памеры і вага файла - гэта асобныя рашэнні. Вялікае малюнак усё яшчэ можа быць прымальным файлам, калі яго добра экспартаваць. Сціплая графіка можа стаць раздутай, калі яе захаваць у няправільным фармаце або з няправільнай якасцю.

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

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

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

Параўнанне 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 запавольваецца, і наведвальнік чакае даўжэй, перш чым старонка адчуе сябе зручнай для выкарыстання.

Слупковая дыяграма, якая паказвае, як павелічэнне памеру файлаў малюнкаў негатыўна ўплывае на час загрузкі старонкі з найбуйнейшым кантэнтным малюнкам.

LCP звычайна вінавацяць не ў тым

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

Іншы паказчык, на які ўплывае вага выявы, — гэта сукупны зрух макета . Калі ваша тэма не рэзервуе належным чынам месца для малюнкаў, макет падскоквае пры загрузцы рэсурсаў. Гэта выглядае нядбайна для пакупнікоў і ўскладняе выкарыстанне старонкі. Тэмы 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 КБ , а таксама малюнкі памерам прыкладна ўдвая больш за прастору дысплея, каб яны ўсё яшчэ выглядалі выразна на экранах з высокай шчыльнасцю. На практыцы гэта азначае, што адно і тое ж зыходнае фота часта патрабуе розных экспартаў: адзін для запаўняемага ім слота, а другі для больш выразнага рэндэрынгу, якога чакае шчыльны экран.

Мэтавыя памеры файлаў малюнкаў паводле Shopify Placement Размяшчэнне Шырыня мэты Памер мэтавага файла Рэкамендаваны фармат
Банер героя Герой уверсе старонкі Каля 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. Пры неабходнасці захавайце версію для жывой крамы і версію для Zoom. Файл Zoom можа захоўваць больш дэталяў, але бачная старонка не павінна мець такую вагу, калі толькі гэта сапраўды не патрабуецца для макета.
  4. Па магчымасці выкарыстоўвайце больш лёгкі сучасны фармат. Для жывой выявы выкарыстоўвайце WebP або AVIF, а ў выпадку неабходнасці захоўвайце JPEG у якасці рэзервовага варыянту.
  5. Праверце метададзеныя выявы і альтэрнатыўны тэкст перад публікацыяй. Калі рэсурс дастаткова важны для прадстаўлення, ён дастаткова важны для аўдыту. Выкарыстоўвайце генератар альтэрнатыўнага тэксту RankEngine, каб забяспечыць паслядоўнасць гэтай часткі працоўнага працэсу.

Здымак экрана з https://rankengine.app

Якую паслядоўнасць вы можаце купіць

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

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

Ужывайце гэтую працэдуру да наступнай партыі, і ваша вітрына адразу ж пачне загружацца хутчэй.