Tikriausiai jums taip yra nutikę. Produkto puslapis „Shopify“ programoje atrodo nepriekaištingai, nuotraukos redaktoriuje ryškios, o mobiliųjų įrenginių lankytojai pradeda šokinėti, o jūsų puslapio įkėlimo greičio balas atkakliai siekia šešiasdešimt. Problema paprastai nėra „blogas dizainas“. Problema ta, kad paveikslėlių failai yra per dideli išdėstymui, ir kiekvienas papildomas baitas turi nukeliauti, kol pirkėjas pamato produktą, kainą ar mygtuką „Įdėti į krepšelį“.

Štai kodėl sprendimai dėl vaizdų vitrinoje niekada nėra vien dizaino sprendimai. Jie turi įtakos puslapio įkėlimo greičiui , vaizdo kokybei ir tai, kiek puslapio dalies „Google“ gali nuskaityti ir pateikti pakankamai greitai, kad tai būtų svarbu. Jei ieškote praktiško būdo, kaip pakeisti dydį nespėliojant, Yassine Malti vaizdų dydžio keitimo vadovas yra naudingas pagalbininkas, nes jis padeda suprasti mechaniką prieš įkeliant kitą paketą.

Turinys

Kodėl nuotraukų failų dydžiai svarbūs „Shopify“ parduotuvėje

Pardavėjas gali peržiūrėti nušlifuotą produkto puslapį „Shopify“ administratoriaus skydelyje ir vis tiek nepastebėti pagrindinės problemos. Puslapis gali atrodyti gerai nešiojamajame kompiuteryje su „Wi-Fi“, bet užstrigti mobiliajame įrenginyje, pagrindinis paveikslėlis gali pasirodyti vėlai, o pirkėjas slenka per puslapį, kol jis atrodo paruoštas. Šis skirtumas tarp gerai atrodančio ir greitai įkeliamo puslapio yra tas, nuo kurio priklauso, ar apsilankymas taps pajamomis, ar kliūtimi.

Paslėpta konkurencija kiekviename puslapyje

Kiekvienas vitrinoje esantis paveikslėlis konkuruoja su tekstu, scenarijais, schemomis ir kliento kantrybe. Jei pagrindinė nuotrauka yra per didelė, ji ne tik eikvoja srautą, bet ir sulėtina akimirką, kai lankytojas gali įvertinti pasiūlymą. Vaizdo svoris yra konversijos ir „Core Web Vitals“ klausimas tuo pačiu metu.

„Shopify“ prekybininkai tai dažniausiai pirmiausia pajunta produktų ir kolekcijų puslapiuose. Kelios didelės nuotraukos gali padaryti visą maketą sunkų, ypač mobiliuosiuose tinkluose, ir šis svoris matomas svarbiausiose vietose: herojaus paveikslėlyje, kolekcijos tinklelyje, produkto priartinimo režime ir miniatiūrose. Herojaus paveikslėlio paskirtis skiriasi nuo miniatiūros, todėl jis neturėtų būti tokio pat dydžio failo. Tas pats pasakytina ir apie kolekcijų tinklelius, kur pasikartojantys vaizdai greitai kaupiasi ir baugina kiekvieną slinkimą.

Paveikslėlio failo dydis taip pat turi įtakos tam, kaip greitai puslapis tampa tinkamas naudoti, todėl jį reikia aptarti kartu su maketo planavimu. Neapdoroto vaizdo matmenys yra svarbūs, tačiau naršyklė turi nuskaityti ir iššifruoti pateikiamo failo dydį. Kaip paaiškinta Yassine Malti paveikslėlio dydžio keitimo vadove , mažesnis eksportas gali išlaikyti vizualinį vaizdo vaidmenį ir pašalinti nereikalingą svorį.

Praktinis atlygis

