Probablement t'ha passat això. Una pàgina de producte es veu polida a Shopify, les fotos són nítides a l'editor i, a continuació, els visitants mòbils comencen a rebotar mentre que la teva puntuació de PageSpeed es manté tossudament als seixanta. El problema no sol ser un "mal disseny". És que les mides dels fitxers d'imatge són massa pesades per al disseny i cada byte addicional ha de viatjar abans que un comprador vegi el producte, el preu o el botó d'afegir a la cistella.

És per això que les decisions sobre la imatge en un aparador no són mai només decisions de disseny. Afecten la velocitat de la pàgina , la qualitat visual i la part de la pàgina que Google pot rastrejar i renderitzar prou ràpidament per tenir importància. Si voleu una drecera pràctica per canviar la mida sense endevinar, la guia de canvi de mida d'imatges de Yassine Malti és un complement útil, perquè us ajuda a entendre la mecànica abans de carregar el següent lot.

Índex

Per què importa la mida dels fitxers d'imatge en una botiga Shopify

Un comerciant pot mirar una pàgina de producte polida a l'administrador de Shopify i encara no veure el problema subjacent. La pàgina pot semblar correcta en un ordinador portàtil amb Wi-Fi, després quedar-se encallada al mòbil, la imatge principal apareix tard i el comprador es desplaça més enllà del plec abans que la pàgina sembli a punt. Aquesta bretxa entre una pàgina que té bon aspecte i una que es carrega ràpid és on la mida dels fitxers d'imatge decideix si una visita es converteix en ingressos o en fricció.

La competència oculta a cada pàgina

Cada imatge d'un aparador competeix amb el text, els scripts, l'esquema i la paciència del client. Si la foto principal és massa gran, fa més que consumir ample de banda, sinó que alenteix el moment en què el visitant pot jutjar l'oferta. El pes de la imatge és una pregunta de conversió i una pregunta de Core Web Vitals alhora.

Els comerciants de Shopify solen notar això primer a les pàgines de productes i a les pàgines de col·leccions. Unes quantes fotos grans poden fer que tot el disseny sembli pesat, sobretot a les xarxes mòbils, i aquest pes es manifesta als llocs que més importen: la imatge principal, la quadrícula de la col·lecció, el zoom del producte i les miniatures. Una imatge principal té una funció diferent de la d'una miniatura, per la qual cosa no hauria de tenir la mateixa càrrega de mida de fitxer. El mateix passa amb les quadrícules de les col·leccions, on les imatges repetides s'acumulen ràpidament i castiguen cada desplaçament.

La mida del fitxer d'imatge també afecta la rapidesa amb què la pàgina esdevé utilitzable, i per això pertany a la mateixa conversa que la planificació del disseny. Les dimensions de la imatge en brut importen, però la mida del fitxer lliurable és el que el navegador ha de buscar i descodificar. Tal com s'explica a la guia de canvi de mida d'imatges de Yassine Malti , una exportació més petita pot preservar el paper visual de la imatge alhora que elimina el pes innecessari.

La recompensa pràctica

La raó per la qual això és important és simple. El recompte de píxels subjacent estableix la línia de base, i la compressió i el format decideixen la mida final del fitxer. Una imatge de 24 megapíxels a 24 bits RGB conté uns 72 milions de bytes de dades de píxels en brut, mentre que la mateixa imatge pot arribar a tenir uns 423,41 KB com a JPEG amb una qualitat del 100% o aproximadament 211,7 KB amb una qualitat JPEG del 90%, depenent de les opcions d'exportació ( Scantips ). Aquesta diferència és el motiu pel qual dues botigues poden utilitzar imatges que semblen gairebé idèntiques i, tot i així, obtenir resultats de velocitat molt diferents.

Regla pràctica: si una imatge importa més per vendre que per decorar, assigna-li una mida de fitxer objectiu abans de penjar-la.

Aquest és l'estàndard que haurien d'utilitzar els comerciants. Establiu un pressupost per a cada espai de la botiga i, a continuació, feu coincidir el fitxer amb la feina. Un bàner principal pot justificar més pes que una miniatura, però cap dels dos hauria de forçar la resta de la pàgina a portar un llast addicional. Un cop establert aquest hàbit, les pàgines de productes són més fàcils de gestionar i cada nova càrrega té un lloc on encaixar en lloc de convertir-se en un altre llast amagat.

