Optimización de imágenes para comercio electrónico con TinyJPG

Contenido del curso

Fundamentos de SEO e-commerce

Arquitectura web para un e-commerce

Factores técnicos para el contenido

Factores de SEO On-page e-commerce

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:54

Optimización de imágenes para comercio electrónico con TinyJPG

Curso de Técnicas SEO para E-Commerce

Clase 17 de 19

Clase 17 / 19

Recursos

A otimização de imagens é um dos fatores que mais impacto tem num e-commerce, tanto na experiência do utilizador como no posicionamento orgânico. Se gere uma loja online em Shopify, WordPress ou qualquer outra plataforma, dominar peso, formato, texto alternativo e nomenclatura faz a diferença entre um site lento e um site que o Google adora.

Qual é o peso ideal de uma imagem num e-commerce?

O peso é o ponto de partida porque afeta diretamente a velocidade de carregamento da loja [01:00].

Menos de 120 KB: estado ótimo, o melhor cenário possível.
Entre 120 e 180 KB: estado bom, ainda dentro do recomendado.
Entre 180 e 300 KB: começa a entrar em terreno problemático.
Acima de 300 ou 400 KB: demasiado pesado, prejudica a experiência.

Quanto deve pesar uma imagem para web? O ideal é menos de 120 KB. Entre 120 e 180 KB ainda é aceitável, mas acima de 300 KB já compromete a velocidade do site.

Que tamanho em píxeis devo usar nas fotos de produto?

Nunca uses imagens diretamente como saem da câmara do smartphone. Reduz sempre antes de carregar. A recomendação prática, baseada em experiência, é simples [01:45]:

Fotos horizontais: 1650 píxeis de largura.
Fotos verticais: 1450 píxeis de altura.

Esta medida não é um padrão oficial, mas funciona bem na maioria dos casos e ajuda a baixar o peso antes mesmo de comprimir.

Que formato de imagem usar: JPG, PNG ou WebP?

O formato influencia diretamente o peso final do ficheiro [02:50]. E aqui há regras claras conforme o tipo de imagem.

JPG: ideal para fotografias de produto, é o formato mais comum em e-commerce.
PNG: reservado para vetores, ícones, desenhos com cores planas ou quando precisas de transparências.
WebP: o formato mais recente, muito versátil e com excelente otimização de peso. É a melhor escolha quando a plataforma suporta.

Qual é o melhor formato de imagem para SEO? O WebP oferece a melhor relação entre qualidade e peso. Para produtos, o JPG continua a ser uma escolha sólida; o PNG só quando precisas de transparências.

Como escrever texto alternativo e nomear imagens corretamente?

Depois de tratar peso e formato, entra a parte que o Google realmente lê: o texto alternativo e o nome do ficheiro [03:40].

Como escrever um bom alt text?

O texto alternativo é lido tanto por algoritmos como por leitores de ecrã usados por pessoas cegas. A melhor dica é fingires que estás a descrever a imagem a alguém que não a consegue ver.

Num exemplo prático com um casaco feminino Nano Puff [04:50]:

Imagem do produto em cinzento: "casaco feminino Nano Puff cinzento".
Mesmo casaco em azul: "casaco feminino Nano Puff azul".
Vista de costas: "casaco feminino Nano Puff, vista traseira".
Detalhe do fecho: "casaco feminino Nano Puff, vista detalhada do fecho".
Característica funcional: "casaco feminino Nano Puff resistente à água".

Como nomear ficheiros e URLs de imagens?

Usa hífens no meio das palavras, nunca espaços nem caracteres especiais, e nunca hífens no início. O Google interpreta o hífen no meio como espaço, tanto em nomes de imagens como em URLs. Isto aplica-se igualmente aos slugs das páginas de produto.

Como comprimir imagens com TinyJPG sem perder qualidade?

Depois de exportar a imagem no tamanho certo, falta o passo final: a compressão [03:10]. A ferramenta recomendada é o TinyJPG, que aceita JPG, PNG e WebP, e reduz o peso sem perda visível de qualidade.

No exercício prático mostrado [06:30]:

Uma imagem de 442 KB foi reduzida para 322 KB.
Outra imagem de 206,9 KB ficou em 100,42 KB.

Ao comparar a versão original com a comprimida lado a lado, não se nota perda de qualidade. Ganhas peso, ganhas velocidade e os utilizadores agradecem.

O TinyJPG estraga a qualidade da imagem? Não. Comprime de forma inteligente e mantém a qualidade visual praticamente idêntica, reduzindo o peso em 30% a 50% na maioria dos casos.

Por que a otimização de imagens influencia o posicionamento no Google?

O Google usa os nomes dos ficheiros e os textos alternativos para duas coisas ao mesmo tempo: posicionar essas imagens na pesquisa de imagens e reforçar o posicionamento da própria URL onde estão alojadas [08:10]. Ou seja, cada imagem bem otimizada trabalha duas vezes a teu favor.

