Background

BLOG PIXELZ

Receba insigths em pós producão de imagens, fotografias de produto, melhores práticas em imagens para eCommerce

O Relatório Pixelz de Imagem de Produto: O que 7 Milhões de Imagens Editadas Podem lhe Ensinar [Infográficos]


Main Image
Você sempre quis saber como a maioria das imagens de produto são, na realidade? Já esteve curioso para saber se há algo como um padrão?
Bem, nós temos. Nós acreditamos nisso. E por isso, porque temos dados de mais de vinte mil clientes e sete milhões de imagens de produtos editados, decidimos encontrar essas respostas e compartilhá-las com você.

Aqui Está o Que Aprendemos

Nós preparamos os detalhes mais importantes em um infográfico bem prático. Para uma análise mais detalhada, incluindo a interpretação: “o que isso significa para mim?”, prossiga a leitura.

Product image infographic showing industry standards and best practices for background, alignment, filetype, dimensions, and more

Qual é a Cara Dessa Imagem?

Cada imagem tem um tipo de arquivo, tamanho, margem e do fundo. Depois de olhar para as imagens de que temos dados, encontramos:

  • 75% das imagens emitidas são JPG
  • 76% tem fundo branco
  • 79% são alinhadas de forma central e verticalmente
  • 1000px é a largura mais comum
  • 750px é a altura mais comum
  • 25px de cada lado é a margem mais comum

Quer ver isso na vida real? Aqui está um exemplo utilizando as especificações mais comuns:

Model in black jumper walking in studio

Antes da Pós-produção

After post-production by most common specs.

Depois da Pós-produção com as mais comuns especificações.

Não muito dramática, certo? Agradável e ‘clean’. É o tipo de imagem que torna a navegação em um site de comércio eletrônico uma experiência agradável.

Vamos começar analisar os dados com profundidade, e vamos ver se podemos descobrir tanto o que está acontecendo quanto o porquê disso.

Propriedades Universais da Imagem

Você pode se sofisticar e adicionar recursos para definir suas imagens para além do que o seu concorrente fará, mas todas as imagens tem em comum algumas propriedades. Aqui estão os valores mais comuns que encontramos,dispostos em um cartão Pixelz de pedidos Pixelz order specs card

Spec Card

Especificações de pedidos de imagem de produto usando os valos mais comuns.

Vamos examinar cada propriedade com um olhar mais profundo.

File Type: All Hail King JPG

FPrimeiro, cada imagem tem um tipo de arquivo. Na Pixelz, você pode escolher entre JPG, PNG, TIFF e PSD. O JPG absolutamente predomina, como você desconfiava:

O JPG é de longe, o tipo de arquivo de imagem de produto mais comum.

pie chart showing most common product image file types: jpg, png, tiff, psd

JPG is far and away the most common product image file type.

Por que o JPG lidera na web?

A velocidade de carregamento da página é mais importante do que uma compressão perfeita.

O JPG usa uma compressão com perdas que mantém elevada (mas não perfeita) a qualidade, enquanto o PNG utiliza uma compressão sem perdas que resiste a qualquer quantidade de zoom e permite transparência. As imagens JPG são menores (menos bytes), o que praticamente encerra a discussão. Na Internet, o carregamento até mesmo de uma fração de segundo mais lento irá lhe custar algumas vendas.

As imagens dos produtos são geralmente JPG na web, e que não vai mudar até que a largura de banda não importa ou algum novo tipo de arquivo anulou o carrinho de maçã.

Voltando ao nosso gráfico, é seguro dizer que quando o PSD e TIFF são selecionados as imagens finais em uso serão outra coisa. Ambos os formatos layer masks and clipping paths permitem máscaras de camada e caminhos de recorte a serem devolvidos dos editores de imagem para o proprietário, o que é útil se você estiver planejando uma mistura de plataformas de publicação das suas imagens de produto (como catálogos impressos, web, e-mail, etc.)

Não tenha receio de ser diferente! 7 milhões de images de produto revelam as normas da…

Background: White Wins Handily

A maioria dos proprietários de imagem opta por ter o fundo original recortado e substituído por branco puro.

Pie chart showing most common product image backgrounds after post-production: white, transparent, no change.

76% de todas as imagens de produtos têm fundos brancos.

Por que a maioria das imagens tem o fundo branco?

Consistência e representação precisa de cor são ambas proporcionadas pelos fundos brancos.