Mida de la imatge vs. mida del fitxer i per què ambdues són importants

Els comerciants sovint utilitzen aquests termes com si signifiquessin el mateix i després es pregunten per què una imatge es veu bé a l'administrador però alenteix la botiga. La mida de la imatge són les dimensions en píxels, amplada per alçada. La mida del fitxer és el pes del fitxer exportat en bytes al disc, normalment KB o MB, i canvia amb la compressió, el format i la profunditat de bits. Dues imatges poden compartir les mateixes dimensions i, tot i així, crear costos de càrrega molt diferents.

Un diagrama que compara la mida d'una imatge en píxels amb la mida d'un fitxer en bytes per a fotografia digital i gràfics.

Els píxels marquen el sostre

Els píxels defineixen la quantitat de detall visual que pot contenir el fitxer. Una imatge de 24 megapíxels a 24 bits RGB conté uns 72 milions de bytes de dades de píxels en brut, ja que 24 milions de píxels × 3 bytes per píxel = 72.000.000 bytes . Aquest nombre en brut és el punt de partida per a l'exportació, no el pes final que rep el navegador.

Les opcions d'exportació canvien el resultat ràpidament. La mateixa foto d'origen pot sortir al voltant de 423,41 KB com a JPEG amb una qualitat del 100% i aproximadament 211,7 KB amb una qualitat JPEG del 90%. Els píxels es mantenen iguals, mentre que l'exportació conserva més o menys el detall original.

La compressió i el format decideixen el resultat

Moltes auditories de Shopify no funcionen bé en aquest sentit. Els comerciants assumeixen que una imatge gran ha de ser massa pesada per a la web, però les dimensions i el pes del fitxer són decisions separades. Una imatge de grans dimensions encara pot ser un fitxer raonable si s'exporta bé. Un gràfic d'aspecte modest es pot inflar si es desa en el format incorrecte o amb la qualitat incorrecta.

Aquesta diferència és important segons el rol de la botiga. Un bàner principal pot tenir més pes visual que una miniatura, però una imatge de quadrícula de col·lecció encara ha de ser prou clara perquè la pàgina es carregui correctament. Les imatges de zoom del producte necessiten prou detall en píxels per mantenir-se de prop, mentre que els espais per a miniatures solen malgastar amplada de banda si l'exportació manté molts més detalls dels que pot mostrar el disseny.

Regla general: els píxels defineixen la quantitat de detall visual que pot mostrar la imatge. La mida del fitxer defineix quant ha de descarregar el comprador.

Mantingueu aquests dos números separats i la planificació d'imatges serà més fàcil. Un espai estret per a miniatures no es beneficia de dimensions sobredimensionades. Una imatge amb zoom de la pàgina del producte necessita prou píxels per tenir un aspecte nítid, però el fitxer exportat encara ha de mantenir-se raonable per a Core Web Vitals i per a la resta de la pàgina que s'ha de carregar al seu voltant.

Comparació de JPEG, PNG, WebP i AVIF

Cada format d'imatge té una finalitat diferent en una botiga física de Shopify. Una foto de producte, un logotip i una captura de pantalla necessiten un tractament diferent, fins i tot quan tenen el mateix tema. Trieu el format en funció de la funció que la imatge ha de fer a la pàgina, no per hàbit.

Una infografia que compara els formats d'imatge JPEG, PNG, WebP i AVIF amb descripcions de les seves característiques i casos d'ús.

JPEG i PNG encara es guanyen el seu lloc

El JPEG continua sent l'opció estàndard per a les fotografies. Es comprimeix bé, funciona gairebé a tot arreu i normalment manté les imatges del producte prou lleugeres per a la web. El PNG s'adapta a imatges que necessiten vores nítides, color pla, transparència o text, i per això els logotips i els gràfics de la interfície d'usuari sovint hi pertanyen, tot i que els fitxers solen ser més pesats.

