Probablemente xa che pasou isto. Unha páxina de produto ten un aspecto pulido en Shopify, as fotos son nítidas no editor e, a continuación, os visitantes móbiles comezan a rebotar mentres que a túa puntuación de PageSpeed se mantén teimosamente nos sesenta. O problema non adoita ser un "mal deseño". É que os tamaños dos ficheiros de imaxe son demasiado pesados para o deseño e cada byte adicional ten que percorrer antes de que un comprador vexa o produto, o prezo ou o botón de engadir ao carriño.

É por iso que as decisións sobre a imaxe nun escaparate nunca son só decisións de deseño. Afectan á velocidade da páxina , á calidade visual e á cantidade da páxina que Google pode rastrexar e renderizar con suficiente rapidez como para que importe. Se queres un atallo práctico para cambiar o tamaño sen ter que adiviñar, a guía de cambio de tamaño de imaxes de Yassine Malti é un complemento útil, porque che axuda a comprender os mecanismos antes de cargar o seguinte lote.

Índice

Por que importan os tamaños dos ficheiros de imaxe nunha tenda Shopify

Un comerciante pode ver unha páxina de produto pulida no panel de administración de Shopify e seguir sen atopar o problema subxacente. A páxina pode parecer correcta nun portátil con wifi, logo atascarse no móbil, a imaxe principal aparecer tarde e o comprador desprazarse máis alá do pregamento antes de que a páxina pareza lista. Esa brecha entre unha páxina que ten bo aspecto e unha que carga rápido é onde os tamaños dos ficheiros de imaxe deciden se unha visita se converte en ingresos ou en fricción.

A competencia oculta en cada páxina

Cada imaxe nun escaparate compite co texto, os guións, os esquemas e a paciencia do cliente. Se a foto principal ten un tamaño excesivo, fai máis que consumir ancho de banda, senón que ralentiza o momento no que o visitante pode xulgar a oferta. O peso da imaxe é unha pregunta de conversión e unha pregunta sobre os datos vitais da web ao mesmo tempo.

Os comerciantes de Shopify adoitan notar isto primeiro nas páxinas de produtos e nas páxinas de coleccións. Unhas poucas fotos grandes poden facer que todo o deseño pareza pesado, especialmente nas redes móbiles, e ese peso aparece nos lugares que máis importan, a imaxe principal, a grella da colección, o zoom do produto e as miniaturas. Unha imaxe principal ten unha función diferente á dunha miniatura, polo que non debería ter a mesma carga de tamaño de ficheiro. O mesmo ocorre coas grellas das coleccións, onde as imaxes repetidas se acumulan rapidamente e castigan cada desprazamento.

O tamaño do ficheiro de imaxe tamén afecta á rapidez coa que a páxina se volve utilizable, razón pola cal debe incluírse na mesma conversa que a planificación do deseño. As dimensións brutas da imaxe importan, pero o tamaño do ficheiro entregable é o que o navegador ten que obter e descodificar. Como se explica na guía de cambio de tamaño de imaxes de Yassine Malti , unha exportación máis pequena pode preservar o papel visual da imaxe á vez que elimina o peso innecesario.

A recompensa práctica

A razón pola que isto importa é sinxela. A conta de píxeles subxacente establece a liña base, e a compresión e o formato deciden o tamaño final do ficheiro. Unha imaxe de 24 megapíxeles a 24 bits RGB contén uns 72 millóns de bytes de datos de píxeles en bruto, mentres que a mesma imaxe pode chegar a uns 423,41 KB como JPEG con calidade do 100 % ou aproximadamente 211,7 KB con calidade JPEG do 90 %, dependendo das opcións de exportación ( Scantips ). Esa diferenza é a razón pola que dúas tendas poden usar imaxes que parecen case idénticas e aínda así obter resultados de velocidade moi diferentes.

Regra práctica: se unha imaxe importa máis para vender que para decorar, asigna un tamaño de ficheiro obxectivo antes de subila.

Ese é o estándar que deberían usar os comerciantes. Estableza un orzamento para cada espazo na tenda e, a continuación, adapte o ficheiro ao traballo. Un banner principal pode xustificar máis peso que unha miniatura, pero ningún dos dous debería obrigar ao resto da páxina a levar carga adicional. Unha vez que se establece ese hábito, as páxinas de produtos son máis fáciles de xestionar e cada nova carga ten un lugar para encaixar en lugar de converterse noutro lastre oculto.

