Jums droši vien ir gadījies kaut kas līdzīgs. Produkta lapa Shopify izskatās noslīpēta, fotoattēli redaktorā ir asi, un tad mobilo ierīču apmeklētāji sāk lēkāt, kamēr jūsu PageSpeed rādītājs spītīgi atrodas sešdesmitajos. Problēma parasti nav "slikts dizains". Tā ir tā, ka attēlu failu izmēri ir pārāk lieli izkārtojumam, un katram papildu baitam ir jāpārvietojas, pirms pircējs redz produktu, cenu vai pogu "pievienot grozam".

Tāpēc lēmumi par attēliem veikala vitrīnā nekad nav tikai dizaina lēmumi. Tie ietekmē lapas ielādes ātrumu , vizuālo kvalitāti un to, cik lielu daļu lapas Google var pārmeklēt un atveidot pietiekami ātri, lai tam būtu nozīme. Ja vēlaties praktisku saīsni izmēru maiņai bez minējumiem, Jasīnas Malti attēlu izmēru maiņas rokasgrāmata ir noderīgs palīgs, jo tā palīdz izprast mehāniku pirms nākamās partijas augšupielādes.

Satura rādītājs

Kāpēc attēlu failu izmēriem ir nozīme Shopify veikalā

Tirgotājs var aplūkot noslīpētu produkta lapu Shopify administrēšanas panelī un joprojām nepamanīt pamatproblēmu. Lapa var darboties labi klēpjdatorā, izmantojot Wi-Fi, bet mobilajā tālrunī var apstāties, galvenais attēls parādās ar nokavēšanos, un pircējs ritina tālāk par locījumu, pirms lapa šķiet gatava. Šī atšķirība starp labi izskatīgu lapu un ātri ielādējamu lapu nosaka, vai apmeklējums kļūs par ieņēmumiem vai berzi.

Slēptā konkurence katrā lapā

Katrs attēls vitrīnā konkurē ar tekstu, skriptiem, shēmām un klienta pacietību. Ja galvenā fotogrāfija ir pārāk liela, tā ne tikai patērē joslas platumu, bet arī palēnina brīdi, kad apmeklētājs var novērtēt piedāvājumu. Attēla svars ir vienlaikus gan konversijas jautājums , gan Core Web Vitals jautājums.

Shopify tirgotāji to parasti vispirms izjūt produktu lapās un kolekciju lapās. Daži lieli fotoattēli var padarīt visu izkārtojumu smagnēju, īpaši mobilajos tīklos, un šis svars parādās vissvarīgākajās vietās — galvenajā attēlā, kolekciju režģī, produktu tālummaiņā un sīktēlos. Galvenā attēla uzdevums atšķiras no sīktēla, tāpēc tam nevajadzētu būt tādam pašam faila lieluma slogam. Tas pats attiecas uz kolekciju režģiem, kur atkārtoti attēli ātri uzkrājas un soda katru ritināšanu.

Attēla faila lielums ietekmē arī to, cik ātri lapa kļūst lietojama, tāpēc tas ir jāaplūko tāpat kā izkārtojuma plānošana. Neapstrādāta attēla izmēri ir svarīgi, bet piegādājamā faila lielums ir tas, kas pārlūkprogrammai ir jāiegūst un jāatšifrē. Kā paskaidrots Jasīnas Malti attēlu izmēru maiņas rokasgrāmatā , mazāks eksports var saglabāt attēla vizuālo lomu, vienlaikus noņemot nevajadzīgu svaru.

Praktiskā atdeve

Iemesls, kāpēc tas ir svarīgi, ir vienkāršs. Pamata pikseļu skaits nosaka sākotnējo vērtību, un saspiešana un formāts nosaka galīgo faila lielumu. 24 megapikseļu attēls ar 24 bitu RGB krāsu diapazonu satur aptuveni 72 miljonus baitu neapstrādātu pikseļu datu, savukārt tas pats attēls kā JPEG fails ar 100% kvalitāti var sasniegt aptuveni 423,41 KB vai aptuveni 211,7 KB kā JPEG fails ar 90% kvalitāti atkarībā no eksportēšanas izvēlēm ( Scantips ). Šī atšķirība ir iemesls, kāpēc divi veikali var izmantot attēlus, kas izskatās gandrīz identiski, un joprojām iegūt ļoti atšķirīgus ātruma rezultātus.