Tai svarbu paprasta. Pagrindinių pikselių skaičius nustato bazinę liniją, o glaudinimas ir formatas lemia galutinį failo dydį. 24 megapikselių vaizdas su 24 bitų RGB yra apie 72 milijonus baitų neapdorotų pikselių duomenų, o tas pats vaizdas gali būti apie 423,41 KB dydžio kaip JPEG formatas esant 100 % kokybei arba maždaug 211,7 KB dydžio kaip JPEG formatas esant 90 % kokybei, priklausomai nuo eksportavimo pasirinkimų ( „Scantips “). Šis skirtumas yra priežastis, kodėl dvi parduotuvės gali naudoti beveik identiškai atrodančius vaizdus ir vis tiek gauti labai skirtingus greičio rezultatus.

Praktinė taisyklė: jei paveikslėlis yra svarbesnis pardavimui nei dekoravimui, prieš įkeldami nurodykite jam tikslinį failo dydį.

Tai yra standartas, kurį prekybininkai turėtų naudoti. Nustatykite biudžetą kiekvienai vitrinos vietai, tada priderinkite failą prie užduoties. Herojaus reklaminė juosta gali pateisinti didesnį svorį nei miniatiūra, tačiau nė viena iš jų neturėtų kelti papildomo svorio likusiai puslapio daliai. Kai šis įprotis įgytas, produktų puslapius lengviau valdyti, o kiekvienas naujas įkėlimas turi kur tilpti, o ne tampa dar viena paslėpta kliūtimi.

Vaizdo dydis ir failo dydis bei kodėl abu svarbūs

Prekybininkai dažnai vartoja šiuos terminus taip, tarsi jie reikštų tą patį, o tada stebisi, kodėl vaizdas administratoriaus skydelyje atrodo gerai, bet sulėtina parduotuvės veikimą. Vaizdo dydis yra pikselių matmenys, plotis ir aukštis. Failo dydis yra eksportuoto failo svoris baitais diske, paprastai KB arba MB, ir jis kinta priklausomai nuo glaudinimo, formato ir bitų gylio. Du vaizdai gali turėti tuos pačius matmenis, tačiau vis tiek gali sukelti labai skirtingas įkėlimo išlaidas.

Diagrama, kurioje lyginamas vaizdo dydis pikseliais su failo dydžiu baitais skaitmeninėje fotografijoje ir grafikoje.

Pikseliai nustato lubas

Pikseliai apibrėžia, kiek vaizdinių detalių gali talpinti failas. 24 megapikselių paveikslėlis su 24 bitų RGB yra apie 72 milijonus baitų neapdorotų pikselių duomenų, nes 24 milijonai pikselių × 3 baitai vienam pikseliui = 72 000 000 baitų . Šis neapdorotas skaičius yra eksportavimo pradinis taškas, o ne galutinis svoris, kurį gauna naršyklė.

Eksportavimo parinktys greitai pakeičia rezultatą. Ta pati šaltinio nuotrauka gali būti apie 423,41 KB dydžio JPEG formatu, kai kokybė yra 100 %, ir maždaug 211,7 KB dydžio, kai kokybė yra 90 %. Pikselių skaičius išlieka toks pat, o eksportuojant išsaugoma daugiau ar mažiau originalių detalių.

Glaudinimas ir formatas lemia rezultatą

Daugelis „Shopify“ auditų šiuo atveju nueina į šoną. Prekybininkai mano, kad didelis vaizdas žiniatinkliui turi būti per sunkus, tačiau matmenys ir failo svoris yra atskiri sprendimai. Didelio matmens vaizdas vis tiek gali būti tinkamas failas, jei jis gerai eksportuotas. Kukliai atrodanti grafika gali išpūsti, jei ji išsaugoma netinkamu formatu arba netinkama kokybe.