Tamaño da imaxe fronte ao tamaño do ficheiro e por que ambos importan

Os comerciantes adoitan usar estes termos coma se significasen o mesmo e logo pregúntanse por que unha imaxe ten bo aspecto na administración pero ralentiza o escaparate. O tamaño da imaxe son as dimensións en píxeles, ancho por alto. O tamaño do ficheiro é o peso do ficheiro exportado en bytes no disco, normalmente KB ou MB, e cambia coa compresión, o formato e a profundidade de bits. Dúas imaxes poden compartir as mesmas dimensións e aínda así crear custos de carga moi diferentes.

Un diagrama que compara o tamaño da imaxe en píxeles co tamaño do ficheiro en bytes para fotografía e gráficos dixitais.

Os píxeles marcan o teito

Os píxeles definen canto detalle visual pode conter o ficheiro. Unha imaxe de 24 megapíxeles a 24 bits RGB contén uns 72 millóns de bytes de datos de píxeles en bruto porque 24 millóns de píxeles × 3 bytes por píxel = 72 000 000 bytes . Ese número en bruto é o punto de partida para a exportación, non o peso final que recibe o navegador.

As opcións de exportación cambian o resultado rapidamente. A mesma foto orixinal pode saír duns 423,41 KB como JPEG con calidade do 100 % e aproximadamente 211,7 KB con calidade JPEG do 90 %. Os píxeles permanecen iguais, mentres que a exportación conserva máis ou menos os detalles orixinais.

A compresión e o formato deciden o resultado

Moitas auditorías de Shopify fallan neste aspecto. Os comerciantes asumen que unha imaxe grande debe ser demasiado pesada para a web, pero as dimensións e o peso do ficheiro son decisións separadas. Unha imaxe de gran dimensión aínda pode ser un ficheiro razoable se se exporta ben. Un gráfico de aspecto modesto pode incharse se se garda no formato incorrecto ou coa calidade incorrecta.

Esa diferenza importa segundo o rol da tenda. Un banner principal pode ter máis peso visual que unha miniatura, pero unha imaxe de cuadrícula de colección aínda debe manterse o suficientemente clara para que a páxina se cargue con limpeza. As fotos con zoom de produtos necesitan suficiente detalle en píxeles para manterse de preto, mentres que os espazos para miniaturas adoitan desperdiciar ancho de banda se a exportación mantén moitos máis detalles dos que pode mostrar o deseño.

Regra xeral: os píxeles definen canto detalle visual pode mostrar a imaxe. O tamaño do ficheiro define canto ten que descargar o comprador.

Manteña eses dous números separados e a planificación da imaxe será máis doada. Un espazo estreito para miniaturas non se beneficia das dimensións sobredimensionadas. Unha imaxe ampliada da páxina dun produto necesita píxeles dabondo para ter un aspecto nítido, pero o ficheiro exportado aínda ten que manterse razoable para Core Web Vitals e para o resto da páxina que ten que cargar ao seu redor.

Comparación de JPEG, PNG, WebP e AVIF

Cada formato de imaxe serve para un propósito diferente nun escaparate de Shopify. Unha foto dun produto, un logotipo e unha captura de pantalla necesitan un tratamento diferente, mesmo cando están no mesmo tema. Escolle o formato en función da función que a imaxe ten que desempeñar na páxina, non polo costume.

Unha infografía que compara os formatos de imaxe JPEG, PNG, WebP e AVIF con descricións das súas características e casos de uso.

JPEG e PNG aínda gañan o seu lugar

JPEG segue a ser a opción estándar para as fotografías. Comprímese ben, funciona en case todas partes e normalmente mantén as imaxes dos produtos o suficientemente lixeiras para a web. PNG axústase a imaxes que precisan bordos nítidos, cores planas, transparencia ou texto, razón pola cal os logotipos e os gráficos da interface de usuario adoitan pertencer a ese formato, aínda que os ficheiros adoitan ser máis pesados.