Na verdade, há várias coisas acontecendo aqui:

  1. Retirar o fundo de uma imagem de produto elimina distrações e mantém o foco em seu produto.
  2. Cores sólidas de fundo reduzem o tamanho do arquivo, porque simplificam a compressão.
  3. A maioria das páginas da web são brancas, pois um fundo branco mescla a imagem de produto com a página
  4. A maioria das páginas da web são brancas, pois um fundo branco mescla a imagem de produto com a páginaPreencher o fundo da sua imagem com o branco, bem como fotografar produtos com uma cortina de fundo branco, representam as cores do seu produto com precisão.

O que é um fundo transparente?

Um recurso interessante, mas não amplamente suportado.

transparent background

As imagens PNG podem ter fundos transparentes, mas não são suportados em qualquer lugar.

Imagens com fundos transparentes têm o fundo original cortado e não são substituídos. A transparência pode tornar mais fácil sobrepor o seu produto em imagens diferentes, como em uma montagem, ou em páginas web com fundos coloridos diferentes.

No entanto, a transparência não é suportada pelo JPG, e você pode ter problemas de exibição com PNGs transparentes. Se um aplicativo ou CMS não suporta transparência por qualquer motivo, sua imagem bonita fica feia rapidamente.

Alinhamento Vertical: Encontra o Seu Centro

As imagens podem ser alinhadas verticalmente em relação à sua altura, superior, inferior, ou o centro. Nós temos um outro grande vencedor: o alinhamento vertical central

Pie chart showing most common product image vertical alignment choices: center, no change, bottom, top

O alinhamento vertical central é responsável por 79% das imagens de produto analisadas.

Por que eu devo centralizar verticalmente as minhas imagens de produto?

Ele fornece a apresentação mais consistente.

VO alinhamento vertical central cria linhas limpas quando você tem produtos que variam em tamanho e forma, como joias, móveis, ferramentas ou outros produtos diversos.

Um alinhamento inferior é eficaz se você tiver uma página de categoria toda feita com um tipo de produto, como uma página feita inteiramente para bolsas de formatos semelhantes. Você pode visualizar diferentes alinhamentos ao criar suas especificações de pedidos da Pixelz..

Margem: Igualdade para Todos

Nós permitimos que os clientes definam suas margens em pixels, por percentagem, ou de nenhum outro jeito. Temos cerca de um empate entre pixels e seleção percentual. Há uma tendência bastante óbvia quando você detalha sobre as exatas definições de pixels.

A maioria das imagens de produto têm margens iguais (até 1px) superior, inferior, esquerda e direita.

Pie chart comparing equal and unequal product image margins

Most product images have equal (within 1px) top, bottom, left, and right margins.

Por que as margens uniformes são tão populares?

Elas fornecem espaçamento à prova de falhas.

Não há como dizer onde suas imagens de produto estarão e como eles serão exibidas. Elas podem ser vistas em seu site, em uma quadro da Pinterest, em um blog de influenciador, exibida por um motor de busca Pinterest board, em um blog de influenciador, exibida por um motor de busca e empurrada para um site de um varejista.

Nem todo mundo vai ser tão cuidadoso e experiente em tecnologia como você quer que eles sejam. Se você adicionar margens iguais: superior, inferior, esquerda e direita para suas imagens, você pode evitar que uma confusão completa aconteça; o tamanho de sua margem importa menos do que ser consistente.

[Clique para Tweetar “5 anos, 7 milhões de imagens de produto editadas, 1 infográfico para normatizar todas elas!!“]

Height and Width: Altura e Largura: Não Há um Tamanho que Sirva para Todas

Examinar nossos dados de dimensões de imagem é interessante, mas complicado. Você pode definir um tamanho exato de pixel, manter o seu tamanho original, fornecer uma proporção de aparência, ou fornecer tamanhos mínimos e máximos. Isso significa que nossos dados estão por toda parte..

Há grande variedade nos métodos utilizados para definir as dimensões da imagem de produto.

Pie chart showing how product image dimensions are set: exact pixels, keep original, aspect ration, min & max

Vamos olhar mais de perto seleções de tamanho de pixel exatas, que respondem por cerca de 38% do conjunto de dados:

Histogram comparing image widths and heights for product images, in 250px buckets

As imagens dos produtos têm enormemente variadas larguras e alturas.

Não há uma resposta objetiva. Altura e largura devem ser determinadas pelo seu produto e sua estratégia de web

Não há uma resposta objetiva. Altura e largura devem ser determinadas pelo seu produto e sua estratégia de web.

