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

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

Sam dutton

Nesta postagem, listamos o feedback de formato livre que o Google Web DevRel recebeu na pesquisa sobre técnicas de otimização de imagens do segundo semestre de 2019. Enviamos solicitações de respostas pelos sites Fundamentos da Web e @ChromiumDev. O motivo da pesquisa foi descobrir por que a maioria dos sites não segue as práticas recomendadas de otimização de imagens, embora elas pareçam uma maneira relativamente fácil de melhorar a performance. Os dados das respostas não estão listados aqui porque houve falhas na metodologia da pesquisa.

Público-alvo

  • Se você é um desenvolvedor da Web, esta postagem pode ser útil para descobrir novas técnicas de otimização de imagens ou detalhes sobre como outros desenvolvedores da Web resolveram um problema que você está enfrentando, bem como os custos, benefícios e limitações de cada técnica.
  • Se você é um provedor de serviços ou CDN de imagens, esta postagem pode ajudar a encontrar novas oportunidades de mercado.
  • Se você é um desenvolvedor de framework, ferramenta de build ou CMS (sistema de gerenciamento de conteúdo), esta postagem pode dar ideias sobre novos recursos a serem implementados.

Comentários

WebP

  • "Gosto do WebP, mas ele ainda não está totalmente pronto. Além disso, nosso WordPress não é compatível com WebP. Um dos aplicativos de edição de fotos mais populares, o Photoshop, também não oferece suporte ao WebP por padrão. Portanto, não podemos confiar em aplicativos ou serviços de terceiros para a compactação de imagens."
  • "Tornar o WebP utilizável no Safari."
  • "Eu adoraria usar o WebP se pudesse exportá-los do Photoshop/Figma/Sketch e todos os navegadores oferecem suporte a ele." [Observação: o Sketch é compatível com WebP]
  • "Uma solução de formatação de última geração seria ótima."
  • "Pare de forçar o WebP quando o suporte ao navegador for ruim e considere a necessidade de PNG em vez de JPEG para capturas de tela."
  • "O Google Docs não oferece suporte para WebP."
  • "Usamos WebP exclusivamente, mas estamos preocupados com a compatibilidade do navegador."
  • "Primeiro, corrija a compatibilidade e atualize os navegadores legados ou adicione correções. Depois, as pessoas vão estar mais propensas a adotar novos tipos de imagem como WebP..."
  • "Incentive desenvolvedores de plug-ins/temas a considerar a compatibilidade com WebP e outros tipos de imagem de última geração para que não desenvolvedores precisem mexer nisso."

SVG e imagens vetoriais

  • "Se possível, estou usando SVG (animado). gatsby-image corrigiu muito disso. Mas, quando você se aprofunda no que eles fizeram, é completamente irreal que um site normal precisa criar algo assim para que as imagens funcionem corretamente. O navegador deve assumir mais dessa responsabilidade."
  • "Seria possível documentar como criar animações SVG com o lottie.js?"
  • "Na maioria das vezes, tentamos usar imagens JPEG de grande resolução com tamanhos baixos em nosso site para evitar tempos de carregamento. Também garantimos o uso de SVGs quando necessário para fornecer qualidade ao 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 parar de usar GIFs".

Carregamento lento

  • "Considere o usuário ao considerar recursos como o carregamento lento, porque isso é irritante para muitos."
  • "Faça o atributo de carregamento lento funcionar com a imagem de plano de fundo."
  • "As estruturas precisam fazer um processamento de recursos melhor pronto para uso."
  • "Convertemos o carregamento lento há muito tempo. O usuário relata milhões de imagens e sites "NÃO CARREGANDO". Isso foi o que nossa equipe resumiu como. Usuários sem conhecimento técnico têm dificuldade para descrever os problemas."
  • "Quero entender melhor como usar a API Intersection Observer para carregamento lento em vez de técnicas tradicionais."
  • "Isso funciona bem para mim: pwafire.org/developer/codelabs/progressive-loading (link em inglês)."

Imagens de plano de fundo

  • "Eu costumo carregar imagens como planos de fundo no CSS."
  • "A tag <img> é problemática e difícil de controlar detalhes refinados, especialmente com conteúdo enviado pelo usuário. Usamos <div> e o estilo da imagem de plano de fundo com muito mais frequência, já que isso permite usar o tamanho e a posição do plano de fundo e impedir que a imagem seja salva clicando com o botão direito do mouse.

Transparência

  • "Estamos em 2019. Como os JPGs ainda estão sem transparência alfa?"
  • "Eu só uso PNGs para fotografias quando preciso de um fundo transparente."