Esa división importa en Shopify porque as tendas adoitan mesturar ambos tipos de recursos. Unha foto de estilo de vida gardada como PNG adoita ter máis peso do que o escaparate necesita soportar. Un logotipo gardado como JPEG pode ter un aspecto tosco ou perder transparencia, o que crea unha limpeza evitable posterior. O formato debe seguir o traballo, non o hábito.

Unha tarxeta de colección é un bo exemplo. Se a imaxe é unha foto limpa dun produto, o JPEG adoita manter o peso baixo sen prexudicar a vista que obteñen os compradores. Se o recurso é unha insignia, unha icona ou un logotipo sobre un fondo de cor, o PNG protexe mellor os bordos e evita os halos feos.

Tamaños de ficheiros push WebP e AVIF máis baixos

Os formatos modernos adoitan reducir aínda máis o tamaño dos ficheiros. Para unha imaxe de exemplo con calidade comparable, JPEG ao 75 % ten uns 1,25–1,53 MB , WebP con perda ten uns 0,72–0,88 MB , AVIF ten uns 0,57–0,69 MB e JPEG XL ten uns 0,55–0,67 MB ( W3Techs ). Isto supón unha caída significativa con respecto aos hábitos de exportación máis antigos e explica por que moitos escaparates poden reducir o peso sen que as fotos parezan suaves.

O problema é que a escolla do formato aínda depende do propio contido. WebP e AVIF poden funcionar moi ben para a fotografía de produtos, pero os gráficos con transparencia poden comportarse de forma diferente. Se un ficheiro é principalmente unha fotografía, usa un formato que comprima ese tipo de imaxe de forma eficiente. Se é un logotipo ou un gráfico con transparencia, usa o formato que manteña os bordos limpos.

Nun escaparate de Shopify, iso normalmente significa un formato para o banner principal, outro para o logotipo e outro para as fotos en primeiro plano dos produtos. A elección correcta ten menos que ver co que parece moderno e máis co que mantén a páxina rápida sen deixar de mostrar a imaxe claramente na súa posición real.

Regra de decisión: Fotografía con persoas, produtos ou texturas: escolle JPEG ou WebP. Gráficos planos, logotipos ou capturas de pantalla: escolle PNG. Se o teu fluxo de traballo admite unha alternativa, AVIF ou WebP é a opción de almacenamento en directo máis limpa.

Como a resolución e a compresión cambian os números

Un ficheiro pode ter un bo aspecto na pantalla e aínda así ser moito máis pesado do necesario. Esa é a parte que os comerciantes senten primeiro en Shopify, porque a mesma imaxe pode comportarse de forma moi diferente como un banner principal, unha tesela de cuadrícula de colección, unha imaxe ampliada dun produto ou unha pequena miniatura. A resolución controla cantos píxeles lle pides ao navegador que leve e a compresión controla canto dese peso se recorta antes de que se cargue a páxina.

Máis píxeles significan máis datos

Unha imaxe máis grande non é só unha pantalla máis grande, senón que son máis datos brutos para que o navegador os procese. Como se mostrou anteriormente, unha imaxe de 24 MP contén uns 72 millóns de bytes de datos brutos antes de que comece a compresión. Se exportas a mesma escena cun número de píxeles maior que o que necesita a tenda, o ficheiro faise máis pesado mesmo se a foto parece case idéntica unha vez que se mostra.

É por iso que as exportacións de tamaño excesivo causan algo máis que desorde de almacenamento. Engaden peso de transferencia, fan que o navegador traballe máis e poden ralentizar a imaxe no lugar exacto onde os compradores esperan que a páxina pareza rápida. Un mosaico de cuadrícula de colección non necesita a mesma carga útil que unha imaxe de produto ampliable e unha miniatura necesita moito menos que calquera delas.

A compresión aforra cartos, pero non libera píxeles adicionais

A compresión pode reducir un ficheiro fonte grande a algo que Shopify poida ofrecer de forma eficiente, pero non elimina o custo de usar máis píxeles dos que require a colocación. Se unha foto dun produto vai nunha galería con zoom, necesitarás suficiente detalle para que se manteña nítido nunha boa pantalla. Se a mesma imaxe só vai nunha tarxeta de colección, enviar a versión a tamaño completo é un esforzo en balde.