Aquesta divisió és important a Shopify perquè les botigues solen barrejar els dos tipus de recursos. Una foto d'estil de vida desada com a PNG sol tenir més pes del que ha de suportar l'aparador. Un logotip desat com a JPEG pot semblar irregular o perdre transparència, cosa que crea una neteja evitable posterior. El format ha de seguir la feina, no l'hàbit.

Una targeta de col·lecció n'és un bon exemple. Si la imatge és una foto neta d'un producte, el JPEG normalment manté el pes baix sense perjudicar la vista que obtenen els compradors. Si l'element és una insígnia, una icona o un logotip situat sobre un fons de color, el PNG protegeix millor les vores i evita els halos lletjos.

Mides de fitxers push WebP i AVIF més baixes

Els formats moderns solen reduir encara més la mida dels fitxers. Per a una imatge d'exemple amb una qualitat comparable, JPEG al 75% és d'uns 1,25–1,53 MB , WebP amb pèrdua és d'uns 0,72–0,88 MB , AVIF és d'uns 0,57–0,69 MB i JPEG XL és d'uns 0,55–0,67 MB ( W3Techs ). Això és una disminució significativa respecte als hàbits d'exportació més antics i explica per què molts aparadors poden reduir el pes sense que les fotos semblin suaus.

El problema és que l'elecció del format encara depèn del contingut en si. WebP i AVIF poden funcionar molt bé per a la fotografia de productes, però els gràfics amb transparència poden comportar-se de manera diferent. Si un fitxer és principalment una fotografia, utilitzeu un format que comprimeixi aquest tipus d'imatge de manera eficient. Si és un logotip o un gràfic amb transparència, utilitzeu el format que mantingui les vores netes.

En una botiga física de Shopify, això normalment significa un format per al bàner principal, un altre per al logotip i un altre per a les fotos de primer pla del producte. L'elecció correcta no es basa tant en allò que sembla modern, sinó més aviat en allò que manté la pàgina ràpida i, alhora, mostra la imatge clarament a la seva ubicació real.

Regla de decisió: Per a fotografies amb persones, productes o textures, trieu JPEG o WebP. Per a gràfics plans, logotips o captures de pantalla, trieu PNG. Si el vostre flux de treball admet una alternativa, AVIF o WebP és l'opció de magatzem en directe més neta.

Com la resolució i la compressió canvien els números

Un fitxer pot quedar bé a la pantalla i, tanmateix, ser molt més pesat del que hauria de ser. Aquesta és la part que els comerciants senten primer a Shopify, perquè la mateixa imatge es pot comportar de manera molt diferent com un bàner principal, una quadrícula de col·lecció, una imatge de zoom d'un producte o una miniatura petita. La resolució controla quants píxels demanes al navegador que porti i la compressió controla quant d'aquest pes es retalla abans que es carregui la pàgina.

Més píxels signifiquen més dades

Una imatge més gran no és només un llenç més gran, sinó que són més dades en brut perquè el navegador les processi. Com s'ha mostrat anteriorment, una imatge de 24 MP conté uns 72 milions de bytes de dades en brut abans que comenci la compressió. Si exporteu la mateixa escena amb un nombre de píxels més alt que el que necessita la botiga, el fitxer esdevé més pesat encara que la foto sembli gairebé idèntica un cop es mostra.

És per això que les exportacions sobredimensionades causen més que desordre d'emmagatzematge. Afegeixen pes de transferència, fan que el navegador treballi més i poden alentir la imatge exactament on els compradors esperen que la pàgina sembli ràpida. Una quadrícula de col·lecció no necessita la mateixa càrrega útil que una imatge de producte ampliable, i una miniatura necessita molt menys que qualsevol de les dues.

La compressió t'estalvia diners, però no allibera píxels addicionals.

La compressió pot reduir un fitxer font gran a quelcom que Shopify pugui servir de manera eficient, però no elimina el cost d'utilitzar més píxels dels que requereix la ubicació. Si una foto de producte va a una galeria amb zoom activat, voldreu prou detall per mantenir-se nítid en una bona pantalla. Si la mateixa imatge només va a una targeta de col·lecció, enviar la versió a mida completa és un esforç inútil.

La manera clara de pensar-ho és senzilla. Els píxels marquen el límit del malbaratament , perquè les dimensions sobredimensionades creen un pes evitable. La configuració de qualitat estableix el límit d'estalvi , perquè decideix quant detall conserva l'exportació. El format controla quant ajuda aquesta compressió , perquè els diferents tipus de fitxer no es redueixen de la mateixa manera.