Šis skirtumas yra svarbus priklausomai nuo vitrinos vaidmens. Herojaus reklaminė juosta gali turėti daugiau vizualinio svorio nei miniatiūra, tačiau kolekcijos tinklelio vaizdas vis tiek turi būti pakankamai šviesus, kad puslapis būtų įkeliamas tvarkingai. Produkto priartinimo nuotraukos turi būti pakankamai detalios pikseliais, kad išliktų iš arti, o miniatiūrų skyriai paprastai eikvoja pralaidumą, jei eksportuotame faile išsaugoma daug daugiau detalių, nei gali parodyti maketas.

Nykščio taisyklė: pikseliai nustato, kiek vizualinių detalių gali rodyti vaizdas. Failo dydis nustato, kiek duomenų pirkėjas turi atsisiųsti.

Laikykite šiuos du skaičius atskirai ir vaizdų planavimas taps lengvesnis. Siaurai miniatiūros sričiai per dideli matmenys nenaudingi. Produkto puslapio priartinimo vaizdui reikia pakankamai pikselių, kad jis atrodytų ryškus, tačiau eksportuotas failas vis tiek turi išlikti pakankamo dydžio pagrindiniams žiniatinklio gyvybingumo rodikliams ir likusiai puslapio daliai, kuri turi būti įkeliama aplink jį.

JPEG, PNG, WebP ir AVIF palyginimas

Kiekvienas vaizdo formatas „Shopify“ vitrinoje atlieka skirtingą funkciją. Produkto nuotrauka, logotipas ir ekrano kopija reikalauja skirtingo požiūrio, net jei jie yra toje pačioje temoje. Formatą rinkitės atsižvelgdami į vaizdo paskirtį puslapyje, o ne į įpročius.

Infografika, kurioje lyginami JPEG, PNG, WebP ir AVIF vaizdo formatai su jų funkcijų ir naudojimo atvejų aprašymais.

JPEG ir PNG vis dar užima savo vietą

JPEG išlieka standartiniu nuotraukų pasirinkimu. Jis gerai suspaudžiamas, veikia beveik visur ir paprastai išlaiko produktų vaizdus pakankamai šviesius žiniatinkliui. PNG tinka vaizdams, kuriems reikia ryškių kraštų, plokščių spalvų, skaidrumo ar teksto, todėl logotipai ir vartotojo sąsajos grafika dažnai tinka šiam formatui, net jei failai paprastai yra sunkesni.

Šis atskyrimas yra svarbus „Shopify“ sistemoje, nes parduotuvės paprastai derina abiejų rūšių išteklius. PNG formatu išsaugota gyvenimo būdo nuotrauka paprastai yra sunkesnė, nei parduotuvės vitrina turi atlaikyti. JPEG formatu išsaugotas logotipas gali atrodyti grubiai arba prarasti skaidrumą, todėl vėliau reikės vengti valymo. Formatas turėtų atitikti darbą, o ne įprotį.

Geras pavyzdys – kolekcijos kortelė. Jei vaizdas yra švarus produkto kadras, JPEG paprastai sumažina jo svorį nepakenkdamas pirkėjų vaizdui. Jei šaltinis yra ženklelis, piktograma ar logotipas ant spalvoto fono, PNG geriau apsaugo kraštus ir išvengia negražių aureolių.

„WebP“ ir AVIF sumažina failų dydžius

Šiuolaikiniai formatai paprastai dar labiau sumažina failo dydį. Pavyzdžiui, panašios kokybės vaizdo JPEG su 75 % kontrastu dydis yra apie 1,25–1,53 MB , WebP su nuostoliais – apie 0,72–0,88 MB , AVIF – apie 0,57–0,69 MB , o JPEG XL – apie 0,55–0,67 MB ( „W3Techs “). Tai reikšmingas sumažėjimas, palyginti su senesniais eksportavimo įpročiais, ir tai paaiškina, kodėl daugelis vitrinų gali sumažinti svorį nepadarydamos nuotraukų išblukusių.