Unha forma clara de pensalo é sinxela. Os píxeles marcan o límite do desperdicio , porque as dimensións sobredimensionadas crean un peso evitable. A configuración de calidade define o límite de aforro , porque decide canto detalle conserva a exportación. O formato controla canto axuda esa compresión , porque os diferentes tipos de ficheiro non se reducen do mesmo xeito.

Para obter orientación sobre o tamaño das imaxes relacionada cos casos de uso de Shopify, esta guía de SEO de imaxes de Shopify é un complemento útil. Axuda a conectar a decisión de exportación coa colocación real en lugar de tratar cada imaxe do escaparate como se servise para a mesma función.

Unha imaxe principal, unha tesela de colección e unha miniatura requiren diferentes niveis de detalle. Esa é a parte que os comerciantes adoitan pasar por alto, e é por iso que un pequeno cambio na resolución pode parecer inofensivo nun editor mentres crea unha tenda máis pesada no navegador.

Valores vitais web básicos e o custo SEO das imaxes pesadas

As imaxes pesadas prexudican o SEO dun xeito moi directo, porque Google mide a experiencia, non a intención que hai detrás da carga. En moitas páxinas de Shopify, a imaxe visible máis grande é o que ten máis probabilidades de controlar a experiencia de carga. Se esa imaxe é demasiado pesada, Largest Contentful Paint ralentiza e o visitante agarda máis tempo antes de que a páxina pareza utilizable.

Un gráfico de barras que mostra como o aumento do tamaño dos ficheiros de imaxe afecta negativamente aos tempos de carga da páxina Largest Contentful Paint.

Normalmente, a culpa de LCP é incorrecta.

Os comerciantes adoitan culpar primeiro ás aplicacións, aos scripts ou ao código do tema, e ás veces teñen razón. Pero a imaxe principal adoita ser a vitoria máis doada. Unha foto principal grande pode frear o momento en que a páxina cobra sentido, especialmente en móbiles, onde a calidade da conexión varía e a ventá gráfica é o suficientemente pequena como para que os recursos demasiado grandes sexan fáciles de detectar.

A outra métrica na que afecta o peso da imaxe é o Desprazamento Acumulado do Disposición . Se o teu tema non reserva espazo correctamente para as imaxes, a disposición salta a medida que se cargan os recursos. Isto resulta descoidado para os compradores e fai que a páxina sexa máis difícil de usar. Os temas de Shopify adoitan facer parte deste traballo xa, pero non sempre o suficiente como para evitar que un comerciante teña un fluxo de traballo de imaxes deficiente.

Os obxectivos de tamaño non son aleatorios

A orientación técnica para a entrega web adoita requirir fotos de produtos de arredor de 800 a 1000 px e de 80 a 150 KB , imaxes principais de menos de 200 KB e un orzamento total de imaxes de páxina inferior a 500 KB . A mesma orientación sitúa os JPEG a miúdo arredor de 200 a 600 KB , WebP de 150 a 450 KB , AVIF de 80 a 300 KB e PNG de 500 KB a 3 MB ( Vizua ). Estes rangos existen porque o peso da imaxe e o rendemento da páxina están relacionados.

Unha páxina non precisa ser artificialmente pequena para ser rápida. Si que precisa ser disciplinada. Se a carga da imaxe é excesiva, estás a facer que o navegador faga un traballo que non mellora a experiencia do comprador. Trátase dun custo directo de SEO, non teórico.

Para unha perspectiva centrada en Shopify sobre o proceso de auditoría máis amplo, esta guía de SEO de imaxes para Shopify é un punto de referencia útil.

Tamaños de ficheiro de imaxe obxectivo por colocación en Shopify

A maneira máis sinxela de deixar de adiviñar é establecer un orzamento de tamaño de ficheiro para cada función visual na tenda. Un banner principal fai unha función diferente dunha miniatura e unha grella de colección non se debe exportar co mesmo peso que unha imaxe de produto ampliable. Unha vez que os comerciantes asignan tamaños de ficheiro de imaxe ás colocacións reais, a tenda é máis fácil de manter rapidamente e moito máis fácil de auditar.

Deixa que o deseño da tenda dite as túas opcións de exportación