Plataformas de comércio eletrônico têm necessidades diferentes, como visto neste quadro de dicas cheat sheet, você também. Fale com o seu desenvolvedor web e descubra o que eles acham que é o ideal para o seu site. Em caso de dúvida, mantenha suas dimensões originais de imagem. Você sempre pode redimensionar uma imagem para menos, mas dimensioná-la para mais pode comprometer a qualidade.

Adicionais em Destaque

Nada como uma boa sombra para dar profundidade à sua imagem de produto, certo? Os proprietários de 1,2 milhões de imagens de produtos estão de acordo com você.

Ainda com a gente? Maravilha, você deve amar imagens de produtos, tanto quanto nós! Vamos entrar em detalhes sobre ainda mais recursos que você pode , como sombras, DPI e perfil de cores.

Sombras: Apenas Pareçam Naturais

Nada como uma boa sombra para dar profundidade Os proprietários de 1,2 milhões de imagens de produtos estão de acordo com você.

Pie chart showing shadow selections for 1.2 million product images: natural, drop, reflection, and cast

A sombra natural é a sombra mais popular para imagens do produto.

Espere, como posso adicionar uma sombra natural??

Quando removemos o fundo deixamos a sombra, então retocamos conforme necessário. Nós podemos criá-la no Photoshop, se não há nenhuma sombra original, como pode ser o caso com iluminação profissional de estúdio.

Se você estiver interessado em algo diferente da sombra natural, sombra gota and sombra reflexiva podem ser elevações sutis e eficazes de qualidade da sua imagem.a.

DPI: A Qualidade da Impressão é Uma Tendência Crescente

Cerca de 2,4 milhões de imagens de produtos processadas tinham configurações de DPI. 300 e 72 DPI são as configurações de imagem de produto mais comuns.

O DPI importa para a minha imagem na web?

Não, absolutamente não..

DPI (pontos por polegada) é algo importante quando há impressão, como para um catálogo: quanto maior o número, mais nítidos os detalhes quando impressos. Na verdade, não afetam a resolução da sua imagem digital; é simplesmente uma sequência de caracteres no cabeçalho do arquivo que se comunica com o software de impressão.

Cada número no eixo Y do nosso gráfico teve mais de 1000 imagens processadas, mas é claro que 300 DPI e 72 DPI são, de longe os mais populares. 300 DPI é uma resolução de alta qualidade para impressão. 72 DPI é, provavelmente, vem do mito da D DPI.

Perfil de Cor: sRBG é ‘a’ Cor

Nós nem sempre oferecemos opções de perfil de cor, e a maioria dos proprietários de imagem optam por manter o seu perfil de cor original. Por alto, dentre as 620.000 imagens que tenham criado um perfil de cor, há quatro seleções que merecem uma comparação: sRGB, Adobe RGB, RGB e CMYK.

Pie chart showing most common color profile of product images: sRGB, Adobe RG, RGB, and CMYK

sRGB is the most popular color profile for product images.

Olha, todas estas siglas são parecidas.

Nós sabemos. Não se preocupe com isso. Basta usar sRGB.

Mais uma vez temos um claro vencedor do voto popular, com sRGB ganhando várias vezes. Você pode encontrar um detalhamento das suas vantagens no Zen of sRGB Color Space. Em termos mais simples, a web é otimizada para o espaço de cor sRGB, por isso é a melhor maneira de garantir uma representação precisa dos seus produtos.

O que Aprendemos

Otimizar, otimizar, otimizar. Embora não necessariamente recomendamos copiar todas as configurações mais populares para as suas próprias imagens de produto, você certamente deve considerar o valor disso. Analisar sete milhões de imagens fez com que as práticas comuns da indústria ficassem claras.

Você provavelmente deve estar alinhando seus produtos verticalmente no centro, colocando um fundo branco, usando margens iguais e usando imagens JPG para a web. Sombras naturais são o tipo mais popular de sombra, e sRGB é o melhor perfil de cores para a web. Se você estiver imprimindo, utilize 300 DPI.

Tudo isso diz o seguinte: não tenha receio de ser diferente! Suas imagens de produto devem ser otimizadas para o seu site. Estar na web significa que os proprietários de comércio eletrônico compartilham muitos dos mesmos desafios, mas os produtos são únicos e suas necessidades podem ser diferentes do habitual.

Interessado(a) em relatórios de imagem de produto para o futuro? O que você gostaria de ver??