Olá, turma! 👋 Sejam muito bem-vindos à nossa Aula 80 do curso “Loja Shopify do Zero ao Avançado”!

Chegamos a um ponto crucial onde vamos aprofundar nossos conhecimentos em otimização. Vocês já construíram uma base sólida, configuraram produtos, coleções, temas e integraram muitas funcionalidades. Agora é hora de refinar e polir a nossa loja para garantir que ela não apenas funcione bem, mas voe! 🚀

Nesta aula, vamos mergulhar no mundo da otimização de imagens e compressão inteligente. Um tema que pode parecer técnico, mas que é absolutamente vital para a velocidade da sua loja, ranqueamento no Google, experiência do usuário e, consequentemente, suas vendas!

—

Aula 80 – Loja Shopify do Zero ao Avançado: Otimização de imagens e compressão inteligente

📚 O que você vai aprender nesta aula

Nesta aula super importante, você vai descobrir como as imagens afetam a performance da sua loja e como transformá-las em aliadas da velocidade e do SEO. Especificamente, vamos cobrir:

• A importância crítica da otimização de imagens: Entender por que imagens otimizadas são um pilar para a velocidade da loja, SEO e experiência do usuário (UX).
• Métricas de Performance: Conectar a otimização de imagens com as Core Web Vitals, especialmente o Largest Contentful Paint (LCP).
• Formatos de imagem modernos: Desvendar JPG, PNG, GIF, SVG e os revolucionários WebP e AVIF, sabendo quando e como usar cada um.
• Tamanho e Dimensões vs. Tamanho do Arquivo: Compreender a diferença e a importância de ambos.
• Imagens Responsivas e o Shopify: Como o Shopify ajuda a entregar a imagem certa para cada dispositivo e como podemos aprimorar isso.
• Lazy Loading: O que é, seus benefícios e como garantir que suas imagens carreguem de forma inteligente.
• Técnicas de Compressão Inteligente: Diferenças entre compressão com perdas (lossy) e sem perdas (lossless) e como aplicá-las.
• Ferramentas e Aplicativos: Conhecer e utilizar recursos online e apps do Shopify para automatizar e facilitar a otimização.
• Boas Práticas de SEO para Imagens: Nome de arquivo, texto alternativo (alt text) e seu impacto no ranqueamento.

—

🔗 Conectando com aulas anteriores

Lembram-se de quando falamos sobre SEO básico (lá pelas Aulas 40-50) e a importância da velocidade do site para o ranqueamento no Google? E quando abordamos a personalização de temas (Aulas 60-70), onde manipulamos seções e blocos que frequentemente exibem muitas imagens? Pois bem, esta aula é a continuação natural e um aprofundamento de tudo isso!

A otimização de imagens é um dos fatores mais impactantes para a velocidade de carregamento da sua loja, diretamente ligada às métricas de Core Web Vitals (que exploramos brevemente na aula de SEO). Um site lento afeta a experiência do usuário (UX), aumenta a taxa de rejeição e prejudica a conversão. Nossas imagens, se não forem otimizadas, podem ser as maiores vilãs da performance! 📉

Já aprendemos a criar uma loja funcional e esteticamente agradável. Agora, vamos garantir que ela seja também rápida e eficiente, usando nossos conhecimentos de HTML e CSS para entender melhor como as imagens são renderizadas e otimizadas.

—

📖 Conteúdo Principal

Apresentem-se à realidade: as imagens geralmente representam a maior parte do peso de uma página da web. Uma página bonita, cheia de fotos de produtos em alta resolução, pode se tornar um pesadelo de lentidão se as imagens não forem tratadas com carinho. Vamos mudar isso!

1. Por que Otimizar Imagens? A Crucialidade da Performance

A otimização de imagens não é apenas “legal de fazer”, é obrigatória para qualquer e-commerce de sucesso.