As imaxes de ancho completo adoitan precisar máis espazo que os bloques de deseño pequenos. A guía de imaxes adaptable adoita apuntar a imaxes de ancho completo duns 1600 px e de 200 a 300 KB , imaxes de deseño máis pequenas do 25 % ao 50 % máis próximas aos 800 px e de 70 a 350 KB e imaxes cun tamaño aproximado ao dobre do espazo de visualización para que sigan tendo un aspecto nítido en pantallas de alta densidade. Na práctica, iso significa que a mesma foto de orixe adoita precisar diferentes exportacións, unha para o espazo que enche e outra para a renderización máis nítida que espera unha pantalla densa.

Tamaño obxectivo dos ficheiros de imaxe por colocación en Shopify Colocación Largura do obxectivo Tamaño do ficheiro de destino Formato recomendado
Estandarte de heroe Heroe da parte superior da páxina Uns 1600 píxeles De 200 a 300 KB JPEG ou WebP
Miniatura da grella da colección Azulexos de colección Aproximadamente de 400 a 600 píxeles De 40 a 80 KB JPEG ou WebP
Foto da páxina do produto Galería principal de produtos Aproximadamente de 800 a 1200 píxeles De 100 a 200 KB JPEG, WebP ou AVIF
Imaxe en miniatura ou mostra Ranura de apoio pequena Aproximadamente de 200 a 400 píxeles Manter o máis lixeiro posible JPEG ou PNG, dependendo do contido

Unha imaxe principal pode ter máis peso porque ocupa máis espazo na ventá gráfica. Unha tesela de colección non. Esa é a diferenza que os comerciantes deben ter en conta ao exportar imaxes para as seccións de Shopify, porque o tamaño do ficheiro debe coincidir co espazo que ocupa a imaxe na páxina.

Por que a mesma imaxe pode precisar máis dunha exportación

Unha páxina de produto adoita ofrecer varias versións do mesmo ficheiro mediante etiquetaxe adaptable. Iso é normal. O navegador debería obter un ficheiro máis pequeno para pantallas máis pequenas e un máis grande só onde o deseño o precise. Esa configuración mantén intacta a calidade do zoom sen enviar un volume innecesario a cada visitante.

A mesma lóxica aplícase máis alá da galería de produtos. Un escaparate adoita precisar dun tratamento para o protagonista, outro para as tarxetas de colección e outro para as imaxes de detalles en primeiro plano. Se queres manter os recursos sociais e de compartición aliñados cos elementos visuais do escaparate, esta guía de imaxes sociais de Shopify axuda a conectar as necesidades externas á páxina do produto co mesmo fluxo de traballo de imaxes.

Regra xeral de Shopify: Deixa que a franxa horaria decida a exportación. Un heroe pode ser xeneroso. Unha miniatura de cuadrícula non.

Esa regra evita o erro común de subir unha imaxe xigante e esperar que o tema o solucione. Os temas poden axudar, pero non poden desfacer unha mala decisión de exportación.

Ideas erróneas comúns que manteñen as tendas lentas

Moitas tendas Shopify lentas son lentas porque alguén cría nunha regra medio certa e a repetín unha e outra vez. Eses hábitos aparecen nas auditorías unha e outra vez, normalmente porque o consello parecía sensato ao principio e nunca se comprobou coa forma en que se carga unha tenda. Unha vez que se separa o hábito do rendemento, as solucións adoitan ser sinxelas.

Cinco crenzas que causan inchazo evitable

  • Unha resolución máis alta sempre significa mellor calidade. Iso deixa de ser certo unha vez que a imaxe xa é máis grande que o espazo que ocupa. Os píxeles adicionais non fan nada pola vista do comprador, só engaden peso.
  • O formato PNG sempre é máis nítido que o JPEG. O PNG é a opción correcta para logotipos e gráficos con bordos definidos, pero as fotos de produtos non adoitan precisar esa sobrecarga sen perdas.
  • Shopify optimiza todo automaticamente. Shopify axuda nalgúns casos, pero a carga orixinal aínda establece o límite de peso que pode ter o recurso.
  • A WebP prexudica o SEO porque Google non pode lela. Esa crenza está desfasada. Os sistemas de busca poden renderizar formatos modernos como imaxes normais.
  • O tamaño da imaxe só importa no escritorio. As persoas que compran por móbil senten primeiro o peso innecesario dos ficheiros, porque os seus dispositivos e conexións teñen menos marxe de erro.

Os comerciantes de correccións poden usar inmediatamente