Per obtenir orientació sobre el dimensionament d'imatges vinculat als casos d'ús de Shopify, aquesta guia de SEO d'imatges de Shopify és un complement útil. Ajuda a connectar la decisió d'exportació amb la ubicació real en lloc de tractar totes les imatges de l'aparador com si fessin la mateixa funció.

Una imatge principal, una tessel·la de col·lecció i una miniatura requereixen diferents nivells de detall. Aquesta és la part que els comerciants solen passar per alt, i és per això que un petit canvi de resolució pot semblar inofensiu en un editor mentre que alhora crea un emmagatzematge més pesat al navegador.

Indicadors web essencials i el cost SEO de les imatges pesades

Les imatges pesades perjudiquen el SEO de manera molt directa, perquè Google mesura l'experiència, no la intenció que hi ha darrere de la càrrega. En moltes pàgines de Shopify, la imatge visible més gran és la que té més probabilitats de controlar l'experiència de càrrega. Si aquesta imatge és massa pesada, Largest Contentful Paint s'alenteix i el visitant espera més temps abans que la pàgina sembli utilitzable.

Un gràfic de barres que mostra com l'augment de la mida dels fitxers d'imatge afecta negativament els temps de càrrega de la pàgina Largest Contentful Paint.

Normalment, es culpa a LCP de la cosa equivocada

Els comerciants sovint culpen primer les aplicacions, els scripts o el codi del tema, i de vegades tenen raó. Però la imatge principal sovint és la victòria més fàcil. Una foto principal gran pot frenar el moment en què la pàgina esdevé significativa, especialment en dispositius mòbils, on la qualitat de la connexió varia i la finestra gràfica és prou petita com per detectar fàcilment els recursos massa grans.

L'altra mètrica que afecta el pes de la imatge és el canvi de disseny acumulat . Si el vostre tema no reserva espai correctament per a les imatges, el disseny salta a mesura que es carreguen els recursos. Això sembla descuidat per als compradors i fa que la pàgina sigui més difícil d'utilitzar. Els temes de Shopify sovint ja fan part d'aquesta feina, però no sempre és suficient per evitar que un comerciant tingui un flux de treball d'imatges deficient.

Els objectius de mida no són aleatoris

Les directrius tècniques per al lliurament web solen requerir fotos de productes d'entre 800 i 1000 px i de 80 a 150 KB , imatges heroiques de menys de 200 KB i un pressupost total d'imatges de pàgina inferior a 500 KB . Les mateixes directrius situen els JPEG sovint al voltant de 200 a 600 KB , WebP de 150 a 450 KB , AVIF de 80 a 300 KB i PNG de 500 KB a 3 MB ( Vizua ). Aquests intervals existeixen perquè el pes de la imatge i el rendiment de la pàgina estan relacionats.

Una pàgina no ha de ser artificialment petita per ser ràpida. Cal que sigui disciplinada. Si la càrrega de les imatges és excessiva, esteu fent que el navegador faci una feina que no millora l'experiència del comprador. Això és un cost directe de SEO, no teòric.

Per a un angle centrat en Shopify sobre el procés d'auditoria més ampli, aquesta guia de SEO d'imatges per a Shopify és un punt de referència útil.

Mides de fitxers d'imatge objectiu per ubicació a Shopify

La manera més fàcil de deixar d'endevinar és establir un pressupost de mida de fitxer per a cada funció visual a la botiga. Un bàner principal fa una funció diferent d'una miniatura, i una quadrícula de col·lecció no s'hauria d'exportar amb el mateix pes que una imatge de producte ampliable. Un cop els comerciants assignen mides de fitxer d'imatge a les ubicacions reals, la botiga és més fàcil de mantenir ràpidament i molt més fàcil d'auditar.

Deixa que el disseny de l'aparador dicti les teves opcions d'exportació