• Velocidade do Site: Imagens pesadas aumentam o tempo de carregamento da página. Sites lentos afundam nas buscas e frustram os visitantes.
• Experiência do Usuário (UX): Ninguém gosta de esperar. Um site rápido proporciona uma experiência fluida, mantendo o usuário engajado e reduzindo a taxa de rejeição.
• SEO (Search Engine Optimization): O Google prioriza sites rápidos. A velocidade é um fator de ranqueamento direto, especialmente com as Core Web Vitals.
• Largest Contentful Paint (LCP): Esta métrica mede o tempo que leva para o maior elemento de conteúdo visível (muitas vezes uma imagem de banner ou de produto) carregar na tela. Imagens grandes e não otimizadas são o principal fator para um LCP ruim.
• Taxa de Conversão: Estudos mostram que cada segundo adicional no tempo de carregamento pode diminuir sua conversão em até 7%. Clientes potenciais simplesmente desistem e vão para a concorrência.
• Economia de Banda: Para o seu servidor e para o usuário (especialmente em conexões móveis), arquivos menores significam menos dados transferidos.

2. Formatos de Imagem: Escolha a Ferramenta Certa para o Trabalho

A escolha do formato de imagem correto é o primeiro passo para a otimização.

• JPEG (ou JPG):
• Melhor para: Fotografias complexas, imagens com muitas cores e gradientes.
• Características: Usa compressão com perdas (lossy), o que significa que alguns dados são descartados para reduzir o tamanho do arquivo. Você pode controlar o nível de compressão.
• Quando usar: Imagens de produtos, banners fotográficos, fotos de blog.
• PNG:
• Melhor para: Imagens com transparência, logotipos, ícones, screenshots, gráficos com texto.
• Características: Usa compressão sem perdas (lossless), o que significa que a qualidade da imagem é mantida. Arquivos geralmente maiores que JPG para fotos.
• Quando usar: Imagens com fundo transparente (ex: logo da loja), gráficos, ícones.
• GIF:
• Melhor para: Animações curtas e simples.
• Características: Suporta transparência e animação. Paleta de cores limitada (256 cores).
• Quando usar: Pequenas animações, memes. Para vídeos mais longos, é melhor usar arquivos de vídeo (MP4, WebM).
• SVG (Scalable Vector Graphics):
• Melhor para: Ícones, logos, ilustrações vetoriais, gráficos que precisam escalar em qualquer tamanho sem perda de qualidade.
• Características: Baseado em XML, são gráficos vetoriais. Tamanho de arquivo extremamente pequeno e escalável.
• Quando usar: Ícones do menu, ícones de redes sociais, logotipos simples. O Shopify geralmente não permite upload direto de SVG por questões de segurança no admin, mas você pode incorporá-los via Liquid/HTML.
• WebP: (Nosso favorito para a maioria dos casos!)
• Melhor para: Praticamente tudo! É um formato moderno desenvolvido pelo Google.
• Características: Suporta compressão com perdas e sem perdas, além de transparência. Oferece uma redução significativa no tamanho do arquivo (25-35% menor que JPG/PNG para a mesma qualidade).
• Quando usar: A maioria das imagens de produto, banners, ilustrações. É o padrão de fato para performance na web. O Shopify converte automaticamente imagens carregadas para WebP e entrega este formato para navegadores compatíveis!
• AVIF:
• Melhor para: Ainda mais compressão! É um formato ainda mais novo, baseado no codec AV1.
• Características: Oferece compressão ainda maior que WebP com qualidade similar ou superior. No entanto, o suporte do navegador ainda está crescendo.

Quando usar: Futuramente será o padrão. Por enquanto, é gerado por algumas ferramentas de otimização, mas a entrega deve ser feita com fallback* para WebP ou JPG/PNG.

3. Tamanho e Dimensões vs. Tamanho do Arquivo

É crucial entender a diferença:

• Dimensões (largura x altura em pixels): Refere-se às dimensões físicas da imagem. Uma imagem de 4000×3000 pixels é muito grande para ser exibida como miniatura de 200x200px.
• Tamanho do Arquivo (KB ou MB): Refere-se ao peso da imagem em bytes. É isso que afeta o tempo de carregamento.

Regra de Ouro: Suas imagens devem ter as dimensões aproximadas das maiores dimensões em que serão exibidas na sua loja. Não carregue uma imagem de 4000px de largura se ela só será exibida, no máximo, com 1200px. O Shopify faz um trabalho excelente nisso (veremos a seguir), mas o arquivo original ainda importa!