A solución comeza co rol, non co hábito. Unha imaxe principal necesita calidade suficiente para ocupar a parte superior da páxina. Un mosaico de colección debe manterse lixeiro para que a grella se cargue con facilidade. Unha imaxe ampliada pode conter máis detalles porque serve para unha función diferente, mentres que unha miniatura ou unha mostra deben manterse tan pequenas como o permita o deseño.

É por iso que unha regra de exportación para cada imaxe causa problemas. Se o recurso é unha foto, expórtao para maior velocidade e cores cribles. Se é un gráfico con texto ou transparencia, protexe os bordos e acepta que o ficheiro pode ser máis grande. Se pertence a unha ranura estreita, non cargues un ficheiro pensado para mostrarse a ancho completo.

Como se explicou na sección de resolución, unha imaxe de 24 MP pode ocupar entre 2 e 8 MB despois da compresión, o que abonda para demostrar por que o número de píxeles por si só non indica se unha imaxe está lista para a web. A cuestión central é se o ficheiro coincide coa colocación de Shopify que serve. Un heroe pode tolerar máis que unha tarxeta de cuadrícula e unha imaxe ampliada pode tolerar máis que unha miniatura. A exportación ten que axustarse á función.

Un erro relacionado é asumir que todos os recursos merecen a mesma limpeza de metadatos. Se a imaxe é o suficientemente importante como para destacala, é o suficientemente importante como para auditala primeiro. Usa o xerador de texto alternativo para imaxes de Shopify para manter esa parte do fluxo de traballo coherente e, a continuación, avalía o tamaño do ficheiro en función do espazo que ocupará.

Esa é a parte que a maioría das tendas pasan por alto. O ficheiro non precisa ser pequeno. Ten que ser axeitado.

Unha lista de verificación repetible para o teu seguinte lote de imaxes

O fluxo de traballo de imaxes máis limpo é aquel que o teu equipo pode repetir sen ter que adiviñar. Cada vez que se realizan as mesmas comprobacións na mesma orde, terás menos cargas de tamaño excesivo, menos sorpresas no deseño e menos páxinas de produtos lentas agochadas no catálogo. Se estás a preparar o lanzamento dun novo produto ou a actualizar un tema, executa o lote a través desta rutina antes de que nada se publique.

Unha rutina de exportación sinxela que se adapta a Shopify

  1. Exportar ao ancho de destino para a colocación. Un elemento principal, unha tarxeta de colección, unha imaxe ampliada do produto e unha miniatura teñen funcións diferentes, polo que non cargues un ficheiro máis grande só porque a imaxe de orixe o permita.
  2. Escolle o formato por función. As fotos adoitan ser JPEG, WebP ou AVIF. Os logotipos e os gráficos con moito texto adáptanse mellor a PNG cando importa a transparencia ou os bordos nítidos.
  3. Garda unha versión da tenda en liña e unha versión con zoom se é necesario. O ficheiro con zoom pode conter máis detalles, pero a páxina visible non debería ter ese peso a non ser que o deseño realmente o precise.
  4. Sempre que sexa posible, use o formato moderno e máis lixeiro. Empregue WebP ou AVIF para a imaxe en directo e manteña JPEG como alternativa onde a compatibilidade sexa importante.
  5. Revisa os metadatos da imaxe e o texto alternativo antes de publicalo. Se o recurso é o suficientemente importante como para destacalo, é o suficientemente importante como para auditalo. Usa o xerador de texto alternativo de RankEngine para manter esa parte do fluxo de traballo coherente.

Captura de pantalla de https://rankengine.app

Que consistencia che compra

As pequenas melloras acumúlanse nun catálogo. Unha imaxe principal máis lixeira non transformará unha tenda por si soa, pero un conxunto completo de fotos de produtos, mosaicos de coleccións e miniaturas ben dimensionadas pode facer que o escaparate pareza máis limpo, rápido e doado de mercar. Os clientes nótanse mesmo se nunca falan do tamaño dos ficheiros.

Se o teu equipo xestiona os metadatos das imaxes a escala, o xerador de texto alternativo de RankEngine pode manter esa parte do fluxo de traballo en movemento sen converter cada subida nunha tarefa manual.

Aplica esta rutina ao teu seguinte lote e a túa tenda cargarase máis rápido de inmediato.