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 em formato livre que o Google Web DevRel recebeu na pesquisa sobre técnicas de otimização de imagens do verão de 2019. As respostas foram solicitadas pelo Web Fundamentals e pelo @ChromiumDev. O objetivo da pesquisa era descobrir por que a maioria dos sites não segue as práticas recomendadas de otimização de imagens, mesmo que 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ê é 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ê tem um serviço de imagem ou um provedor de CDN de imagem, esta postagem pode ajudar a encontrar novas oportunidades de mercado.
• Se você é um desenvolvedor de framework, ferramenta de build ou CMS, esta postagem pode dar ideias de novos recursos para implementar.

Comentários

WebP

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

• "Eu gosto do WebP, mas ele ainda não está totalmente pronto. Além disso, nosso WordPress não tem suporte a WebP. Um dos apps de edição de fotos mais conhecidos, o Photoshop, também não oferece suporte ao WebP. Portanto, não podemos depender de apps ou serviços de terceiros para compactar imagens."
• "Torná-lo utilizável no Safari."
• "Eu adoraria usar WebP se pudesse exportar do Photoshop/Figma/Sketch e todos os navegadores tivessem suporte a ele." [Observação: o Sketch oferece suporte a WebP]
• "Uma solução de formatação de última geração seria ótimo."
• "Pare de forçar tanto o WebP quando o suporte do navegador for ruim e considere a necessidade de PNG em vez de JPEG para capturas de tela."
• "O Documentos Google não oferece suporte ao WebP."
• "Gostaríamos de usar o WebP exclusivamente, mas estamos preocupados com a compatibilidade do navegador."
• "Primeiro, corrija a compatibilidade do navegador e atualize os navegadores legados ou adicione correções legados. Depois, as pessoas vão estar mais propensas a adotar novos tipos de imagem, como WebP…"
• "Incentive os desenvolvedores de plug-ins/temas a considerar o suporte a WebP e outros tipos de imagem de última geração, para que pessoas que não são desenvolvedores não precisem mexer nisso."

SVG e imagens vetoriais

• "Se possível, estou usando SVG (animado). O gatsby-image corrigiu muito disso. No entanto, quando você analisa o que eles fizeram, é completamente irrealístico 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 lottie.js?"
• "Tentamos usar imagens JPEG de alta resolução com tamanhos pequenos no nosso site na maioria das vezes 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, mas, se possível, não use fotos."

Outros formatos de imagem

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

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 dos dados.

• "Considere o usuário ao considerar recursos como o carregamento lento, porque para muitos ele é irritante."
• "Faça o atributo de carregamento lento funcionar com background-image."
• "Os frameworks precisam ter um melhor processamento de recursos pronto para uso."
• "Nós convertemos do carregamento lento há muito tempo. Milhões de imagens e sites "NÃO ESTÃO CARREGANDO", de acordo com os usuários. A equipe resumiu isso como. É difícil para usuários não técnicos descreverem problemas."
• "Quero entender melhor o uso da 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

• "Eu geralmente carrego imagens como planos de fundo no CSS."
• "A tag <img> é problemática e difícil de controlar detalhes específicos, especialmente 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 background-size, background-position e impedir o salvamento da imagem com o botão direito do mouse."

Transparência

• "É 2019. Como os JPGs ainda não têm transparência Alfa?"
• "Eu só uso PNGs para fotos quando preciso de um plano de fundo transparente."

Marcadores de imagem de baixa qualidade (LQIPs, na sigla em inglês)

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

Desempenho

• "Tivemos um problema recente de desempenho com imagens. À medida que o usuário rola para baixo no nosso 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 receber os próximos 60 cards se um usuário continuasse rolando para baixo."
• "Gostaríamos de usar o HTTP/2, mas a maioria dos nossos clientes usa o IE11. Portanto, estamos testando o particionamento de domínio / carregamento de solicitações de dados JSON AJAX de 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 imagem menor sem precisar fazer o download de imagens para calcular as dimensões.

• "Desculpe pelo tamanho intrínseco. Parece melhor usar altura/largura."
• "Procurando uma maneira de gerar menos tamanhos, atualmente 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 web.dev :)."

Imagens de alta qualidade e alta resolução

• "How to download compress images without losing DPI quality?"
• "Somos uma empresa de gerenciamento de documentos. Nossos apps processam MILHÕES de imagens digitalizadas em alta resolução, geralmente TIFF ou PDF."
• "É uma chatice. Arquivos de imagem de alta resolução são necessários para o formato de impressão e precisam ser otimizados para a Web. É trabalhoso redimensionar imagens para a Web, mas é um problema se os autores só fornecem arquivos leves para imagens destinadas a publicações impressas. Acabamos mensagens confusas sobre os requisitos para envio de manuscritos com arte. Depois, temos fluxos de trabalho complexos para processar esses materiais."

Capacidade do navegador