Les imatges d'amplada completa solen necessitar més espai que els blocs de disseny petits. El guia d'imatges responsiu normalment apunta a imatges d'amplada completa d'uns 1600 px i de 200 a 300 KB , imatges de disseny més petites del 25% al 50% més properes als 800 px i de 70 a 350 KB , i imatges amb una mida d'aproximadament el doble de l'espai de visualització perquè encara es vegin nítides en pantalles d'alta densitat. A la pràctica, això significa que la mateixa foto d'origen sovint necessita exportacions diferents, una per a l'espai que omple i una altra per a la renderització més nítida que espera una pantalla densa.

Objectius de mida de fitxer d'imatge per Shopify Placement Col·locació Amplada de l'objectiu Mida del fitxer objectiu Format recomanat
Bandera d'heroi Heroi de la part superior de la pàgina Uns 1600 píxels De 200 a 300 KB JPEG o WebP
Miniatura de la quadrícula de la col·lecció Rajoles de col·lecció Uns 400 a 600 px De 40 a 80 KB JPEG o WebP
Foto de la pàgina del producte Galeria principal de productes Uns 800 a 1200 px De 100 a 200 KB JPEG, WebP o AVIF
Imatge en miniatura o mostra Petita ranura de suport Uns 200 a 400 px Mantenir el més lleuger possible JPEG o PNG, segons el contingut

Una imatge principal pot tenir més pes perquè ocupa més espai a la finestra gràfica. Una tessel·la de col·lecció no. Aquesta és la diferència que els comerciants han de tenir en compte quan exporten imatges per a seccions de Shopify, perquè la mida del fitxer ha de coincidir amb l'espai que ocupa la imatge a la pàgina.

Per què la mateixa imatge pot necessitar més d'una exportació

Una pàgina de producte sovint serveix diverses versions del mateix fitxer mitjançant el marcatge responsiu. Això és normal. El navegador hauria d'obtenir un fitxer més petit per a pantalles més petites i un de més gran només on el disseny ho necessiti. Aquesta configuració manté intacta la qualitat del zoom sense enviar un volum innecessari a cada visitant.

La mateixa lògica s'aplica més enllà de la galeria de productes. Un aparador sovint necessita un tractament per al protagonista, un altre per a les targetes de col·lecció i un altre per a les imatges de detall en primer pla. Si voleu mantenir els recursos socials i de compartició alineats amb els visuals de l'aparador, aquesta guia d'imatges socials de Shopify us ajuda a connectar les necessitats externes a la pàgina del producte amb el mateix flux de treball d'imatges.

Regla general de Shopify: Deixa que l'espai decideixi l'exportació. Un heroi pot ser generós. Una miniatura de quadrícula no, no.

Aquesta regla evita l'error comú de penjar una imatge gegant i esperar que el tema ho solucioni. Els temes poden ajudar, però no poden desfer una mala decisió d'exportació.

Idees errònies comunes que mantenen les botigues lentes

Moltes botigues Shopify lentes són lentes perquè algú es creia una regla mig certa i la repetia. Aquests hàbits apareixen a les auditories una vegada i una altra, normalment perquè el consell semblava sensat al principi i mai es va comprovar amb la manera com es carrega una botiga. Un cop separes l'hàbit del rendiment, les solucions solen ser senzilles.

Cinc creences que causen inflor evitable

  • Una resolució més alta sempre significa millor qualitat. Això deixa de ser cert quan la imatge ja és més gran que l'espai que ocupa. Els píxels addicionals no afavoreixen la vista del comprador, només afegeixen pes.
  • El format PNG sempre és més nítid que el JPEG. El format PNG és l'opció adequada per a logotips i gràfics amb vores marcades, però les fotos de productes normalment no necessiten aquesta sobrecàrrega sense pèrdues.
  • Shopify ho optimitza tot automàticament. Shopify ajuda en alguns casos, però la càrrega original encara estableix el límit de pes que pot tenir l'actiu.
  • El WebP perjudica el SEO perquè Google no el pot llegir. Aquesta creença està desfasada. Els sistemes de cerca poden renderitzar formats moderns com ara imatges normals.
  • La mida de la imatge només importa a l'ordinador. Els compradors des de mòbils senten primer el pes innecessari dels fitxers, perquè els seus dispositius i connexions tenen menys marge d'error.

Els comerciants de correccions poden utilitzar immediatament