4. Imagens Responsivas e o Poder do Shopify

O Shopify já faz um trabalho espetacular ao lidar com imagens responsivas nativamente. Quando você faz upload de uma imagem, o Shopify a processa e gera diversas versões em diferentes tamanhos.

Isso é feito através do filtro img_url do Liquid e do atributo srcset no HTML.

• srcset: Permite que o navegador escolha a imagem mais adequada com base na resolução da tela e no tamanho da viewport.
• sizes: Informa ao navegador qual é o tamanho da imagem em diferentes breakpoints CSS, ajudando-o a tomar uma decisão mais informada sobre qual imagem do srcset carregar.

Como o Shopify faz isso no seu tema (geralmente):

src="{{ product.featured_image | img_url: 'medium' }}"
srcset="
{{ product.featured_image | img_url: 'small' }} 480w,
{{ product.featured_image | img_url: 'medium' }} 768w,
{{ product.featured_image | img_url: 'large' }} 1024w,
{{ product.featured_image | img_url: 'master' }} 1200w
"
sizes="(max-width: 768px) 100vw, 50vw"
alt="{{ product.featured_image.alt }}"
width="{{ product.featured_image.width }}"
height="{{ product.featured_image.height }}"
loading="lazy"
>

O que você precisa garantir:

1. Imagens de alta qualidade: Otimize o arquivo original antes de subir.

2. Dimensões máximas sensatas: Se a imagem maior no seu tema for de 1200px, não suba uma de 4000px, a não ser que haja um zoom muito específico. O Shopify vai gerar as menores, mas o arquivo original ainda será pesado.

3. Temas modernos: A maioria dos temas atuais do Shopify já usa srcset e sizes de forma eficaz. Se você estiver usando um tema muito antigo, pode precisar verificar e adaptar.

4. Atributo alt preenchido: Essencial para SEO e acessibilidade.

5. Lazy Loading: Carregamento Preguiçoso e Inteligente

O que é? Lazy Loading (carregamento preguiçoso) é uma técnica que atrasa o carregamento de imagens (e outros recursos) até que elas sejam realmente necessárias, ou seja, quando o usuário rola a página e elas entram na viewport.

Benefícios:

• Reduz o tempo de carregamento inicial da página.
• Economiza banda, pois apenas as imagens visíveis são carregadas.
• Melhora as Core Web Vitals, especialmente o LCP e FID (First Input Delay).

Como funciona no Shopify:

A maioria dos temas modernos do Shopify já implementa loading="lazy" nas tags por padrão.

html

Se o seu tema não tiver, você pode adicionar este atributo manualmente no seu código Liquid.

6. Compressão Inteligente: Lossy vs. Lossless

Depois de escolher o formato e as dimensões, a compressão é o próximo passo.

• Compressão com Perdas (Lossy):
• Remove permanentemente alguns dados da imagem, o que resulta em um arquivo menor, mas com uma pequena (e muitas vezes imperceptível) perda de qualidade.
• Melhor para: JPG e WebP (quando usados para fotos). Você pode ajustar o nível de compressão.
• Exemplo: Reduzir a qualidade de 100% para 70-80% geralmente resulta em grande economia de tamanho com pouca perda visual.
• Compressão Sem Perdas (Lossless):
• Reduz o tamanho do arquivo sem descartar nenhum dado, mantendo a qualidade original da imagem intacta.
• Melhor para: PNG, GIF, SVG e WebP (neste modo). Geralmente otimiza a forma como os dados são armazenados.

Dica de Ouro: Busque um equilíbrio. Seu objetivo é o menor tamanho de arquivo possível, mantendo uma qualidade visual que seja aceitável para seus produtos e sua marca. Ninguém quer ver fotos pixeladas!

7. Otimização Manual vs. Automatizada (Aplicativos)

Você tem duas abordagens principais:

• Otimização Manual (Recomendado para o original):
• Antes de fazer o upload para o Shopify, otimize suas imagens usando um software de edição de imagem (Photoshop, GIMP) ou ferramentas online (TinyPNG, Squoosh).

Vantagem: Controle total sobre a qualidade e compressão. Garante que o arquivo original* que o Shopify usa para gerar suas variações já é otimizado.