• "O recurso de corte automático de src responsivo do navegador como [built-in] seria muito útil, porque é demorado cortar todas as imagens para quatro tamanhos e escrever toda a marcação. Se pudermos fazer upload de uma foto grande e escrever uma tag de imagem simples, os navegadores vão criar automaticamente os vários atributos src que seriam um recurso vencedor."
• "Pessoalmente, estou tendo dificuldade para evitar reflows de página quando a imagem com é definida por 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 adaptativas/tag de imagem. A melhor maneira de evitar isso é usar o "hack de padding negativo" para uma proporção de imagem fixa e posicionar a imagem dentro dessa caixa de proporção. Um melhor suporte a navegadores/processamento de imagens responsivo seria muito útil!"
• "Desative a "reprodução automática" do GIF recuperando 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 imagens. Geralmente, 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 entrega de conteúdo (CDNs) otimizam a distribuição e o envio de imagens e outros recursos do site e, às vezes, oferecem serviços de otimização, como o envio automático de imagens WebP para navegadores compatíveis em vez de PNG ou JPEG, sem alterar a extensão do arquivo.

• "O Google deveria oferecer um CDN sem custo financeiro como o Cloudflare."
• "Talvez mais ferramentas para configurar o dimensionamento dinâmico e as CDNs com provedores diferentes seriam boas."
• "Uma única imagem supercomprimida de tamanho grande é uma solução muito decente sem custo extra de produção. Você precisa de imagens com 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 computador não retina. Acho que os CDNs de redimensionamento de imagens são uma solução muito ruim, embora eu já tenha usado isso no passado. O CMS precisa processar o redimensionamento e, se isso for muito complexo para configurar, uma única solução é um bom compromisso (por enquanto)."
• "O CloudFlare dimensiona automaticamente nossas imagens para corresponder melhor à tela do usuário. Assim, podemos economizar no tempo de carregamento, porque as imagens são carregadas em relação à tela do usuário. Por exemplo, se um usuário estiver em um smartphone, ele não será carregado em um segundo plano do tamanho de um computador."
• "A Cloudflare faz isso em segundo plano sem que precisemos fazer nada além de marcar uma caixa no painel de configurações."
• "Só para reiterar, o único motivo pelo qual posso usar srcset etc. é pela facilidade do Cloudinary. Mas o Cloudinary fica caro muito rápido. Isso parece um grande problema 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á 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 usando um CMS. Os autores tendem a configurar imagens com dimensões diferentes e esperam que elas não sejam reduzidas nem dimensionadas. Não sei se posso definir max-width ou max-height nas imagens"
• "Estou usando o gatsby-image nos últimos projetos e não quero mais mudar."
• "As imagens geralmente são a parte mais difícil, porque são colocadas no CMS pelo usuário final. Elas podem usar qualquer tamanho, formato e, às vezes, a imagem original no formato ideal e as dimensões não estão disponíveis."
• "As imagens são difíceis de manter, já que nosso sistema é autoatendimento, e 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 e computadores.
• "Eu ajudo as pessoas a otimizar os sites delas (WordPress). Os maiores problemas que encontrei com imagens são: dependência de um CDN ou plugins para criar WebP. O srcset/picture precisa ser codificado corretamente pelos desenvolvedores de temas. A maioria dos plug-ins de carregamento lento carrega lentamente, o que resulta em uma experiência do usuário ruim. As imagens de plano de fundo são difíceis de carregar com carregamento lento."

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 para ser adotada por muitas empresas da Fortune 500. Por 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 ou informados pelo usuário final (UX). Isso dificulta a gravação de imagens da Web."
• "Custos elevados para criar e gerenciar vários tamanhos e versões."
• "Eles ocupam muito espaço no nosso servidor."

SEO

• "É difícil encontrar o equilíbrio entre a qualidade aceitável da imagem e o tamanho do arquivo. Por um lado, quero um carregamento rápido para o benefício do SEO, mas, por outro, imagens de baixa qualidade prejudicam a interface/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 no blog em resposta a esta pesquisa]
• "Os requisitos parecem mudar constantemente. Como desenvolvedor da Web, isso é extremamente frustrante porque é demorado salvar as imagens. Nós 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 oferecer a melhor solução possível para o cliente e, em vez disso, cria um esforço caro para nós e para eles. Alguns dos nossos clientes de pequenas empresas simplesmente não têm orçamento para continuar corrigindo imagens e salvando-as novamente para atender aos requisitos. Não temos o orçamento para fazer esse trabalho dentro dos pacotes de gerenciamento. 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 seja consistente por um período mais longo."
• "Sim, acho que você entendeu errado a recomendação "Manter as contagens de solicitações baixas e os tamanhos de arquivo pequenos" no Lighthouse. Se um site for veiculado pelo HTTP1.x, sim, mas se for pelo HTTP2, o número de solicitações será menos importante ou nem mesmo um problema se for originado do mesmo nome de host. Tenho um site lite, mas carrego 30 arquivos WebP pequenos de aproximadamente 35 solicitações no total, por HTTP2 no mesmo nome de host. O Lighthouse está sinalizando isso como um problema de "manter a contagem de solicitações baixa e os tamanhos de arquivo pequenos", mas ele é super-rápido e, devido ao HTTP2 no mesmo nome de host, o número de solicitações não é um problema. E sim, os arquivos já são pequenos (a maioria tem entre 1 e 2 KB ou menos). Eu poderia carregar um sprite, mas então mais computação de CSS precisa ser feita. Portanto, atualize o relatório "Mantenha as contagens de solicitações baixas e os tamanhos de arquivo pequenos" no Lighthouse para considerar o HTTP2 sobre o mesmo nome de host."
• "É difícil para as pessoas lembrarem de compactar as imagens."
• "O comportamento entre navegadores continua imprevisível, então as soluções mais simples geralmente são as mais seguras."