Praktisks noteikums: ja attēls ir svarīgāks pārdošanai, nevis dekorēšanai, pirms augšupielādes norādiet tā faila lieluma mērķi.

Tas ir standarts, ko tirgotājiem vajadzētu izmantot. Nosakiet budžetu katrai vitrīnas vietai un pēc tam pielāgojiet failu darbam. Galvenais baneris var attaisnot lielāku svaru nekā sīktēls, taču nevienam no tiem nevajadzētu piespiest pārējo lapu nest papildu slodzi. Kad šis ieradums ir ieviests, produktu lapas ir vieglāk pārvaldīt, un katram jaunam augšupielādētajam failam ir vieta, kur to ievietot, nevis tas kļūst par vēl vienu slēptu traucēkli.

Attēla lielums salīdzinājumā ar faila lielumu un kāpēc abi ir svarīgi

Tirgotāji bieži lieto šos terminus tā, it kā tie nozīmētu vienu un to pašu, un pēc tam brīnās, kāpēc attēls administrēšanas panelī izskatās labi, bet palēnina veikala darbību. Attēla izmērs ir pikseļu izmēri, platums un augstums. Faila lielums ir eksportētā faila svars baitos diskā, parasti KB vai MB, un tas mainās atkarībā no saspiešanas, formāta un bitu dziļuma. Diviem attēliem var būt vienādi izmēri, bet ielādes izmaksas joprojām var būt ļoti atšķirīgas.

Diagramma, kurā salīdzināts attēla lielums pikseļos ar faila lielumu baitos digitālajai fotogrāfijai un grafikai.

Pikseļi nosaka griestus

Pikseļi nosaka, cik daudz vizuālo detaļu fails var saturēt. 24 megapikseļu attēls ar 24 bitu RGB krāsu diapazonu satur aptuveni 72 miljonus baitu neapstrādātu pikseļu datu, jo 24 miljoni pikseļu × 3 baiti uz pikseli = 72 000 000 baiti . Šis neapstrādātais skaitlis ir eksportēšanas sākumpunkts, nevis galīgais svars, ko saņem pārlūkprogramma.

Eksportēšanas opcijas ātri maina rezultātu. Viens un tas pats avota fotoattēls JPEG formātā ar 100% kvalitāti var būt aptuveni 423,41 KB liels, bet JPEG formātā ar 90% kvalitāti — aptuveni 211,7 KB liels. Pikseļi paliek nemainīgi, savukārt eksportā tiek saglabātas vairāk vai mazāk sākotnējās detaļas.

Saspiešana un formāts nosaka rezultātu

Daudzas Shopify revīzijas šajā ziņā noiet greizi. Tirgotāji pieņem, ka liels attēls ir pārāk smags tīmeklim, taču izmēri un faila svars ir atsevišķi lēmumi. Liela izmēra attēls joprojām var būt pieņemams fails, ja tas ir labi eksportēts. Pieticīga izskata grafika var kļūt uzpūsta, ja tā tiek saglabāta nepareizā formātā vai nepareizā kvalitātē.

Šī atšķirība ir svarīga atkarībā no veikala lomas. Galvenais baneris var sniegt lielāku vizuālo svaru nekā sīktēls, taču kolekcijas režģa attēlam joprojām ir jābūt pietiekami gaišam, lai lapa ielādētos tīri. Produkta tālummaiņas attēliem ir nepieciešams pietiekami daudz pikseļu detaļu, lai tie būtu labi redzami, savukārt sīktēlu sloti parasti izšķiež joslas platumu, ja eksports saglabā daudz vairāk detaļu, nekā izkārtojums var parādīt.

Īkšķa likums: pikseļi nosaka, cik daudz vizuālās detaļas attēls var parādīt. Faila lielums nosaka, cik daudz informācijas pircējam ir jālejupielādē.

Atstājiet šos divus skaitļus atsevišķi, un attēlu plānošana kļūs vienkāršāka. Šaurai sīktēla vietai pārāk lieli izmēri nenāk par labu. Produkta lapas tālummaiņas attēlam ir nepieciešams pietiekami daudz pikseļu, lai tas izskatītos ass, taču eksportētajam failam joprojām ir jābūt saprātīga izmēra gan galvenajiem tīmekļa vitals rādītājiem, gan pārējai lapai, kas jāielādē ap to.

JPEG, PNG, WebP un AVIF salīdzinājums

