Feedback da pesquisa de otimização de imagens de 2019

Comentários dos participantes da pesquisa sobre várias técnicas de otimização de imagens

Sam Dutton

Esta postagem lista o feedback de formato livre que o Google Web DevRel recebeu na pesquisa de técnicas de otimização de imagens do terceiro trimestre de 2019. As respostas foram solicitadas por meio do Fundamentos da Web e do @ChromiumDev. A motivação para a pesquisa foi descobrir por que a maioria dos sites não segue as práticas recomendadas de otimização de imagens, mesmo que elas pareçam uma maneira relativamente fácil de melhorar o desempenho. Os dados de resposta não estão listados aqui porque houve falhas na metodologia da pesquisa.

Público-alvo

• Se você é desenvolvedor Web, este post pode ser útil para descobrir novas técnicas de otimização de imagens ou detalhes sobre como outros desenvolvedores resolveram um problema que você está enfrentando, além dos custos, benefícios e limitações de cada técnica.
• Se você é um provedor de serviços de imagem ou de CDN de imagem, este post pode ajudar a encontrar novas oportunidades de mercado.
• Se você é desenvolvedor de frameworks, ferramentas de build ou CMS, esta postagem pode dar ideias sobre novos recursos para implementar.

Comentários

WebP

Observação : por que isso é importante? Formatos de imagem como WebP podem resultar em arquivos menores e com melhor qualidade do que formatos mais antigos, como JPEG e PNG. Há várias técnicas para usar formatos modernos com substitutos para navegadores mais antigos.

• "Gosto do WebP, mas ele ainda não está totalmente pronto. Além disso, nosso WordPress não é compatível com WebP. O Photoshop, um dos apps de edição de fotos mais usados, também não é compatível com o WebP por padrão. Por isso, não podemos usar apps ou serviços de terceiros para compactar imagens."
• "Make WebP usable on Safari."
• "Eu adoraria usar o WebP se pudesse exportar as imagens do Photoshop/Figma/Sketch e se todos os navegadores fossem compatíveis." [Observação: o Sketch é compatível com WebP]
• "Uma solução de formatação de última geração seria ótima."
• "Parem de forçar tanto o WebP quando o suporte do navegador é ruim e considerem a necessidade de PNG em vez de JPEG para capturas de tela."
• "O Google Docs não é compatível com WebP."
• "Usaríamos apenas o WebP, mas estamos preocupados com a compatibilidade com navegadores."
• "Primeiro, corrija a compatibilidade do navegador e atualize os navegadores legados ou adicione correções legadas. Assim, as pessoas vão ficar mais inclinadas a adotar novos tipos de imagem, como WebP…"
• "Incentive os desenvolvedores de plug-ins/temas a oferecer suporte ao WebP e a outros tipos de imagem de última geração para que os não desenvolvedores não precisem se preocupar com isso."

Imagens vetoriais e SVG

• "Se possível, uso SVG (animado). O gatsby-image corrigiu muito disso. Mas quando você analisa o que eles fizeram, é completamente irreal que um site normal precise criar algo assim para que as imagens funcionem corretamente. O navegador precisa assumir mais essa responsabilidade."
• "Seria possível documentar como criar animações SVG com o lottie.js?"
• "Tentamos usar imagens JPEG de alta resolução com tamanhos pequenos no nosso site na maior parte do tempo para evitar tempos de carregamento. Também usamos SVGs quando necessário para garantir a qualidade do design responsivo."
• "Tentamos usar gráficos vetoriais otimizados para tudo, exceto fotos, se possível."

Outros formatos de imagem

• "Precisamos educar melhor as pessoas para que parem de usar GIFs."

Carregamento lento

Observação : por que isso é importante? Solicitar arquivos de imagem no momento certo, em vez de receber todas as imagens de uma página assim que ela é carregada, pode melhorar o desempenho e reduzir o custo de dados.