Esmė ta, kad formato pasirinkimas vis tiek priklauso nuo paties turinio. „WebP“ ir AVIF gali puikiai tikti produktų fotografijai, tačiau permatoma grafika gali elgtis kitaip. Jei failas daugiausia yra nuotrauka, naudokite formatą, kuris efektyviai suspaudžia tokio tipo vaizdą. Jei tai logotipas arba permatoma grafika, naudokite formatą, kuris išlaiko švarius kraštus.

„Shopify“ vitrinoje tai paprastai reiškia vieną formatą pagrindinei reklaminei juostai, kitą – logotipui, o dar kitą – produktų nuotraukoms iš arti. Teisingas pasirinkimas yra ne tas, kas atrodo moderniai, o tai, kas užtikrina puslapio greitį, tuo pačiu aiškiai rodant vaizdą tikrojoje vietoje.

Sprendimo taisyklė: fotografuojant žmones, produktus ar tekstūrą, rinkitės JPEG arba WebP. Plokščioms grafikoms, logotipams ar ekrano kopijoms rinkitės PNG. Jei jūsų darbo eiga palaiko atsarginį formatą, AVIF arba WebP yra švaresnis tiesioginės parduotuvės variantas.

Kaip skiriamoji geba ir suspaudimas keičia skaičius

Failas ekrane gali atrodyti gerai, bet vis tiek būti daug sunkesnis nei turėtų būti. Tai yra dalis, kurią prekybininkai pirmiausia pajunta „Shopify“ sistemoje, nes tas pats vaizdas gali veikti labai skirtingai – kaip pagrindinė reklaminė juosta, kolekcijos tinklelio plytelė, produkto priartinimo nuotrauka ar maža miniatiūra. Raiška kontroliuoja, kiek pikselių prašote naršyklės perkelti, o glaudinimas kontroliuoja, kiek šio svorio bus apkarpoma prieš įkeliant puslapį.

Daugiau pikselių reiškia daugiau duomenų

Didesnis vaizdas yra ne tik didesnė drobė, tai daugiau neapdorotų duomenų, kuriuos naršyklė gali apdoroti. Kaip minėta anksčiau, 24 MP vaizde prieš pradedant glaudinimą yra apie 72 milijonai baitų neapdorotų duomenų . Jei eksportuojate tą pačią sceną didesniu pikselių skaičiumi, nei reikia vitrinai, failas tampa sunkesnis, net jei nuotrauka, rodoma, atrodo beveik identiškai.

Todėl per dideli eksportuoti failai sukelia daugiau nei vien saugyklos netvarką. Jie padidina perkėlimo svorį, apsunkina naršyklės darbą ir gali sulėtinti vaizdą būtent toje vietoje, kur pirkėjai tikisi, kad puslapis bus greitas. Rinkinio tinklelio plytelei nereikia tiek pat apkrovos, kiek priartinamam produkto vaizdui, o miniatiūrai reikia daug mažiau nei abiem.

Glaudinimas taupo, bet neatleidžia papildomų pikselių

Suspaudimas gali sumažinti didelį šaltinio failą iki tokio lygio, kurį „Shopify“ gali efektyviai pateikti, tačiau tai nepanaikina išlaidų, susijusių su didesnio pikselių skaičiaus, nei reikia išdėstymui, naudojimu. Jei produkto nuotrauka dedama į priartinimo funkciją turinčią galeriją, norite, kad detalės būtų ryškios gerame ekrane. Jei tas pats vaizdas dedamas tik į kolekcijos kortelę, viso dydžio versijos siuntimas yra veltui švaistomos pastangos.

Aiškiau pagalvoti paprasta. Pikseliai nustato ribą duomenų švaistymui , nes per dideli matmenys sukuria išvengiamą svorį. Kokybės nustatymas nustato taupymo ribą , nes jis lemia, kiek detalių išsaugoma eksportuojant. Formatas kontroliuoja, kiek padeda glaudinimas , nes skirtingų tipų failai nesumažėja vienodai.