Katram attēla formātam Shopify veikalā ir atšķirīgs mērķis. Produkta fotoattēlam, logotipam un ekrānuzņēmumam nepieciešama atšķirīga apstrāde, pat ja tie atrodas vienā un tajā pašā tēmā. Izvēlieties formātu, pamatojoties uz attēla funkciju lapā, nevis uz ieradumu.

Infografika, kurā salīdzināti JPEG, PNG, WebP un AVIF attēlu formāti ar to funkciju un lietošanas gadījumu aprakstiem.

JPEG un PNG joprojām ieņem savu vietu

JPEG joprojām ir standarta izvēle fotogrāfijām. Tas labi saspiež, darbojas gandrīz visur un parasti saglabā produktu attēlus pietiekami gaišus tīmeklim. PNG ir piemērots attēliem, kuriem nepieciešamas asas malas, vienmērīgas krāsas, caurspīdīgums vai teksts, tāpēc logotipi un lietotāja interfeisa grafika bieži vien tur iederas, pat ja faili parasti ir smagāki.

Šis sadalījums ir svarīgs Shopify platformā, jo veikali parasti apvieno abu veidu resursus. Dzīvesstila fotoattēls, kas saglabāts PNG formātā, parasti ir smagāks, nekā veikala skatlogam nepieciešams. Logotips, kas saglabāts JPEG formātā, var izskatīties nelīdzens vai zaudēt caurspīdīgumu, kas vēlāk radīs izvairāmu tīrīšanu. Formātam ir jāatbilst darbam, nevis ieradumam.

Labs piemērs ir kolekcijas karte. Ja attēls ir tīrs produkta fotoattēls, JPEG parasti samazina tā svaru, nepasliktinot pircēju uztveri. Ja resurss ir nozīmīte, ikona vai logotips uz krāsaina fona, PNG labāk aizsargā malas un novērš neglītus oreolus.

WebP un AVIF samazina failu izmērus

Mūsdienu formāti parasti vēl vairāk samazina faila lielumu. Piemēram, attēlam ar salīdzināmu kvalitāti JPEG ar 75% izšķirtspējas līmeni ir aptuveni 1,25–1,53 MB , WebP ar zudumradošiem attēliem aptuveni 0,72–0,88 MB , AVIF formātā ar zudumradošiem attēliem aptuveni 0,57–0,69 MB un JPEG XL formātā aptuveni 0,55–0,67 MB ( W3Techs ). Tas ir ievērojams samazinājums salīdzinājumā ar vecākiem eksportēšanas paradumiem, un tas izskaidro, kāpēc daudzi veikalu skatlogi var samazināt svaru, nepadarot fotoattēlus blāvus.

Problēma ir tā, ka formāta izvēle joprojām ir atkarīga no paša satura. WebP un AVIF var ļoti labi darboties produktu fotografēšanā, taču caurspīdīga grafika var darboties atšķirīgi. Ja fails galvenokārt ir fotogrāfija, izmantojiet formātu, kas efektīvi saspiež šāda veida attēlu. Ja tas ir logotips vai caurspīdīga grafika, izmantojiet formātu, kas saglabā malas tīras.

Shopify veikalā tas parasti nozīmē vienu formātu galvenajam banerim, citu logotipam un vēl citu produktu tuvplāniem. Pareizā izvēle ir mazāk saistīta ar modernu izskatu un vairāk ar to, kas nodrošina lapas ātrumu, vienlaikus skaidri parādot attēlu tā faktiskajā novietojumā.

Lēmuma noteikums: Fotografējot ar cilvēkiem, produktiem vai tekstūru, izvēlieties JPEG vai WebP. Plakanajai grafikai, logotipiem vai ekrānuzņēmumiem izvēlieties PNG. Ja jūsu darbplūsma atbalsta rezerves variantu, AVIF vai WebP ir tīrāka tiešsaistes veikala opcija.

Kā izšķirtspēja un saspiešana maina skaitļus

Fails ekrānā var izskatīties labi, bet tomēr būt daudz smagāks, nekā tam vajadzētu būt. Tā ir pirmā daļa, ko tirgotāji Shopify platformā izjūt, jo viens un tas pats attēls var darboties ļoti atšķirīgi — kā galvenais baneris, kolekcijas režģa elements, produkta tālummaiņas attēls vai mazs sīktēls. Izšķirtspēja nosaka, cik pikseļu pārlūkprogrammai jāglabā, un saspiešana nosaka, cik liela daļa no šī svara tiek apgriezta pirms lapas ielādes.