La solució comença amb el rol, no amb l'hàbit. Una imatge estrella necessita prou qualitat per ocupar la part superior de la pàgina. Una tessel·la de col·lecció ha de mantenir-se lleugera perquè la quadrícula es carregui correctament. Una imatge ampliada pot contenir més detalls perquè serveix per a una tasca diferent, mentre que una miniatura o una mostra han de mantenir-se tan petites com ho permeti el disseny.

És per això que una regla d'exportació per a cada imatge causa problemes. Si el recurs és una foto, exporteu-lo per obtenir velocitat i un color creïble. Si és un gràfic amb text o transparència, protegiu les vores i accepteu que el fitxer pot ser més gran. Si pertany a un espai estret, no pengeu un fitxer pensat per a la visualització a amplada completa.

Com s'ha comentat a la secció de resolució, una imatge de 24MP pot ocupar entre 2 i 8 MB després de la compressió, cosa que és suficient per demostrar per què el recompte de píxels per si sol no indica si una imatge està preparada per a la web. La qüestió central és si el fitxer coincideix amb la ubicació de Shopify que serveix. Un heroi pot tolerar més que una targeta de quadrícula i una imatge de zoom pot tolerar més que una miniatura. L'exportació ha d'ajustar-se a la funció.

Un error relacionat és assumir que tots els recursos mereixen la mateixa neteja de metadades. Si la imatge és prou important per destacar-la, és prou important per auditar-la primer. Utilitzeu el generador de text alternatiu per a imatges de Shopify per mantenir aquesta part del flux de treball coherent i, a continuació, avalueu la mida del fitxer en funció de l'espai que omplirà.

Aquesta és la part que la majoria de botigues passen per alt. No cal que el fitxer sigui petit. Ha de ser apropiat.

Una llista de comprovació repetible per al vostre proper lot d'imatges

El flux de treball d'imatges més net és el que el vostre equip pot repetir sense endevinar. Cada vegada que les mateixes comprovacions es produeixen en el mateix ordre, obtindreu menys càrregues sobredimensionades, menys sorpreses de disseny i menys pàgines de productes lentes amagades al catàleg. Si esteu preparant el llançament d'un nou producte o actualitzant un tema, executeu el lot a través d'aquesta rutina abans que res es publiqui.

Una rutina d'exportació senzilla que s'adapta a Shopify

  1. Exporta a l'amplada de destinació per a la ubicació. Una imatge principal, una targeta de col·lecció, una imatge de zoom del producte i una miniatura tenen tasques diferents, així que no pengeu un fitxer més gran només perquè la imatge d'origen ho permeti.
  2. Trieu el format per funció. Les fotos normalment s'adapten a JPEG, WebP o AVIF. Els logotips i els gràfics amb molt de text s'adapten millor al format PNG quan la transparència o les vores nítides són importants.
  3. Desa una versió de la botiga en directe i una versió amb zoom si cal. El fitxer de zoom pot contenir més detalls, però la pàgina visible no hauria de tenir aquest pes tret que el disseny realment ho necessiti.
  4. Serviu el format modern més lleuger sempre que sigui possible. Feu servir WebP o AVIF per a la imatge en directe i manteniu JPEG com a alternativa quan la compatibilitat sigui important.
  5. Revisa les metadades i el text alternatiu de la imatge abans de publicar-lo. Si l'actiu és prou important per destacar-lo, és prou important per auditar-lo. Fes servir el generador de text alternatiu de RankEngine per mantenir aquesta part del flux de treball coherent.

Captura de pantalla de https://rankengine.app

Què et compra la constància

Les petites millores s'acumulen en un catàleg. Una imatge principal més lleugera no transformarà una botiga per si sola, però un conjunt complet de fotos de productes, mosaics de col·leccions i miniatures ben dimensionades poden fer que l'aparador sembli més net, més ràpid i més fàcil de comprar. Els clients ho noten fins i tot si mai parlen de la mida dels fitxers.

Si el vostre equip gestiona les metadades d'imatges a escala, el generador de text alternatiu de RankEngine pot mantenir aquesta part del flux de treball en moviment sense convertir cada càrrega en una tasca manual.

Aplica aquesta rutina al teu proper lot i la teva botiga es carregarà més ràpidament immediatament.