Jei reikia patarimų dėl vaizdų dydžio, susijusio su „Shopify“ naudojimo atvejais, šis „Shopify“ vaizdų SEO vadovas yra naudingas pagalbininkas. Jis padeda susieti eksportavimo sprendimą su faktiniu išdėstymu, užuot traktavus kiekvieną vitrinos vaizdą taip, lyg jis atliktų tą patį vaidmenį.

Pagrindinis paveikslėlis, kolekcijos plytelė ir miniatiūra reikalauja skirtingo detalumo lygio. Būtent šios dalies prekybininkai dažniausiai nepastebi, todėl nedidelis raiškos pakeitimas redaktoriuje gali atrodyti nekenksmingas, tačiau naršyklėje parduotuvė atrodo didesnė.

Pagrindiniai žiniatinklio gyvybingumo rodikliai ir didelių vaizdų SEO kaina

Dideli paveikslėlių kiekiai tiesiogiai kenkia SEO, nes „Google“ vertina patirtį, o ne įkėlimo tikslą. Daugelyje „Shopify“ puslapių didžiausias matomas paveikslėlis greičiausiai lemia įkėlimo patirtį. Jei tas paveikslėlis per didelis, „Largest Contentful Paint“ sulėtėja ir lankytojas ilgiau laukia, kol puslapis taps tinkamas naudoti.

Juostinė diagrama, rodanti, kaip didėjantys vaizdo failų dydžiai neigiamai veikia didžiausią turinio vaizdavimo puslapio įkėlimo laiką.

LCP dažniausiai kaltinamas dėl netinkamo dalyko.

Prekybininkai dažnai pirmiausia kaltina programas, scenarijus ar temos kodą, ir kartais jie yra teisūs. Tačiau pagrindinis paveikslėlis dažnai yra lengviausias vienintelis laimėjimas. Didelė pagrindinė nuotrauka gali sutrukdyti puslapiui tapti prasmingu, ypač mobiliuosiuose įrenginiuose, kur ryšio kokybė skiriasi, o peržiūros sritis yra pakankamai maža, kad per didelius išteklius būtų lengva pastebėti.

Kitas rodiklis, kuriam įtakos turi vaizdo svoris, yra kaupiamasis maketo poslinkis . Jei jūsų tema tinkamai nerezervuoja vietos vaizdams, maketas šokinėja kraunantis išteklius. Pirkėjams tai atrodo nerūpestinga ir apsunkina puslapio naudojimą. „Shopify“ temos dažnai jau atlieka dalį šio darbo, bet ne visada pakankamai, kad apsaugotų prekybininką nuo prastos vaizdų apdorojimo darbo eigos.

Dydžio tikslai nėra atsitiktiniai

Techninėse internetinio pristatymo gairėse dažniausiai nurodoma, kad produkto nuotraukos būtų maždaug 800–1000 pikselių ir 80–150 KB dydžio , pagrindiniai paveikslėliai – iki 200 KB , o bendras puslapio paveikslėlių biudžetas – iki 500 KB . Tose pačiose gairėse JPEG formatai dažnai nurodomi maždaug 200–600 KB dydžio , WebP formatas – nuo 150 iki 450 KB , AVIF formatas – nuo 80 iki 300 KB , o PNG formatas – nuo 500 KB iki 3 MB ( „Vizua “). Šie intervalai egzistuoja todėl, kad paveikslėlio svoris ir puslapio našumas yra susiję.

Puslapis nebūtinai turi būti dirbtinai mažas, kad veiktų greitai. Jį reikia valdyti. Jei jūsų vaizdų įkėlimas yra išpūstas, jūs verčiate naršyklę atlikti darbą, kuris nepagerina pirkėjo patirties. Tai tiesioginės SEO išlaidos, o ne teorinės.