• "Pense no usuário ao considerar recursos como o carregamento lento, porque para muitos isso é irritante."
• "Faça o atributo de carregamento lento funcionar com background-image, por favor."
• "Os frameworks deveriam fazer um processamento de recursos melhor por padrão."
• "Já faz muito tempo que não usamos o carregamento lento. Relatórios de usuários de milhões de imagens e sites "NÃO CARREGANDO". Foi assim que nossa equipe resumiu o entendimento. É difícil para usuários não técnicos descreverem problemas."
• "Quero entender melhor como usar a API Intersection Observer para carregamento lento em vez de usar técnicas tradicionais."
• "Este funciona bem para mim: pwafire.org/developer/codelabs/progressive-loading."

Imagens de plano de fundo

• "Costumo carregar imagens como planos de fundo em CSS."
• "A tag <img> é problemática e dificulta o controle de detalhes específicos, principalmente com conteúdo enviado pelo usuário. Usamos <div> e o estilo de imagem de plano de fundo com muito mais frequência, porque isso nos permite usar o tamanho e a posição do plano de fundo e impedir que a imagem seja salva ao clicar com o botão direito do mouse.

Transparência

• "Estamos em 2019. Como os JPGs ainda não têm transparência alfa?"
• "Só uso PNGs para fotografias quando preciso de um fundo transparente."

Marcadores de posição de imagem de baixa qualidade (LQIPs, na sigla em inglês)

• "Usamos LQIPS, que é uma ótima técnica para manter os visitantes engajados sem carregar imagens de alta qualidade logo no início."

Desempenho

• "Recentemente, tivemos um problema de desempenho com imagens. Conforme o usuário rola a página para baixo, mostramos os próximos 60 cards, que incluem uma miniatura. Devido ao limite de seis conexões no mesmo domínio, as miniaturas estavam sendo bloqueadas, assim como a próxima solicitação AJAX para receber os próximos 60 cards se um usuário continuasse rolando para baixo."
• "Adoraríamos usar o HTTP/2, mas a maioria dos nossos clientes usa o IE11! Por isso, estamos analisando a fragmentação de domínio / o carregamento de solicitações de dados JSON do AJAX em um domínio diferente."

Dimensionamento

Observação : por que isso é importante? O atributo srcset fornece fontes de imagem alternativas. Você especifica a largura ou a densidade de pixels para que o navegador possa escolher a menor imagem sem precisar fazer o download de imagens para calcular as dimensões.

• "Desculpe pelo intrinsicsize. Acho melhor usar height/width."
• "Estou procurando uma maneira de gerar menos tamanhos, no momento são cerca de 12."
• "O redimensionamento dinâmico de imagens é muito difícil e impossível sem JS."
• "Uma ferramenta como responsivebreakpoints.com é boa para o web.dev :)".

Imagens de alta qualidade e alta resolução

• "Como baixar imagens compactadas sem perder a qualidade de DPI?"
• "Somos uma empresa de gerenciamento de documentos. Nossos apps processam MILHÕES de imagens digitalizadas em alta resolução, geralmente em TIFF ou PDF."
• "É um incômodo. Arquivos de imagem de alta resolução são necessários para o formato de impressão e precisam ser otimizados para a Web. É um incômodo reduzir o tamanho das imagens para a Web, mas é um problema sério se os autores fornecerem apenas arquivos leves para imagens destinadas à publicação impressa. Acabamos enviando mensagens confusas sobre os requisitos para o envio de manuscritos com ilustrações. Por isso, acabamos com fluxos de trabalho complexos para processar esses materiais."

Capacidade do navegador

