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

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 pelos Fundamentos da Web e pelo @ChromiumDev. O objetivo da 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 havia falhas na metodologia da pesquisa.

  • Se você é um desenvolvedor Web, esta postagem pode ser útil para descobrir novas técnicas de otimização de imagens ou detalhes sobre como outros desenvolvedores Web 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 CDN de imagem, 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 para implementar.

Comentários

WebP

  • "Eu gosto do WebP, mas ele ainda não está totalmente pronto. Além disso, nosso WordPress não é compatível com WebP. Um dos apps 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."
  • "Torne o WebP utilizável no Safari."
  • "Eu adoraria usar o WebP se pudesse exportá-los do Photoshop/Figma/Sketch e todos os navegadores compatíveis com ele." [Observação: o Sketch não é compatível com WebP]
  • "Uma solução de formatação de última geração seria ótima."
  • "Pare de implementar o WebP tanto quando o suporte ao navegador for fraco e considere a necessidade de PNG em vez de JPEG para capturas de tela."
  • "O Documentos Google não é compatível com WebP."
  • "Usaríamos exclusivamente o WebP, mas estamos preocupados com a compatibilidade do navegador."
  • "Primeiro, corrija a compatibilidade do navegador e atualize os navegadores legados ou adicione correções legadas. Em seguida, as pessoas estarão mais propensas a adotar novos tipos de imagem, como o WebP..."
  • "Incentive os desenvolvedores de plug-ins/tema a considerar o 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 SVG e vetoriais

  • "Se possível, estou usando SVG (animado). gatsby-image resolveu muito disso. Mas quando você se aprofunda no que eles fizeram, é completamente irrealista que um site normal deva ter que criar algo assim para que as imagens funcionem corretamente. O navegador deve assumir mais responsabilidades."
  • "Seria possível documentar como criar animações SVG com o lottie.js?"
  • "Na maioria das vezes, tentamos usar imagens JPEG de alta resolução com tamanhos baixos no nosso site para evitar tempos de carregamento. Também garantimos o uso de SVGs quando necessário para oferecer qualidade de design responsivo."
  • "Tentamos usar gráficos vetoriais otimizados para tudo, exceto fotos, se possível."

Outros formatos de imagem

  • "Nós [precisamos] educar melhor as pessoas para que parem de usar GIFs."

Carregamento lento

  • "Ao considerar recursos como o carregamento lento, pense no usuário, porque isso é irritante para muitos."
  • "Faça o atributo de carregamento lento funcionar com a imagem de plano de fundo."
  • "As estruturas devem processar melhor os recursos imediatamente."
  • "Convertemos do carregamento lento há muito tempo. O usuário relata que milhões de imagens e sites "NÃO CARREGANDO". Foi isso que nossa equipe resumiu. É difícil para usuários sem conhecimento técnico descrever os problemas."
  • "Quero entender melhor como usar a API Intersection Observer para carregamento lento em vez de técnicas tradicionais."
  • "Isso funciona para mim: pwafire.org/developer/codelabs/progressive-loading".

Imagens de plano de fundo

  • "Costumo carregar imagens como planos de fundo no CSS."
  • "A tag <img> é problemática e difícil de controlar detalhes detalhados, 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 nos permite usar tamanho e posição do plano de fundo, evitando que a imagem seja salva com o botão direito do mouse."

Transparência

  • "Estamos em 2019. Como os JPGs continuam sem transparência alfa?"
  • "Só uso PNGs para fotos quando preciso de um plano de fundo transparente."

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

  • "Usamos o LQIPS e é 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 imagens. À medida que o usuário rola 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, assim como a próxima solicitação AJAX para obter os próximos 60 cards se um usuário continuar rolando para baixo."
  • "Adoraríamos usar o HTTP/2, mas a maioria dos nossos clientes usa o IE11! Por isso, estamos explorando a fragmentação de domínios / carregando solicitações de dados AJAX JSON fora de um domínio diferente."

Dimensionamento

  • "Desculpe pelo tamanho intrínseco. Usar altura/largura parece melhor para mim."
  • "Procurando uma maneira de gerar menos tamanhos, no momento ele está em cerca de 12."
  • "O redimensionamento dinâmico de imagens é realmente difícil e impossível sem JS."
  • "Uma ferramenta como o responsivebreakpoints.com é bom 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 em alta resolução, geralmente TIFF ou PDF."
  • "É um incômodo. Arquivos img de alta resolução são necessários para formato de impressão, devem ser otimizados para a Web. É um incômodo 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 arte. Então, acabamos com fluxos de trabalho complexos para processar esses materiais."

Recurso do navegador

  • "O corte automático de src reativo do navegador como um recurso [integrado] seria muito útil, pois é demorado cortar todas as imagens em 4 tamanhos e escrever todas as marcações. Se pudéssemos fazer upload de uma foto grande e escrever uma tag de imagem simples, os navegadores criariam automaticamente os diversos atributos src que seriam um recurso vencedor."
  • "Pessoalmente, estou tendo dificuldade em evitar reflows de página quando a imagem é definida pelo CSS para imagens responsivas (max-width: 100%; altura automática ou altura: largura: 100%; altura automática), especialmente em combinação com direção de arte de imagens adaptativas/tag de imagem. A melhor maneira de evitar parece usar o "hack de padding negativo" para uma proporção fixa e posicionar a imagem dentro dessa caixa. Um melhor suporte ao navegador/tratamento de imagem responsiva seria de grande ajuda!"
  • "Desative a "reprodução automática" do GIF buscando apenas o primeiro frame.