Jei norite pažvelgti į „Shopify“ orientuotą platesnį audito procesą, šis „Shopify“ vaizdų SEO vadovas yra naudingas atskaitos taškas.

Tiksliniai nuotraukų failų dydžiai pagal „Shopify“ vietą

Lengviausias būdas nustoti spėlioti – nustatyti failo dydžio biudžetą kiekvienam vizualiniam vaidmeniui vitrinoje. Herojaus reklaminė juosta atlieka kitokią funkciją nei miniatiūra, o kolekcijos tinklelis neturėtų būti eksportuojamas su tokiu pat svoriu kaip ir priartinamas produkto vaizdas. Kai prekybininkai priskiria paveikslėlių failų dydžius faktinėms vietoms, parduotuvę lengviau prižiūrėti greitai ir daug lengviau audituoti.

Leiskite vitrinos išdėstymui diktuoti jūsų eksporto pasirinkimus

Viso pločio paveikslėliams paprastai reikia daugiau vietos nei mažiems maketo blokams. Adaptyvūs paveikslėlių gairės dažniausiai nurodo viso pločio paveikslėlius, kurių dydis yra apie 1600 pikselių ir 200–300 KB , mažesnius 25–50 % išdėstymo paveikslėlius, kurių dydis yra arčiau 800 pikselių ir 70–350 KB , ir paveikslėlius, kurių dydis yra maždaug 2 kartus didesnis už ekrano erdvę, kad jie vis tiek atrodytų ryškūs didelio tankio ekranuose. Praktiškai tai reiškia, kad ta pati šaltinio nuotrauka dažnai turi būti eksportuojama skirtingai: viena vietai, kurioje ji užpildo, ir kita – ryškesniam atvaizdavimui, kurio tikimasi tankiame ekrane.

Nuotraukų failų dydžio tikslai pagal „Shopify“ vietą Paskirties vieta Taikinio plotis Tikslinis failo dydis Rekomenduojamas formatas
Didvyrio reklama Puslapio viršaus herojus Apie 1600 pikselių 200–300 KB JPEG arba WebP
Kolekcijos tinklelio miniatiūra Kolekcijos plytelės Apie 400–600 pikselių 40–80 KB JPEG arba WebP
Produkto puslapio nuotrauka Pagrindinė produktų galerija Apie 800–1200 pikselių 100–200 KB JPEG, WebP arba AVIF
Miniatiūra arba pavyzdžio vaizdas Mažas atraminis plyšys Apie 200–400 pikselių Laikykite kuo lengvesnį JPEG arba PNG, priklausomai nuo turinio

Pagrindinis paveikslėlis gali turėti daugiau svorio, nes jis užpildo didesnę peržiūros srities dalį. Kolekcijos plytelė to negali. Tai yra skirtumas, kurį prekybininkai turi turėti omenyje eksportuodami „Shopify“ skyrių vaizdus, nes failo dydis turėtų atitikti vietą, kurią paveikslėlis užima puslapyje.

Kodėl tą patį vaizdą gali reikėti eksportuoti daugiau nei vieną kartą

Produkto puslapyje dažnai pateikiamos kelios to paties failo versijos naudojant adaptyvų žymėjimą. Tai normalu. Naršyklė turėtų gauti mažesnį failą mažesniems ekranams ir didesnį tik ten, kur to reikia išdėstymui. Tokia konfigūracija išsaugo priartinimo kokybę, neapkraunant kiekvieno lankytojo nereikalingais failais.

Ta pati logika galioja ir ne tik produktų galerijai. Vitrinoje dažnai reikia vienokio požiūrio į pagrindinį veikėją, kitokio – kolekcijų kortelėms, o dar kitokius – detaliems vaizdams iš arti. Jei norite, kad socialinių tinklų ir bendrinimo elementai atitiktų vitrinos vaizdinius elementus, šis „Shopify“ socialinių tinklų vaizdų vadovas padeda susieti ne produkto puslapyje esančius vaizdus su ta pačia vaizdų darbo eiga.