• Desvantagem: Requer tempo e disciplina para cada imagem.
• Otimização Automatizada (Aplicativos Shopify):
• Existem diversos apps na Shopify App Store que automatizam a compressão de imagens, convertem para WebP, adicionam lazy loading, e até otimizam para SEO (alt text).
• Vantagem: Praticidade, otimiza imagens existentes e novas automaticamente.
• Desvantagem: Pode ter custo mensal, pode aplicar compressão demais se não configurado corretamente.

Combinação de Ambos: A melhor estratégia é otimizar suas imagens manualmente antes de enviá-las para o Shopify para garantir a melhor qualidade inicial, e então usar um aplicativo para manter a otimização contínua e garantir a entrega de formatos modernos como WebP.

8. Impacto no SEO: Além da Velocidade

A otimização de imagens não é apenas sobre velocidade. Ela também ajuda diretamente no SEO:

• Nomes de Arquivo Descritivos: Use nomes de arquivo relevantes com palavras-chave, separados por hífens (ex: camiseta-branca-algodao-organico.jpg em vez de IMG_12345.jpg).
• Texto Alternativo (Alt Text): Descreva a imagem de forma concisa e com palavras-chave relevantes. Isso ajuda os motores de busca a entender o conteúdo da imagem (e da página) e é crucial para acessibilidade (leitores de tela para deficientes visuais).
• Exemplo: alt="Camiseta branca de algodão orgânico com estampa de folha verde"
• Sitemaps de Imagem: O Shopify geralmente cuida disso, mas é bom saber que motores de busca também indexam sitemaps específicos para imagens.

—

💻 Exemplos Práticos

Vamos colocar a mão na massa!

Exemplo 1: Otimizando Imagens Antes do Upload (Ferramentas Online)

Vamos usar o TinyPNG (ou TinyJPG) para otimizar uma imagem antes de enviá-la ao Shopify.

1. Escolha uma imagem: Pegue uma imagem de produto que você usaria na sua loja. De preferência, uma com mais de 1MB.

2. Acesse o TinyPNG/TinyJPG: Vá para tinypng.com ou tinyjpg.com.

3. Faça o upload: Arraste e solte sua imagem na área indicada.

4. Compare os resultados: O TinyPNG/TinyJPG irá compactar sua imagem e mostrar a economia percentual. Baixe a versão otimizada.

• Screenshot exemplo (simulado):
• !Screenshot TinyPNG otimizando imagem

Simulação: “Sua imagem foi reduzida em 70%! De 1.2MB para 360KB.”*

Agora, essa imagem otimizada é a que você deve subir para o Shopify!

Exemplo 2: Upload de Imagens e Configuração de Alt Text no Shopify Admin

1. Vá para o Admin da Shopify:

• No menu lateral, clique em Produtos.
• Selecione um produto existente ou crie um novo.

2. Faça o upload da imagem otimizada:

• Na seção Mídia, clique em Adicionar arquivo e selecione a imagem que você otimizou com o TinyPNG.

3. Adicione o Texto Alternativo (Alt Text):

• Após o upload, clique na imagem que você acabou de carregar.
• No pop-up, você verá um campo para Adicionar texto alternativo. Preencha com uma descrição detalhada e palavras-chave relevantes.
• Screenshot:
• !Screenshot Shopify Alt Text

Exemplo de Alt Text: “Jaqueta de couro masculina preta, estilo biker, em cenário urbano.”*

• Clique em Concluído.

4. Salve o produto.

Exemplo 3: Inspecionando Imagens no Frontend com Ferramentas do Desenvolvedor

Vamos verificar como o Shopify está servindo as imagens em seu tema.

1. Abra sua loja Shopify: Navegue até uma página de produto ou coleção com muitas imagens.

2. Abra as Ferramentas do Desenvolvedor:

• No Chrome/Firefox: Clique com o botão direito na página e selecione Inspecionar ou use Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac).

3. Inspecione uma imagem:

• Na aba Elements (ou Inspetor), use a ferramenta de seleção de elemento (geralmente um ícone de seta) e clique em uma imagem na sua página.
• Você verá o código HTML da tag . Procure pelos atributos srcset, sizes e loading="lazy".
• Screenshot exemplo (simulado):
• !Screenshot Ferramentas Dev Imagem