O fluxo recomendado para cada imagem que sobe à loja é sempre o mesmo: redimensionar para 1650 ou 1450 píxeis, escolher JPG ou WebP, passar pelo TinyJPG, nomear com hífens e adicionar um alt text descritivo.

Qual destes passos costumas saltar quando carregas imagens na tua loja? Conta nos comentários.

Gabriel Giana

Hace 5 años

Aparte de optimizar el peso de las imágenes, desde mi experiencia es importante que todos los productos tengan las mismas dimensiones. Por ejemplo, cuando vemos los productos en catalogo, si descargamos las imágenes desde internet en distintos sitios, pueden ser dimensionadas de forma distinta y esto generaría un ruido visual en nuestra web. Para esto lo que hago es pasar todas las imágenes por Photoshop, definiendo guías para los márgenes, y allí uso como template mi PSD y voy colocando las imágenes del sitio para darles el mismo formateo a todas. Cuando exporto las imágenes lo hago desde la opción de "exportar para web" y las imágenes ya salen muy bien comprimidas, lo que me ahorra el proceso de utilizar herramientas como tiny. Este proceso que les comento es muy sencillo en photoshop, solo se trata de dimensionar las imágenes. ++Les dejo un mini tutorial:++

Entramos a photoshop
Creamos un nuevo archivo de las dimensiones que queramos (Yo utilizo 1200x1200 px)
Dejamos el fondo blanco
Desde la carpeta donde tengamos las imágenes, arrastramos a nuestro lienzo en photoshop
Generalmente queda seleccionado el elemento, asique solo debemos darle a la opción "transformar" (atajo = control + t) o desde filtros - transformar
Ajustamos el tamaño al que nos parezca el indicado (yo prefiero que ocupe lo mayor posible pero dejando un poco de márgenes, aprox 50px)
Una vez que tengamos la imagen como nos gusta, ya podemos exportar yendo a archivo - exportar - Guardar para web…) y allí ya pueden ver la configuración para guardarlo y el peso que va a tener, elegimos donde queremos guardarla y listo!
Ya que nos gusto ese tamaño, vamos a la solapa de vista - y allí activamos las reglas, se verán unas reglas en el borde superior y lateral izquierdo, desde allí haciendo clic podemos sacar guías para acomodarlas en nuestro lienzo, sacamos dos desde el lateral y dos desde la parte superior y las dejamos justo donde limita nuestra imagen, para poder tener un encuadre parejo.
Guardamos como PSD y siempre que vayamos a subir nuevos productos, las pasamos por este proceso y las tendremos a todas formateadas de la misma manera :) Espero que el aporte ayude, recomiendo mucho saber utilizar un poquito photoshop para poder mejorar las imágenes de nuestras webs!

Daniela Lopez Pineda

Hace 5 años

Gracias por tu explicación, lo necesitaba urgente :)

Ricardo Abril

Hace 4 años

Muchisimas gracias por tu aporte.

Comentarios (15)15 comentarios

Jostin Cedillo

Andrés Vega

Manuel Armas

Carlos Casilimas Olivar

Alejandro Escobar

Claudio Othón Ortiz Mata

Virginia Sanz

Hace 3 años

Jeferson Manuel Martínez Marroquín

Luis Vidal

Maria Paulina Garces

Mayra Lopez

Jason Arias

Elias Gaete Ledesma

Alejandro Gonzalez

Profesor

Juan Diego Palomino

Alexis Carballo Ozuna

Romer Salazar

Jonnathan Alexander Acevedo Cabrera

Fundamentos de SEO e-commerce

SEO para ecommerce sin pagar por clic

SEO en e-commerce: por qué Google importa

Mitos y pilares reales del SEO

Qué es el search intent en SEO

Cómo leer el search intent en Google

Arquitectura web para un e-commerce

Cómo categorizar un ecommerce correctamente

Categorización de Palabras Clave para eCommerce en México

Mapeo de Palabras Clave para Categorías y Productos en E-commerce

Factores técnicos para el contenido

Optimización de Contenido para Tiendas en Línea

Contenido duplicado en fichas de producto

Productos sin inventario en auditorías SEO

robots.txt para ecommerce: qué bloquear

URLs SEO friendly para tu ecommerce

Factores de SEO On-page e-commerce

Títulos SEO y meta descriptions que generan clics

Cómo escribir títulos SEO con SERP Simulator

Optimización de Títulos H1 para SEO en Comercio Electrónico

Optimización de imágenes para comercio electrónico con TinyJPG

Contenido SEO que supera a tu competencia

Cómo escalar el SEO de tu tienda online

Optimización de imágenes para comercio electrónico con TinyJPG

Progreso del curso

Fundamentos de SEO e-commerce

Arquitectura web para un e-commerce

Factores técnicos para el contenido

Factores de SEO On-page e-commerce

Recursos

Recursos