• "O corte automático de src responsivo do navegador como um recurso [integrado] seria muito útil, já que cortar todas as imagens em quatro tamanhos e escrever toda a marcação é algo que consome muito tempo. Se pudéssemos fazer upload de uma foto grande e escrever uma tag de imagem simples para que os navegadores criassem automaticamente os vários atributos src, seria um recurso incrível."
• "Pessoalmente, estou tendo dificuldade para evitar o refluxo de página quando a imagem é definida pelo CSS para imagens responsivas (max-width: 100%; height auto ou height: width: 100%; height auto), especialmente em combinação com a direção de arte de imagens adaptáveis/tag de imagem. A melhor maneira de evitar isso é usar o "hack de padding negativo" para uma proporção de imagem fixa e, em seguida, posicionar a imagem dentro dessa caixa de proporção. Um melhor suporte ao navegador/processamento de imagens responsivas seria uma grande ajuda!"
• "Desative a reprodução automática de GIFs buscando apenas o primeiro frame."

CDNs e serviços de imagem

Observação : por que isso é importante? Os serviços de imagem facilitam a otimização das suas imagens. Normalmente, basta fazer upload de uma versão de alta resolução de cada imagem e usar uma API de serviço da Web para otimizar ou transformar a imagem conforme necessário. As redes de fornecimento de conteúdo (CDNs) otimizam a distribuição e o fornecimento de imagens e outros recursos do site e, às vezes, oferecem serviços de otimização, como o fornecimento automático de imagens WebP para navegadores compatíveis em vez de PNG ou JPEG, sem mudar a extensão de arquivo.

• "O Google deveria fornecer uma CDN sem custo financeiro como o Cloudflare."
• "Talvez mais ferramentas para configurar o escalonamento dinâmico e as CDNs com diferentes provedores sejam úteis."
• "Uma única imagem grande e muito compactada é uma solução muito boa sem custo de produção extra. Você precisa de imagens com cerca de 1.000 pixels de largura para dispositivos móveis (largura de renderização de 500 px), que também é o tamanho necessário para telas grandes/de computador que não são Retina. Acho que as CDNs de redimensionamento de imagens são uma solução muito ruim, embora eu já tenha usado no passado. O CMS deve lidar com o redimensionamento e, se isso for muito complexo de configurar, uma única solução é um bom compromisso (por enquanto)."
• "O CloudFlare faz o escalonamento automático das nossas imagens para que elas se ajustem melhor à tela do usuário. Assim, podemos economizar tempo de carregamento, porque as imagens são carregadas de acordo com a tela do usuário. Por exemplo, se um usuário estiver em um smartphone, ele não será carregado em um plano de fundo do tamanho de um computador."
• "A Cloudflare faz isso em segundo plano sem que precisemos fazer nada, exceto marcar uma caixa no painel de configurações."
• "Só para reiterar, o único motivo pelo qual posso usar o srcset etc. é a facilidade do Cloudinary. Mas o Cloudinary fica caro muito rápido. Isso parece um grande buraco na experiência de desenvolvimento."
• "Precisamos de uma maneira de cortar imagens automaticamente de forma inteligente para que elas funcionem com diferentes proporções em diferentes contextos."
• "Também uso imagens de outros provedores, como o Unsplash, em que há muito menos controle de resolução, qualidade e compactação."

CMS, plataforma e framework

• "Ainda tenho dificuldade para descobrir qual é a melhor maneira de usar imagens ao criar um site com um CMS. Os autores tendem a configurar imagens com dimensões diferentes e esperam que elas não sejam reduzidas ou dimensionadas. Não sei se é correto definir max-width ou max-height em imagens"
• "Tenho usado o gatsby-image nos últimos projetos e não me arrependo."
• As imagens costumam ser a parte difícil, porque são colocadas no CMS pelo usuário final. Elas podem ter qualquer tamanho ou formato, e às vezes a imagem original não está disponível no formato da imagem e nas dimensões ideais.
• "As imagens são difíceis de manter, já que nosso sistema é de autoatendimento. Adicionar controles é difícil, a menos que as coisas aconteçam automaticamente sem afetar a resolução. Além disso, as imagens não aparecem corretamente em dispositivos móveis em comparação com computadores."
• "Ajudo as pessoas a otimizar os sites delas (WordPress). Os maiores problemas que vejo com imagens são: necessidade de depender de uma CDN ou de plug-ins para criar WebP. O srcset/picture precisa ser codificado corretamente pelos desenvolvedores de temas. A maioria dos plug-ins de carregamento lento carrega devagar, o que prejudica a experiência do usuário. É difícil fazer o carregamento lento de imagens de plano de fundo."