Repare nos atributos srcset, sizes e loading="lazy".*

4. Verifique o formato da imagem:

• Na aba Network (ou Rede), filtre por “Img” (Imagens).
• Recarregue a página (com a aba Network aberta).
• Você verá uma lista de todas as imagens carregadas. Clique em uma delas. No painel de detalhes, você verá o tipo (ex: image/webp), o tamanho do arquivo e as dimensões. Isso confirmará se o Shopify está entregando WebP e quais dimensões foram servidas.

Exemplo 4: Usando o Filtro img_url do Liquid para Otimização Adicional (Opcional)

Em alguns casos, você pode precisar de um controle mais específico sobre como uma imagem é exibida.

Suponha que você tenha uma imagem de banner grande, mas em uma seção específica, você só precisa de uma versão menor e de baixa qualidade para um preview rápido.

{% assign main_image = product.featured_image %}
{% comment %} Imagem principal do produto com srcset e lazy loading padrão {% endcomment %}


src="{{ main_image | img_url: 'medium', format: 'webp' }}"
srcset="
{{ main_image | img_url: 'small', format: 'webp' }} 480w,
{{ main_image | img_url: 'medium', format: 'webp' }} 768w,
{{ main_image | img_url: 'large', format: 'webp' }} 1024w,
{{ main_image | img_url: 'master', format: 'webp' }} 1200w
"
sizes="(max-width: 768px) 100vw, 33vw"
alt="{{ main_image.alt }}"
width="{{ main_image.width }}"
height="{{ main_image.height }}"
loading="lazy"
>

{% comment %} Exemplo de um thumbnail super pequeno e mais comprimido (com crop para garantir proporção) {% endcomment %}


src="{{ main_image | img_url: 'pico', format: 'webp', crop: 'center', quality: 50 }}"
alt="Miniatura de {{ main_image.alt }}"
width="48"
height="48"
>

Neste exemplo:

• Usamos format: 'webp' para garantir que estamos pedindo explicitamente o formato WebP, embora o Shopify já tente fazer isso.
• No thumbnail, usamos 'pico' (um tamanho muito pequeno do Shopify), crop: 'center' para cortar a imagem do centro, e quality: 50 para forçar uma compressão maior, mesmo que isso possa resultar em uma qualidade um pouco inferior para um elemento tão pequeno.

Exemplo 5: Sugestões de Apps de Otimização de Imagens (Shopify App Store)

Se você quer automatizar o processo, considere estes apps (alguns gratuitos para um certo limite, outros pagos):

• Crush.pics: Um dos mais populares. Otimiza, renomeia, adiciona alt text automaticamente.
• Image Optimizer & SEO by Hextom: Otimização, WebP, lazy loading, e recursos de SEO para imagens.
• TinyIMG Image Optimizer: Baseado na tecnologia TinyPNG/TinyJPG, com otimização automática e recursos SEO.
• Plug in SEO (Pro Version): Embora seja um app de SEO, a versão Pro oferece otimização de imagens.

Escolha um app que se encaixe no seu orçamento e nas suas necessidades. Faça um teste, monitore a velocidade da sua loja antes e depois usando o Google PageSpeed Insights!

—

🎯 Exercícios e Desafios

Hora de praticar tudo o que aprendemos!

1. Auditoria Visual de Imagens:

• Navegue por sua loja de teste (ou loja real, com cuidado!). Identifique 5-10 imagens que você acha que podem estar muito pesadas ou não estão com a melhor qualidade. Preste atenção em banners, imagens de produtos e fundos.

2. Otimização Manual e Comparação:

• Baixe as 5-10 imagens identificadas no desafio anterior.
• Use o TinyPNG/TinyJPG ou Squoosh.app (squoosh.app) para otimizá-las manualmente. Experimente diferentes níveis de compressão (se a ferramenta permitir) para encontrar um equilíbrio entre tamanho e qualidade.
• Compare o tamanho do arquivo original com o tamanho do arquivo otimizado. Qual foi a economia percentual média?
• Suba as imagens otimizadas para um produto de teste no Shopify e verifique se a qualidade visual é aceitável.

