Como otimizar suas imagens para a web móvel

Quando se trata de escolher tipos de arquivo e dimensões para suas imagens, lembre-se de qualidade, tempo de carregamento da página, capacidade de zoom e requisitos de mercado, especialmente se você estiver vendendo em várias plataformas. Vamos dar uma olhada na otimização de imagens para a web e como escolher seu tipo de arquivo, mantendo o celular em mente para melhorar a experiência do usuário.

Escolhendo as Dimensões Certas da Imagem

É vital encontrar um equilíbrio entre imagens grandes o suficiente para que os usuários possam ampliar e aquelas com um tamanho ideal para que não ocupem muito espaço e diminuam o tempo de carregamento da página. Na Shopify, você pode fazer upload de imagens de até 4472 x 4472 pixels com um tamanho de arquivo de até 20 MB. Mas o construtor de sites normalmente recomenda o uso de 2048 x 2048 pixels para fotos quadradas de produtos. São imagens de alta resolução que dão à sua loja uma aparência profissional e completa com ótimos recursos de zoom. Lembre-se de que, para que a funcionalidade de zoom funcione, suas imagens precisam ter mais de 800 x 800 pixels.

Da mesma forma, Amazon e Etsy têm um requisito de imagem de 1000 x 1000 pixels para habilitar o zoom.

Para manter uma aparência uniforme ao longo de sua linha de produtos e em suas páginas de coleção, você deve manter a mesma proporção de largura e altura de todas as suas imagens de recursos, digamos, quadrada. Sua imagem de destaque é a primeira imagem de um produto que aparecerá em sua loja – na página inicial, na página do carrinho, na página de checkout e em várias páginas de coleção. Mantenha todas as suas miniaturas também do mesmo tamanho e formato para transmitir uma aparência de loja elegante. Lembre-se de que muitos de seus clientes também estarão navegando em dispositivos móveis e imagens quadradas são mais fáceis de reposicionar para telas menores.

Escolhendo o formato de imagem correto

Vamos dar uma olhada nos formatos de arquivo mais usados ​​na fotografia de produtos e o que cada um deles traz para a mesa. Eles estão listados aqui pela frequência com que são usados ​​na fotografia de produtos.

JPG

JPG é o formato de arquivo de imagem digital mais comum. É amplamente suportado e possui um tamanho de arquivo pequeno com uma boa gama de cores. Sua compactação permite que você encontre um equilíbrio entre o tamanho do arquivo e a qualidade da imagem. Shopify recomenda o JPG, em particular, porque pode fornecer imagens com tamanho relativamente pequeno e boa qualidade, o que funciona bem para fotos de produtos.

PNG

PNG foi criado para melhorar o formato GIF removendo sua limitação de 256 cores. É amplamente aceito, sem perdas (reduz o tamanho do arquivo sem reduzir a qualidade) e suporta transparência (digamos, para fundos transparentes). As desvantagens são que os tamanhos dos arquivos PNG podem ser grandes devido à compactação sem perdas e o formato não é tão universalmente compatível quanto o JPG.

GIF

GIF oferece tamanho de arquivo pequeno comprimindo e reduzindo imagens para 256 cores. Embora tenha sido amplamente substituído pelo PNG, ainda é usado para animação, pois é o único formato que o suporta e é universalmente reconhecido pelos navegadores.

TIFF

TIFF é um formato de compressão sem perdas que é amplamente suportado por uma variedade de aplicativos de edição e web. Oferece resolução de alta qualidade e várias imagens e páginas podem ser convenientemente salvas em um único arquivo. No entanto, o tamanho do arquivo tende a ser grande.

BMP

O BMP é comumente usado no ecossistema do Windows. Ele suporta compressão de dados, canais alfa (usados ​​no Photoshop para armazenar informações adicionais que você pode usar para manipular partes da imagem, como adicionar fundos transparentes) e compatibilidade quase universal. Não compactado, oferece imagens perfeitas, mas os tamanhos dos arquivos também podem ser muito grandes.

No geral, o JPG é certamente o mais conveniente quando se trata de combinar tamanho menor com qualidade decente. Embora o PNG ofereça uma compactação sem perdas de maior qualidade, isso ocorre com o alto custo de um tamanho de arquivo maior. O GIF é útil se você estiver oferecendo fotos em 360 graus e quiser arquivos leves. BMP e TIFF, em comparação, podem oferecer grande qualidade, mas os tamanhos de vida são geralmente bastante pesados ​​e impraticáveis.

Dimensionamento de imagens para celular

A Shopify redimensiona automaticamente suas imagens para caber em telas menores, mas algumas imagens às vezes podem exigir edição manual. Lembre-se de que as telas de desktop e de celular não são apenas de tamanhos diferentes, mas também têm orientação oposta. E enquanto Shopify tenta acomodar isso com cortes suaves, será melhor se suas imagens forem quadradas e seu produto estiver centralizado vertical e horizontalmente.

Além disso, imagens com resoluções muito grandes, como o máximo de 4.000 x 4.000 pixels da Shopify, podem ficar desfocadas quando redimensionadas para dispositivos móveis. Portanto, reduzir sua imagem para um tamanho e forma mais gerenciáveis ​​que mantenham a mobilidade em mente pode ajudar sua loja a ter uma aparência melhor em todos os dispositivos. Lembre-se de que arquivos grandes também diminuem o tempo de carregamento do seu site. E no comércio eletrônico, e especialmente no mobile, cada segundo importa, então otimizar suas imagens deve ser uma prioridade.

Portanto, embora a compactação sem perdas possa fornecer a imagem da mais alta qualidade, ela geralmente cria arquivos grandes que demoram uma eternidade para carregar (especialmente em massa) e podem diminuir o tempo de carregamento da página, fazendo com que os visitantes abandonem sua loja. Isso é especialmente verdadeiro em dispositivos móveis, onde as velocidades da Internet podem ser mais lentas e esperar que uma imagem finalmente apareça frustra os compradores.

Embora os designs e algoritmos responsivos da Shopify sejam bons para redimensionar e exibir suas imagens em vários dispositivos, dar-lhes uma mão com tamanhos de arquivo inteligentes pode significar uma experiência de compra ainda mais suave.

Sobre o autor

Holly Cardew é a fundadora da Pixc, uma plataforma para ajudar as lojas de comércio eletrônico a editar e otimizar suas fotos de produtos para que possam aumentar as vendas. O Pixc transforma imagens de produtos comuns em lindas, editando e removendo o plano de fundo em 24 horas. Começando como uma adolescente, vendendo no eBay e criando seu próprio mercado online, Holly tem experiência em comércio eletrônico, marketing online, design gráfico e construção de equipes distribuídas. Ela também tem experiência na construção e administração de lojas Shopify e no crescimento de grandes seguidores nas mídias sociais. Em 2016, Holly foi incluída na lista 30 under 30 da Forbes de varejo e comércio eletrônico. Holly divide seu tempo entre São Francisco, Brisbane e Sydney. Quando Holly não está trabalhando, ela adora viajar, explorar novos lugares, belo design, tipografia e ter novas ideias de negócios.