Vairāk pikseļu nozīmē vairāk datu

Lielāks attēls nav tikai lielāks audekls, bet gan vairāk neapstrādātu datu, ko pārlūkprogramma var apstrādāt. Kā parādīts iepriekš, 24 MP attēls satur aptuveni 72 miljonus baitu neapstrādātu datu pirms saspiešanas sākuma. Ja eksportējat to pašu ainu ar lielāku pikseļu skaitu, nekā nepieciešams veikalam, fails kļūst smagāks, pat ja fotoattēls pēc parādīšanas izskatās gandrīz identisks.

Tāpēc pārāk lieli eksporta faili rada vairāk nekā tikai atmiņas jucekli. Tie palielina pārsūtīšanas svaru, apgrūtina pārlūkprogrammas darbu un var palēnināt attēla ielādi tieši tajā vietā, kur pircēji sagaida, ka lapa šķitīs ātra. Kolekcijas režģa flīzei nav nepieciešama tāda pati slodze kā pietuvināmam produkta attēlam, un sīktēlam ir nepieciešams daudz mazāks apjoms nekā abiem šiem attēliem.

Saspiešana ietaupa jūsu resursus, bet neatbrīvo papildu pikseļus

Saspiešana var samazināt lielu avota failu līdz tādam līmenim, ko Shopify var efektīvi apkalpot, taču tā neizdzēš izmaksas, kas rodas, izmantojot vairāk pikseļu, nekā nepieciešams izvietojumam. Ja produkta fotoattēls tiek ievietots galerijā ar tālummaiņas funkciju, ir nepieciešams pietiekami daudz detaļu, lai tas būtu ass uz laba ekrāna. Ja tas pats attēls tiek ievietots tikai kolekcijas kartē, pilna izmēra versijas nosūtīšana ir veltīga pūle.

Skaidri sakot, uz to var domāt vienkārši. Pikseļi nosaka atkritumu pamatu , jo pārāk lieli izmēri rada novēršamu svaru. Kvalitātes iestatījums nosaka ietaupījumu griestus , jo tas nosaka, cik daudz detaļu eksports saglabā. Formāts kontrolē, cik lielā mērā šī saspiešana palīdz , jo dažādi failu tipi netiek samazināti vienādi.

Lai saņemtu norādījumus par attēlu izmēriem, kas saistīti ar Shopify lietošanas gadījumiem, šis Shopify attēlu SEO ceļvedis ir noderīgs palīgs. Tas palīdz sasaistīt eksportēšanas lēmumu ar faktisko izvietojumu, nevis izturēties pret katru veikala attēlu tā, it kā tas pildītu vienu un to pašu funkciju.

Galvenajam attēlam, kolekcijas flīzei un sīktēlam ir nepieciešami dažādi detalizācijas līmeņi. Tā ir daļa, ko tirgotāji parasti nepamana, un tāpēc nelielas izšķirtspējas izmaiņas redaktorā var šķist nekaitīgas, vienlaikus radot lielāku veikala apjomu pārlūkprogrammā.

Tīmekļa pamatrādītāji un lieljaudas attēlu SEO izmaksas

Liels attēlu skaits ļoti tiešā veidā kaitē SEO, jo Google mēra pieredzi, nevis augšupielādes nolūku. Daudzās Shopify lapās lielākais redzamais attēls, visticamāk, kontrolēs ielādes pieredzi. Ja šis attēls ir pārāk liels, Largest Contentful Paint palēninās, un apmeklētājs ilgāk gaida, pirms lapa kļūst lietojama.

Stabiņu diagramma, kas parāda, kā attēlu failu izmēru palielināšana negatīvi ietekmē lapas ielādes laikus ar lielāko satura krāsu.

LCP parasti tiek vainots nepareizajā lietā.

Tirgotāji bieži vien vispirms vaino lietotnes, skriptus vai tēmas kodu, un dažreiz viņiem ir taisnība. Taču galvenais attēls bieži vien ir visvieglāk sasniedzamais. Liels galvenais fotoattēls var aizkavēt brīdi, kad lapa kļūst jēgpilna, īpaši mobilajās ierīcēs, kur savienojuma kvalitāte mainās un skatlogs ir pietiekami mazs, lai pārāk lielus resursus būtu viegli pamanīt.