3. Verificação de Atributos no Tema:

• Usando as Ferramentas do Desenvolvedor (como fizemos no Exemplo 3), inspecione as imagens da sua loja.
• Verifique se as tags possuem os atributos srcset, sizes e loading="lazy".
• Desafio Extra: Se loading="lazy" não estiver presente, encontre um arquivo Liquid relevante (como product-card.liquid ou image.liquid dentro da pasta snippets ou sections do seu tema) e adicione manualmente loading="lazy" à tag . (Lembre-se de fazer isso em um tema duplicado!).

4. Configuração de Alt Text:

• Escolha 3-5 produtos da sua loja. Vá no admin do Shopify, edite cada imagem e adicione um texto alternativo (alt text) descritivo e otimizado para SEO, usando palavras-chave relevantes.

5. Instalação e Teste de um App de Otimização (Opcional, mas Recomendado):

• Vá até a Shopify App Store e pesquise por “Image Optimizer”.
• Instale um dos aplicativos com bom ranqueamento e plano gratuito (ou de teste).
• Siga as instruções para configurá-lo.
• Após a otimização pelo app, use o Google PageSpeed Insights (pagespeed.web.dev) para testar a performance da sua loja antes e depois. Anote os resultados!

—

📝 Resumo da Aula

Ufa! Que aula intensa e cheia de informações valiosas! Cobrimos muito terreno e agora você sabe que a otimização de imagens não é um luxo, mas uma necessidade.

Os principais pontos que aprendemos hoje são:

• Velocidade é Conversão: Imagens otimizadas são cruciais para um site rápido, o que melhora a experiência do usuário, o SEO (especialmente LCP) e, em última instância, as vendas.
• Escolha o Formato Certo: JPG para fotos, PNG para transparência e WebP como o formato moderno e preferencial para a maioria dos casos.
• Dimensões Importam: Carregue imagens com dimensões próximas ao seu tamanho máximo de exibição.
• Shopify Ajuda Muito: O Shopify gera automaticamente imagens responsivas com srcset e sizes, e geralmente implementa lazy loading.
• Compressão Inteligente: Use compressão com perdas (lossy) para fotos e sem perdas (lossless) para gráficos. Busque o equilíbrio entre tamanho e qualidade.
• Otimização Híbrida: Combine otimização manual (pré-upload) com apps automatizados para melhores resultados.
• SEO para Imagens: Nunca esqueça de nomes de arquivo descritivos e, principalmente, do texto alternativo (alt text).

Com estas técnicas, você tem o poder de tornar sua loja não só bonita, mas incrivelmente rápida e eficiente!

—

🚀 Preparação para próxima aula

Na próxima aula, vamos aprofundar ainda mais na performance da sua loja. Sairemos do universo das imagens para explorar a Otimização de Código e Arquivos Estáticos (CSS/JS). Aprenderemos sobre minificação, concatenação, remoção de código não utilizado e como o uso de CDNs (Content Delivery Networks) pode acelerar ainda mais o carregamento dos recursos da sua loja.

Prepare-se para outra aula cheia de dicas práticas para deixar sua loja voando! 💨

—

📚 Recursos Adicionais

• Documentação Shopify – Imagens:
• Tipos de arquivo de mídia e imagens
• Melhores práticas para imagens de produtos
• Filtro Liquid img_url
• Ferramentas Online de Otimização:
• TinyPNG / TinyJPG – Excelente para compressão simples e eficaz.
• Squoosh.app – Ferramenta avançada do Google para experimentar diferentes formatos e níveis de compressão.
• Google PageSpeed Insights:
• pagespeed.web.dev – Ferramenta essencial para testar a performance da sua loja e identificar oportunidades de otimização.
• Web.dev – Otimização de Imagens:
• Otimizar suas imagens – Um guia completo do Google sobre o tema.
• Artigo sobre Core Web Vitals:
• Entendendo as Core Web Vitals – Para revisar a importância do LCP.

—

Até a próxima aula, pessoal! Mantenham o bom trabalho e continuem otimizando! Professor J.A. um abraço! 👋