Custo/benefício

• "As novas práticas são eficazes, mas aumentam o tempo de desenvolvimento dos sites."
• "A falta de adesão aos novos padrões, como srcset e WebP, tem sido lenta em muitas empresas da Fortune 500. Por isso, muitas empresas resistiram à mudança, considerando-a um custo de desenvolvimento desnecessário para os sites atuais. Os ganhos de desempenho não são amplamente discutidos ou relatados pelo usuário final (UX). Na verdade, isso torna um pouco mais difícil salvar imagens da Web."
• "É caro criar e gerenciar vários tamanhos e versões."
• "Eles ocupam muito espaço no nosso servidor."

SEO

• "É difícil equilibrar a qualidade da imagem e o tamanho do arquivo. Por um lado, quero um carregamento rápido para o benefício de SEO, mas, por outro, imagens de baixa qualidade vão prejudicar a UI/UX."

O papel das imagens na Web

• "Há muitos na Web. Pare de usar imagens inúteis que não melhoram o conteúdo escrito."
• "Você ainda se lembra de quando a Web não tinha imagens e compartilhávamos selfies como arte ASCII?"

Ferramentas, orientações, padrões e práticas recomendadas: frustrações e solicitações

• [Um participante escreveu um post de blog em resposta a esta pesquisa]
• "Os requisitos parecem mudar constantemente. Como desenvolvedor web, isso é extremamente frustrante, porque salvar as imagens já é um processo demorado. Otimizamos o melhor que podemos, verificamos o site e, meses depois, o Google decide que as imagens poderiam ser ainda mais compactadas ou precisam estar em um formato diferente. Isso nos impede de oferecer a melhor solução possível para o cliente, que seja duradoura, e cria um esforço caro para eles e para nós. Alguns dos nossos clientes de pequenas empresas simplesmente não têm orçamento para que possamos continuar corrigindo e salvando as imagens de acordo com os requisitos. Não temos orçamento para fazer esse trabalho dentro dos pacotes de gerenciamento deles. Escrever o código para chamar tamanhos de imagem diferentes para dispositivos diferentes também é demorado. Seria ótimo criar um sistema de salvamento de imagens que fosse consistente por um período mais longo."
• "Sim, acho que você entendeu errado o que significa 'Manter o número de solicitações baixo e o tamanho dos arquivos pequeno' no Lighthouse. Se um site for veiculado por HTTP1.x, sim, mas se for veiculado por HTTP2, o número de solicitações será menos importante ou nem será um problema se for originado do mesmo nome do host. Tenho um site leve, mas carrego 30 arquivos WebP pequenos de aproximadamente 35 solicitações no total, por HTTP2 no mesmo nome do host. O Lighthouse está sinalizando isso como um problema de "Manter o número de solicitações baixo e o tamanho dos arquivos pequeno", mas ele é super-rápido e, devido ao HTTP2 no mesmo nome do host, o número de solicitações não é um problema. E sim, os arquivos já são pequenos (a maioria entre 1 KB e 2 KB ou menos). Eu poderia carregar um sprite, mas isso exigiria mais computação de CSS. Portanto, atualize o relatório "Keep Request Counts Low And File Sizes Small" no Lighthouse para considerar o HTTP2 no mesmo nome do host."
• "As pessoas têm dificuldade para lembrar de compactar as imagens."
• "O comportamento entre navegadores continua imprevisível, então as soluções mais simples costumam ser as mais seguras."