CDNs e serviços de imagem

  • "O Google deveria oferecer uma CDN sem custo financeiro, como o Cloudflare."
  • "Talvez seja bom ter mais ferramentas para configurar o escalonamento dinâmico e CDNs com diferentes provedores."
  • "Uma única imagem supercomprimida é 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 px) e esse também é o tamanho necessário para telas grandes/de computadores que não sejam Retina. Acho que as CDNs de redimensionamento de imagens são uma solução muito ruim, embora já tenha usado no passado. O CMS deve lidar com o redimensionamento e isso é muito complexo de configurar, uma única solução seria um bom meio-termo (por enquanto)."
  • "A CloudFlare escalona automaticamente nossas imagens para melhor corresponder à exibição do usuário. Isso pode reduzir o tempo de carregamento porque as imagens são carregadas em relação à exibição 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."
  • "O Cloudflare faz isso em segundo plano sem precisarmos fazer nada além de marcar uma caixa no painel de configurações."
  • “Só para reforçar, a única razão pela qual consigo usar srcset etc. com sucesso é a facilidade do Cloudinary. Mas o Cloudinary é caro, realmente rápido, e isso parece um grande problema na experiência de desenvolvimento."
  • "Precisamos de uma maneira de fazer o corte automático de imagens de maneira inteligente para que elas possam funcionar 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

  • "Eu 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 sejam reduzidas nem escalonadas. Não tenho certeza se posso definir max-width ou max-height em imagens"
  • "Usei gatsby-image nos últimos projetos e nunca parei para voltar."
  • "As imagens são muitas vezes a parte difícil, pois são colocadas no CMS pelo usuário final. Elas podem usar qualquer tamanho, formato, às vezes imagem original em formato de imagem ideal e as dimensões não estão disponíveis."
  • "É difícil manter as imagens, pois nosso sistema é de autosserviço, adicionar controles é difícil, a menos que as coisas aconteçam automaticamente sem afetar a resolução. Para nós, as imagens não aparecem corretamente em dispositivos móveis ou computadores."
  • "Ajudo as pessoas a otimizar sites (WordPress). Os maiores problemas que vi para imagens são: a necessidade de depender de um CDN ou plug-ins para criar WebP. srcset/picture deve ser codificado corretamente pelos desenvolvedores de temas. A maioria dos plug-ins de carregamento lento demora para gerar 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 adesão aos novos padrões, como srcset e WebP, tem sido adotada lentamente por muitas empresas da Fortune 500. Vendo isso, muitas empresas resistiram à mudança, considerada um custo desnecessário de desenvolvimento dos sites atuais. Os ganhos de performance não são amplamente discutidos nem relatados pelo usuário final (UX). Isso dificulta um pouco o salvamento de imagens da Web."
  • "É caro criar e gerenciar vários tamanhos, versões."
  • "Eles ocupam muito espaço em nosso servidor."

SEO

  • "É difícil equilibrar a qualidade aceitável da imagem e o tamanho do arquivo. Por um lado, quero um carregamento rápido para melhorar o SEO, mas, por outro lado, imagens de baixa qualidade prejudicam a interface/UX."

O papel das imagens na Web

  • "Há muitas informações 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 compartilhamentos de selfies usando ASCII-art?"

Ferramentas, orientação, 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 Web, é extremamente frustrante porque é demorado salvar as imagens. Otimizamos o máximo possível, verificamos o site e meses depois, o Google decidiu que as imagens poderiam ser ainda mais comprimidas ou precisam estar em um formato diferente. Isso nos impede de oferecer a melhor solução possível e duradoura ao nosso cliente, o que acaba gerando um esforço dispendioso para ele e para nós. Alguns de nossos clientes de pequenas empresas simplesmente não têm orçamento para continuarmos corrigindo e salvando as imagens para cumprir os requisitos. Não temos orçamento para realizar esse trabalho nos pacotes de gerenciamento. Escrever o código para chamar diferentes tamanhos de imagem para dispositivos distintos também é uma tarefa demorada. Seria ótimo criar um sistema de salvamento de imagens que fosse consistente por um período mais longo."
  • "Sim, acho que você entendeu “Manter a contagem de solicitações baixas e tamanhos de arquivo pequenos” no Lighthouse. Se um site é veiculado por HTTP1.x, isso é certo, mas se um site é exibido por HTTP2, o número de solicitações é menos importante ou nem mesmo um problema se originados do mesmo nome do host. Tenho um site Lite, mas carrego 30 pequenos arquivos WebP de aproximadamente 35 solicitações no total, por HTTP2 com o mesmo nome de host. O Lighthouse está sinalizando isso como um problema "Manter contagem de solicitações baixas e tamanhos de arquivo pequenos", embora seja super-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 tem entre 1 KB e 2 KB ou menos). Eu poderia carregar um sprite, mas seria necessário mais computação de CSS. Portanto, 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".
  • "Tem sido difícil para as pessoas se lembrarem de compactar as imagens."
  • "O comportamento entre navegadores permanece imprevisível, portanto, as soluções mais simples geralmente são as mais seguras."