Vēl viens rādītājs, ko ietekmē attēla svars, ir kumulatīvā izkārtojuma nobīde . Ja jūsu tēma nepareizi rezervē vietu attēliem, izkārtojums mainās, ielādējot resursus. Tas pircējiem šķiet pavirši un apgrūtina lapas lietošanu. Shopify tēmas bieži vien jau veic daļu no šī darba, taču ne vienmēr pietiekami, lai pasargātu tirgotāju no sliktas attēlu darbplūsmas.

Izmēru mērķi nav nejauši

Tehniskajās vadlīnijās tīmekļa piegādei parasti ir norādīts, ka produktu fotoattēliem jābūt aptuveni 800–1000 pikseļu un 80–150 KB lieliem , galvenajiem attēliem — mazākiem par 200 KB , un kopējam lapas attēlu budžetam — mazākam par 500 KB . Tajās pašās vadlīnijās JPEG failiem bieži vien ir norādīts apjoms aptuveni 200–600 KB , WebP failiem — no 150 līdz 450 KB , AVIF failiem — no 80 līdz 300 KB un PNG failiem — no 500 KB līdz 3 MB ( Vizua ). Šie diapazoni pastāv tāpēc, ka attēla svars un lapas veiktspēja ir saistīti.

Lapai nav jābūt mākslīgi mazai, lai tā darbotos ātri. Tai ir jābūt disciplinētai. Ja attēlu ielāde ir uzpūsta, jūs liekat pārlūkprogrammai veikt darbu, kas neuzlabo pircēja pieredzi. Tās ir tiešas SEO izmaksas, nevis teorētiskas.

Lai iegūtu plašāku ieskatu Shopify audita procesā, šis Shopify attēlu SEO ceļvedis ir noderīgs atskaites punkts.

Mērķa attēlu failu izmēri pēc Shopify izvietojuma

Vienkāršākais veids, kā pārtraukt minēšanu, ir iestatīt faila lieluma budžetu katrai vizuālajai lomai veikala skatlogā. Galvenais baneris veic atšķirīgu uzdevumu nekā sīktēls, un kolekcijas režģis nedrīkst tikt eksportēts ar tādu pašu svaru kā tālummaiņas produkta attēls. Kad tirgotāji piešķir attēlu failu izmērus faktiskajiem novietojumiem, veikalu ir vieglāk uzturēt ātru un daudz vieglāk auditēt.

Ļaujiet veikala izkārtojumam noteikt jūsu eksporta izvēles

Pilna platuma attēliem parasti ir nepieciešama vairāk vietas nekā maziem izkārtojuma blokiem. Adaptīvo attēlu vadlīnijas parasti norāda uz pilna platuma attēliem aptuveni 1600 pikseļi un 200–300 KB , mazākiem 25–50% izkārtojuma attēliem tuvāk 800 pikseļiem un 70–350 KB , kā arī attēliem, kuru izmērs ir aptuveni 2 reizes lielāks par displeja vietu, lai tie joprojām izskatītos asi arī augsta blīvuma ekrānos. Praksē tas nozīmē, ka vienam un tam pašam avota fotoattēlam bieži vien ir nepieciešami dažādi eksportēšanas faili – viens vietai, ko tas aizpilda, un viens asākai renderēšanai, ko sagaida blīvs ekrāns.

Attēlu failu izmēru mērķi pēc Shopify izvietojuma Izvietojums Mērķa platums Mērķa faila lielums Ieteicamais formāts
Varoņa reklāmkarogs Lapas augšdaļas galvenais elements Aptuveni 1600 pikseļi 200 līdz 300 KB JPEG vai WebP
Kolekcijas režģa sīktēls Kolekcijas flīzes Apmēram 400 līdz 600 pikseļi 40 līdz 80 KB JPEG vai WebP
Produkta lapas fotoattēls Galvenā produktu galerija Aptuveni 800 līdz 1200 pikseļi 100 līdz 200 KB JPEG, WebP vai AVIF
Sīktēls vai parauga attēls Maza atbalsta sprauga Apmēram 200 līdz 400 pikseļi Saglabājiet pēc iespējas vieglāku JPEG vai PNG, atkarībā no satura

Galvenais attēls var būt nozīmīgāks, jo tas aizpilda lielāku skata logu. Kolekcijas flīze to nevar. Šī atšķirība tirgotājiem jāpatur prātā, eksportējot attēlus Shopify sadaļām, jo faila lielumam ir jāatbilst vietai, ko attēls aizņem lapā.