Marcadores de posição de imagem de baixa qualidade (LQIPs)

  • "Usamos o LQIPS, que é uma ótima técnica para manter os visitantes engajados sem carregar imagens de alta qualidade muito cedo."

Desempenho

  • "Na verdade, tivemos um problema de desempenho recente com as imagens. À medida que um usuário rola a tela para baixo no site, 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, bem como a próxima solicitação AJAX de exibição dos próximos 60 cards se um usuário continuar rolando a tela para baixo."
  • "Adoraríamos usar o HTTP/2, mas a maioria de nossos clientes usa o IE11. Por isso, estamos explorando a fragmentação / carregamento de dados do domínio AJAX de um domínio diferente."

Tamanho

  • "Desculpe pelo tamanho intrínseco. Usar altura/largura parece melhor para mim."
  • "Procurando uma maneira de gerar menos tamanhos, no momento são cerca de 12."
  • “O redimensionamento dinâmico de imagens é realmente difícil e impossível sem JS."
  • "Uma ferramenta como responsivebreakpoints.com é boa para web.dev :)."

Imagens de alta qualidade e resolução

  • "Como fazer o download de imagens compactadas sem perder a qualidade de DPI?"
  • "Somos uma empresa de gerenciamento de documentos. Nossos aplicativos lidam com MILHÕES de imagens digitalizadas de alta resolução, geralmente TIFF ou PDF."
  • "É um incômodo. Os arquivos img de alta resolução são necessários para o formato de impressão e devem ser otimizados para a Web. É um transtorno para reduzir imagens para a Web, mas é um problema se os autores fornecerem apenas arquivos leves para imagens destinadas à publicação impressa. Acabamos apresentando mensagens confusas sobre os requisitos para o envio de manuscritos com obras de arte. Em seguida, temos fluxos de trabalho complexos para o processamento desses materiais."

Capacidade do navegador

  • "O corte src automático do navegador como recurso [incorporado] seria muito útil, pois seria demorado cortar todas as imagens em quatro tamanhos e gravar todas as marcações. Se pudermos fazer upload de uma foto grande e escrever uma tag de imagem simples, os navegadores criarão automaticamente vários atributos src que seriam um recurso vencedor."
  • "Pessoalmente, estou tendo dificuldade em evitar o reflow de página quando a imagem com é definida pelo CSS para imagens responsivas (largura máxima: 100%; altura automática ou altura: largura: 100%; altura automática), especialmente em combinação com a direção de arte da tag de imagens/imagens adaptáveis. A melhor maneira de evitar isso é usar a "hacking de padding negativo" para uma proporção de imagem fixa e, em seguida, posicionar a imagem dentro dessa caixa de proporção. Uma melhor ajuda seria um melhor suporte ao navegador/tratamento de imagens responsivas!"
  • "Desative a "reprodução automática" do GIF buscando apenas o primeiro frame."

CDNs e serviços de imagem

  • "O Google deveria fornecer uma CDN sem custo financeiro como o Cloudflare."
  • "Talvez seja interessante ter mais ferramentas para configurar o escalonamento dinâmico e CDNs com diferentes provedores."
  • "Uma única imagem supercompactada é uma solução muito decente sem custo extra de produção. Você precisa de imagens de cerca de 1.000 pixels de largura para dispositivos móveis (largura de renderização de 500 pixels), que também é o tamanho necessário para telas grandes/não Retina de computadores. Acho que CDNs de redimensionamento de imagens são uma solução muito ruim, embora eu já tenha usado isso no passado. O CMS deve lidar com o redimensionamento e isso é muito complexo de configurar. Uma única solução é um bom comprometimento (por enquanto)."
  • “O CloudFlare escalona automaticamente nossas imagens para corresponder melhor à tela do usuário. Dessa forma, podemos economizar tempo de carregamento porque as imagens são carregadas em relação à tela do usuário. Por exemplo, se um usuário estiver usando um celular, ele não será carregado em um plano de fundo com o tamanho de um computador."
  • “O Cloudflare faz isso em segundo plano sem que tenhamos que fazer nada, exceto marcar uma caixa em nosso painel de configurações.”
  • "Só para reiterar, o único motivo pelo qual posso usar com sucesso o srcset etc. é a facilidade do Cloudinary. Mas o Cloudinary é caro, realmente rápido. Isso parece uma grande brecha na experiência de desenvolvimento."
  • "Precisamos de uma forma de cortar automaticamente as imagens de maneira inteligente para que elas possam trabalhar com proporções diferentes em contextos distintos."
  • "Eu também uso imagens de outros provedores, como o Unsplash, onde 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 quando estou criando um site com um CMS. Os autores tendem a configurar imagens com dimensões diferentes e esperam que elas não diminuam ou dimensionem. Não tenho certeza se posso definir max-width ou max-height em imagens"
  • "Uso o gatsby-image nos últimos projetos e nunca mais voltei."
  • "As imagens costumam ser a parte difícil, porque são colocadas no CMS pelo usuário final. Elas podem usar qualquer tamanho e formato. Às vezes, a imagem original no formato de imagem ideal e as dimensões não estão disponíveis."
  • "É difícil manter as imagens porque nosso sistema é de autosserviço. A adição de controles é difícil, a menos que algo aconteça automaticamente sem afetar a resolução. Para nós, as imagens não parecem corretas em dispositivos móveis nem em computadores."
  • "Ajudo as pessoas a otimizar os sites (WordPress). Os maiores problemas que encontrei para imagens são: precisa depender de um CDN ou plug-ins para criar o WebP. srcset/picture precisa ser codificado corretamente pelos desenvolvedores de temas. A maioria dos plug-ins de carregamento lento carrega lentamente, causando uma UX ruim. As imagens de plano de fundo são difíceis de carregar lentamente."