„Shopify“ nykščio taisyklė: leiskite lizdui nuspręsti dėl eksporto. Herojus gali būti dosnus. Tinklelio miniatiūra – ne.

Ši taisyklė padeda išvengti dažnos klaidos, kai įkeliamas vienas milžiniškas paveikslėlis ir tikimasi, kad tema viską išspręs. Temos gali padėti, bet jos negali atšaukti prasto eksportavimo sprendimo.

Dažni klaidingi įsitikinimai, dėl kurių parduotuvės lėtėja

Daugybė lėtų „Shopify“ parduotuvių veikia lėtai, nes kažkas patikėjo pusiau teisinga taisykle ir ją kartojo. Šie įpročiai audituose pasirodo vėl ir vėl, dažniausiai todėl, kad patarimas iš pradžių skambėjo protingai ir niekada nebuvo patikrintas atsižvelgiant į tai, kaip kraunasi vitrina. Atskyrus įpročius nuo našumo, pataisymai paprastai yra paprasti.

Penki įsitikinimai, sukeliantys išvengiamą pilvo pūtimą

  • Didesnė raiška visada reiškia geresnę kokybę. Tai nebegalioja, kai vaizdas jau yra didesnis nei užimama erdvė. Papildomi pikseliai nieko neduoda pirkėjo vaizdui, jie tik prideda svorio.
  • PNG visada yra ryškesnis nei JPEG. PNG yra tinkamas pasirinkimas logotipams ir grafikai su ryškiais kraštais, tačiau produktų nuotraukoms paprastai nereikia tokių nuostolių neturinčių papildomų išteklių.
  • „Shopify“ automatiškai viską optimizuoja. Kai kuriais atvejais „Shopify“ padeda, tačiau pradinis įkėlimas vis tiek nustato turinio svorio ribas.
  • „WebP“ kenkia SEO, nes „Google“ negali jo perskaityti. Šis įsitikinimas yra pasenęs. Paieškos sistemos gali pateikti šiuolaikinius formatus, pavyzdžiui, įprastus vaizdus.
  • Vaizdo dydis svarbus tik darbalaukyje. Pirkėjai, naudojantys mobiliuosius įrenginius, pirmiausia jaučia nereikalingą failo svorį, nes jų įrenginiuose ir ryšiuose yra mažiau vietos klaidoms.

Korekcininkai gali naudoti nedelsdami

Pataisymas prasideda nuo vaidmens, o ne nuo įpročio. Pagrindinis paveikslėlis turi būti pakankamai kokybiškas, kad užimtų puslapio viršų. Kolekcijos plytelė turi likti šviesi, kad tinklelis būtų įkeliamas tvarkingai. Priartintas paveikslėlis gali perteikti daugiau detalių, nes atlieka kitą funkciją, o miniatiūra ar pavyzdys turėtų likti kuo mažesnis, kiek leidžia išdėstymas.

Todėl viena eksportavimo taisyklė kiekvienam vaizdui sukelia problemų. Jei išteklius yra nuotrauka, eksportuokite dėl greičio ir tikroviškų spalvų. Jei tai grafika su tekstu arba skaidrumu, apsaugokite kraštus ir susitaikykite su tuo, kad failas gali būti didesnis. Jei jis skirtas siauram langeliui, neįkelkite failo, skirto rodyti per visą plotį.

Kaip aptarta raiškos skyriuje, 24 MP vaizdas po suspaudimo gali būti nuo 2 iki 8 MB dydžio, o to pakanka, kad būtų aišku, kodėl vien pikselių skaičius neparodo, ar vaizdas yra paruoštas žiniatinkliui. Pagrindinis klausimas yra tai, ar failas atitinka „Shopify“ talpinimo vietą, kurioje jis rodomas. Herojus gali toleruoti daugiau nei tinklelio kortelę, o priartintas vaizdas – daugiau nei miniatiūrą. Eksportas turi atitikti vaidmenį.