Kāpēc vienam un tam pašam attēlam var būt nepieciešams eksportēt vairāk nekā vienu reizi

Produkta lapā bieži tiek rādītas vairākas viena un tā paša faila versijas, izmantojot adaptīvu iezīmēšanu. Tas ir normāli. Pārlūkprogrammai vajadzētu saņemt mazāku failu mazākiem ekrāniem un lielāku failu tikai tur, kur tas ir nepieciešams izkārtojumam. Šāda iestatīšana saglabā tālummaiņas kvalitāti nemainīgu, neradot nevajadzīgu apjomu katram apmeklētājam.

Tā pati loģika attiecas arī uz produktu galeriju. Veikala vitrīnā bieži vien ir nepieciešams viens galvenajam varonim paredzēts attēlojums, cits kolekciju kartītēm un vēl cits tuvplāna detalizētiem attēliem. Ja vēlaties, lai sociālo mediju un koplietošanas līdzekļi būtu saskaņoti ar veikala vizuālajiem materiāliem, šī Shopify sociālo mediju attēlu rokasgrāmata palīdzēs savienot ārpus produktu lapas esošās vajadzības ar vienu un to pašu attēlu darbplūsmu.

Shopify īkšķa noteikums: ļaujiet slotam izlemt par eksportu. Varonis var būt dāsns. Režģa sīktēls nevar.

Šis noteikums novērš bieži pieļautu kļūdu, kad tiek augšupielādēts viens milzīgs attēls un cerēts, ka tēma visu atrisinās. Tēmas var palīdzēt, taču tās nevar atsaukt sliktu eksportēšanas lēmumu.

Bieži sastopami nepareizi priekšstati, kas kavē veikalu darbību

Daudzi lēni Shopify veikali darbojas lēni tāpēc, ka kāds ticēja puspatiesam noteikumam un turpināja to atkārtot. Šie ieradumi auditos parādās atkal un atkal, parasti tāpēc, ka padoms sākumā šķita saprātīgs un nekad netika salīdzināts ar to, kā ielādējas veikals. Kad ieradums ir atdalīts no veiktspējas, labojumi parasti ir vienkārši.

Pieci uzskati, kas izraisa novēršamu vēdera uzpūšanos

  • Augstāka izšķirtspēja vienmēr nozīmē labāku kvalitāti. Tas vairs nav taisnība, ja attēls jau ir lielāks par vietu, ko tas aizpilda. Papildu pikseļi neko nedod pircēja skatam, tie tikai pievieno svaru.
  • PNG vienmēr ir asāks nekā JPEG. PNG ir pareizā izvēle logotipiem un grafikai ar asām malām, taču produktu fotoattēliem parasti nav nepieciešama šāda bezzudumu papildinformācija.
  • Shopify automātiski optimizē visu. Shopify dažos gadījumos palīdz, taču sākotnējā augšupielāde joprojām nosaka maksimālo apjomu, cik liels svars var būt resursam.
  • WebP kaitē SEO, jo Google to nevar nolasīt. Šis uzskats ir novecojis. Meklēšanas sistēmas var atveidot modernus formātus, piemēram, parastus attēlus.
  • Attēla izmērs ir svarīgs tikai galddatorā. Pircēji, kas izmanto mobilās ierīces, vispirms izjūt nevajadzīgu faila svaru, jo viņu ierīcēs un savienojumos ir mazāka kļūdu iespējamība.

Korekcijas tirgotāji var izmantot nekavējoties

Risinājums sākas ar lomu, nevis ieradumu. Hero attēlam ir jābūt pietiekami kvalitatīvam, lai tas aizņemtu lapas augšdaļu. Kolekcijas flīzei ir jābūt gaišai, lai režģis ielādētos tīri. Tālummaiņas attēls var sniegt vairāk detaļu, jo tam ir cits uzdevums, savukārt sīktēlam vai paraugam jāpaliek tik mazam, cik to atļauj izkārtojums.

Tāpēc viens eksportēšanas noteikums katram attēlam rada problēmas. Ja resurs ir fotoattēls, eksportējiet, lai nodrošinātu ātrumu un ticamas krāsas. Ja tas ir attēls ar tekstu vai caurspīdīgumu, aizsargājiet malas un pieņemiet, ka fails var būt lielāks. Ja tas pieder šaurai vietai, neaugšupielādējiet failu, kas paredzēts pilna platuma attēlošanai.