Custo/benefício

  • "As novas práticas são eficazes, mas aumentam o tempo de desenvolvimento dos sites."
  • “A falta de aderência aos novos padrões, como srcset e WebP, tem sido lenta para ser adotada por muitas empresas da Fortune 500. Vendo isso, muitas empresas resistiram à mudança como um custo de desenvolvimento desnecessário para os sites atuais. Os ganhos de desempenho não são amplamente discutidos nem relatados pelo usuário final (UX). Se for o caso, será 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 de imagem aceitável e o tamanho do arquivo. Por um lado, quero um carregamento rápido para melhorar a SEO, mas, por outro lado, imagens de baixa qualidade prejudicam a interface/UX."

O papel das imagens na Web

  • "Existem muitos itens na web. Pare de usar imagens inúteis que não aprimorem o conteúdo escrito."
  • "Você ainda se lembra da época em que a Web não tinha imagens e nós compartilhamos selfies como arte ASCII?"

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

  • [Um participante escreveu uma postagem no blog em resposta a esta pesquisa]
  • "Os requisitos parecem mudar constantemente. Como desenvolvedor da Web, é extremamente frustrante salvar as imagens em primeiro lugar. Otimizamos o máximo possível, verificamos o site e, meses depois, o Google decidiu que as imagens poderiam ser ainda mais compactadas ou precisar estar em um formato diferente. Isso nos impede de fornecer a melhor solução possível ao nosso cliente que dura e que crie um esforço caro para ele e para nós. Alguns de nossos clientes de pequenas empresas simplesmente não têm orçamento suficiente para continuar corrigindo as imagens e salvando-as novamente de acordo com os requisitos. Não temos orçamento para fazer esse trabalho dentro dos pacotes de gerenciamento. Escrever o código para chamar diferentes tamanhos de imagem para diferentes dispositivos também é demorado. Seria ótimo criar um sistema para salvar imagens que fossem consistentes por um período mais longo."
  • "Sim, acho que você recebeu a mensagem "Manter a contagem de solicitações baixa e os tamanhos de arquivo pequenos" errado no Lighthouse. Se um site atender por HTTP1.x, com certeza, mas se um site atender por HTTP2, o número de solicitações será menos importante ou nem será um problema se for originado do mesmo nome de host. Eu tenho um site lite, mas carrego 30 arquivos WebP pequenos com aproximadamente 35 solicitações no total, por HTTP2 no mesmo nome de host. O Lighthouse está sinalizando esse problema como um problema de "Manter a contagem de solicitações baixas e os tamanhos de arquivo pequenos", mas ele é muito rápido e, por causa do HTTP2 no mesmo nome de host, o número de solicitações não é um problema. Sim, os arquivos já são pequenos (a maioria entre 1 KB e 2 KB ou menos). Eu poderia carregar um sprite, mas a computação de CSS precisa ser maior. Por isso, atualize o relatório "Manter contagens de solicitações baixas e tamanhos de arquivo pequenos" no Lighthouse para considerar o HTTP2 no mesmo nome de host."
  • "As pessoas sempre lutam para se lembrar de compactar as imagens."
  • "O comportamento em navegadores diferentes permanece imprevisível, portanto, as soluções mais simples costumam ser as mais seguras."