Susijusi klaida – manyti, kad kiekvienam ištekliui reikia vienodo metaduomenų valymo. Jei vaizdas yra pakankamai svarbus, kad būtų rodomas, jis yra pakankamai svarbus, kad pirmiausia būtų audituojamas. Norėdami išlaikyti tą darbo eigos dalį nuoseklią, naudokite „Shopify“ vaizdų alternatyvaus teksto generatorių , tada įvertinkite failo dydį pagal tai, kokią vietą jis užpildys.

Tai yra dalis, kurios dauguma parduotuvių praleidžia. Failas nebūtinai turi būti mažas. Jis turi būti tinkamas.

Pakartojamas kontrolinis sąrašas kitai jūsų vaizdų partijai

Švariausias vaizdų darbo procesas yra tas, kurį jūsų komanda gali pakartoti neatspėdama. Kiekvieną kartą, kai tie patys patikrinimai atliekami ta pačia tvarka, sumažėja per didelių įkėlimų, maketavimo netikėtumų ir kataloge mažiau lėtai besislepiančių produktų puslapių. Jei ruošiatės pristatyti naują produktą arba atnaujinate temą, prieš ką nors paskelbdami, paleiskite paketinį darbą pagal šią rutiną.

Paprasta eksportavimo rutina, tinkanti „Shopify“

  1. Eksportuokite tiksliniu paskirties vietos pločiu. Pagrindinis elementas, kolekcijos kortelė, produkto priartinimo paveikslėlis ir miniatiūra atlieka skirtingas funkcijas, todėl neįkelkite didesnio failo vien todėl, kad tai leidžia šaltinio paveikslėlis.
  2. Pasirinkite formatą pagal vaidmenį. Nuotraukos paprastai tinka JPEG, WebP arba AVIF formatui. Logotipai ir tekstinė grafika geriau tinka PNG formatui, kai svarbus skaidrumas arba ryškūs kraštai.
  3. Jei reikia, išsaugokite tiesioginės parduotuvės versiją ir priartinto puslapio versiją. Priartinto puslapio faile galima išsaugoti daugiau detalių, tačiau matomas puslapis neturėtų turėti tokio svorio, nebent to tikrai reikia išdėstymui.
  4. Kai įmanoma, pateikite lengvesnį modernų formatą. Tiesioginiam vaizdui naudokite „WebP“ arba AVIF, o JPEG palikite kaip atsarginį variantą, kai svarbus suderinamumas.
  5. Prieš publikuodami patikrinkite vaizdo metaduomenis ir alternatyvųjį tekstą. Jei išteklius yra pakankamai svarbus, kad būtų rodomas, jis yra pakankamai svarbus, kad būtų audituojamas. Norėdami išlaikyti šią darbo eigos dalį nuoseklią, naudokite „RankEngine“ alternatyviojo teksto generatorių .

Ekrano kopija iš https://rankengine.app

Koks nuoseklumas tave nuperka

Maži patobulinimai kaupiasi visame kataloge. Vienas lengvesnis pagrindinis paveikslėlis pats savaime parduotuvės nepakeis, tačiau visas tinkamo dydžio produktų nuotraukų, kolekcijų plytelių ir miniatiūrų rinkinys gali padaryti vitriną švaresnę, greitesnę ir patogesnę apsipirkti. Klientai tai pastebi, net jei niekada nekalba apie failų dydžius.

Jei jūsų komanda tvarko vaizdų metaduomenis dideliu mastu, „RankEngine“ alternatyvaus teksto generatorius gali tęsti šią darbo eigos dalį nepaversdamas kiekvieno įkėlimo rankiniu darbu.

Taikykite šią rutiną kitai partijai ir jūsų vitrina iš karto užsikraus greičiau.