Kā aprakstīts izšķirtspējas sadaļā, 24MP attēls pēc saspiešanas var sasniegt no 2 līdz 8 MB lielu izmēru, kas ir pietiekami, lai parādītu, kāpēc pikseļu skaits vien nenorāda, vai attēls ir gatavs tīmeklim. Galvenais jautājums ir, vai fails atbilst Shopify izvietojumam, kurā tas atrodas. Varonis var izturēt vairāk nekā režģa karti, un tālummaiņas attēls var izturēt vairāk nekā sīktēlu. Eksportam ir jāatbilst lomai.

Saistīta kļūda ir pieņēmums, ka katram resursam ir nepieciešama vienāda metadatu tīrīšana. Ja attēls ir pietiekami svarīgs, lai to parādītu, tas ir pietiekami svarīgs, lai to vispirms pārbaudītu. Izmantojiet Shopify attēlu alt teksta ģeneratoru , lai šī darbplūsmas daļa būtu konsekventa, un pēc tam novērtējiet faila lielumu, ņemot vērā vietu, ko tas aizpildīs.

Šo daļu vairums veikalu nepamana. Failam nav jābūt mazam. Tam jābūt atbilstošam.

Atkārtojams kontrolsaraksts jūsu nākamajai attēlu partijai

Vistīrākā attēlu darbplūsma ir tā, ko jūsu komanda var atkārtot bez minējumiem. Katru reizi, kad vienas un tās pašas pārbaudes notiek vienā un tajā pašā secībā, jūs saņemat mazāk pārāk lielu augšupielāžu, mazāk izkārtojuma pārsteigumu un mazāk lēnu produktu lapu, kas slēpjas katalogā. Ja gatavojat jauna produkta izlaišanu vai atsvaidzināt tēmu, pirms jebkādu produktu publicēšanas palaidiet paketi, izmantojot šo rutīnu.

Vienkārša eksportēšanas rutīna, kas piemērota Shopify

  1. Eksportējiet izvietojumam paredzētajā mērķa platumā. Galvenajam attēlam, kolekcijas kartei, produkta tālummaiņas attēlam un sīktēlam ir atšķirīgi uzdevumi, tāpēc neaugšupielādējiet lielāku failu tikai tāpēc, ka avota attēls to atļauj.
  2. Izvēlieties formātu atbilstoši lomai. Fotoattēli parasti atbilst JPEG, WebP vai AVIF formātam. Logotipi un grafika ar lielu teksta daudzumu labāk atbilst PNG formātam, ja ir svarīga caurspīdīgums vai asas malas.
  3. Saglabājiet tiešsaistes veikala versiju un, ja nepieciešams, tuvināto versiju. Tālummaiņas failā var saglabāt vairāk detaļu, taču redzamajai lapai nevajadzētu būt tik lielai, ja vien izkārtojumam tas nav īpaši nepieciešams.
  4. Ja iespējams, izmantojiet vieglāku, modernu formātu. Tiešraides attēlam izmantojiet WebP vai AVIF un, ja saderība ir svarīga, saglabājiet JPEG kā rezerves variantu.
  5. Pirms publicēšanas pārbaudiet attēla metadatus un alt tekstu. Ja resurss ir pietiekami svarīgs, lai to parādītu, tas ir pietiekami svarīgs, lai to auditētu. Izmantojiet RankEngine alt teksta ģeneratoru, lai nodrošinātu šīs darbplūsmas daļas konsekventu darbību.

Ekrānuzņēmums no https://rankengine.app

Kāda konsekvence tevi attaisno

Nelieli uzlabojumi uzkrājas visā katalogā. Viens vieglāks galvenais attēls pats par sevi veikalu nepārveidos, taču vesels labi izmērotu produktu fotoattēlu, kolekciju elementu un sīktēlu komplekts var padarīt veikala vitrīnu tīrāku, ātrāku un ērtāku iepirkties. Klienti to pamana, pat ja viņi nekad nerunā par failu izmēriem.

Ja jūsu komanda apstrādā attēlu metadatus plašā mērogā, RankEngine alt teksta ģenerators var nodrošināt šo darbplūsmas daļu, nepārvēršot katru augšupielādi par manuālu uzdevumu.

Pielietojiet šo rutīnu nākamajai partijai, un jūsu veikala skatlogs uzreiz ielādēsies ātrāk.