Imagens tornam os sites mais lentos
As imagens reduzem o desempenho de carregamento de páginas de muitos sites. Ferramentas de auditoria como o Lighthouse do Google podem informar rapidamente quantos segundos o senhor pode economizar ao otimizar suas imagens. Quando o senhor estiver entregando para desktops ou dispositivos Android com o navegador Chrome, uma solução rápida é converter suas imagens em WebP. Isso pode economizar até 80% da carga útil da imagem.
Aceleração de usuários do Apple Safari
Mas e quanto aos iPhones ou iPads da Apple ou qualquer laptop que esteja executando o navegador Safari? Para muitas empresas ou organizações, os dispositivos da Apple podem representar mais de 50% do tráfego. Infelizmente, o Apple Safari não é compatível com WebP. No entanto, um formato de arquivo de imagem pouco conhecido, mas poderoso, chamado JPEG 2000 (mimetype image/jp2) é compatível desde o Safari 5 e o iOS 5, com algumas exceções. O truque é identificar os usuários do Safari e fornecer rapidamente imagens no formato JPEG2000.
O que é JPEG 2000?
O JPEG2000 é um padrão de imagem criado no ano 2000. O Joint Photographic Experts Group (JPEG) pretendia que o novo formato substituísse o padrão JPEG, ainda mais antigo, criado em 1992. Até o momento, sua adoção é limitada. O padrão realmente se popularizou nos setores em que o arquivamento digital é importante. O JPEG2000 é o formato preferido para armazenar imagens de satélite, raios X, imagens arquitetônicas, arte e assim por diante, graças à sua maior profundidade de bits, compactação sem perdas e compactação flexível.
No espaço da Web, o navegador Safari da Apple suporta JPEG2000. Sua eficácia na otimização de imagens é impressionante. Analisando milhões de imagens originais diferentes, se o senhor redimensionar, compactar e usar o formato de arquivo JPEG 2000, poderá economizar uma média de 59% da carga útil do arquivo.
Fonte: ImageEngine – Setembro de 2019
Como atender aos usuários do Apple Safari com imagens responsivas
Técnicas de imagens responsivas podem ser usadas para otimizar as imagens para os usuários do Safari. Embora existam maneiras de identificar o Safari, os desenvolvedores precisarão converter proativamente as imagens para o formato JPEG 2000. Isso aumenta a complexidade do fluxo de trabalho, principalmente para sites com muitas imagens que são atualizadas continuamente.
Imagens responsivas, conforme definido no Grupo de Trabalho W3C, são marcações que permitem que o navegador solicite URLs de imagens diferentes em resposta a diferentes condições ambientais. Por exemplo, uma tela de desktop apresenta condições ambientais muito diferentes das de um smartphone ou tablet. Um navegador deve ser capaz de responder a essas condições e exibir dinamicamente uma imagem ideal.
Essas condições ambientais são normalmente expressas para o navegador por meio de recursos de mídia CSS. Alguns recursos de mídia comuns são a proporção de pixels do dispositivo (DPR) e a largura máxima da tela.
Para atingir seus objetivos, o grupo de trabalho introduziu vários novos elementos e atributos de marcação HTML para ajudar com imagens responsivas. Isso inclui adicionar os tamanhos e atributos ao elemento <img>. O grupo de trabalho também adicionou um elemento <picture> totalmente novo.
Para o JPEG 2000, o senhor pode usar o elemento picture para implementar a troca de formato de arquivo de imagem. O navegador avaliará as fontes e seus tipos em ordem sequencial. Por exemplo, se o Safari encontrar um tipo next-gen compatível (por exemplo, jp2), ele selecionará esse srcset. Caso contrário, o padrão será a imagem especificada no img src. Neste exemplo, é um png.
<picture> <source srcset="https://davidwalsh.name/logo.webp" type="image/webp"> <source srcset="https://davidwalsh.name/logo.jp2" type="image/jp2"> <img src="https://davidwalsh.name/logo.png" alt="logo"> </picture>
Além desse novo código, o desenvolvedor nos bastidores precisará gerar, armazenar e gerenciar as variantes de última geração da imagem original. E à medida que o senhor começa a adicionar direção de arte, resolução e funcionalidade de dimensionamento de imagem às imagens responsivas, a complexidade do código começa a crescer exponencialmente. Embora a abordagem de imagem responsiva seja eficaz, há uma maneira mais fácil.
Uma maneira muito mais fácil de atingir essas metas de otimização de imagem é usar uma CDN de imagem que inclua o JPEG 2000 automaticamente. O que é uma CDN de imagens? É uma CDN que pode pegar todo o seu conteúdo mestre original existente, otimizá-lo, armazenar as imagens em cache e entregá-las. Isso simplifica muito um processo de otimização de imagens bastante complicado.
A maximização eficaz da otimização requer uma grande quantidade de informações sobre o dispositivo solicitante. Várias CDNs de imagens conseguem isso de diferentes maneiras. ImageEngine é a única CDN de imagens que possui servidores de borda com reconhecimento de dispositivo. Isso significa que a rede identifica instantaneamente as especificações exatas do dispositivo solicitante na solicitação http inicial. Instantaneamente, o servidor de borda pode servir imagens otimizadas que tem em seu cache e que são adaptadas especificamente para o dispositivo. No caso dos iPhones, isso significa que o ImageEngine pode fornecer instantaneamente imagens JPEG 2000 para iPhones.
Quanto à codificação, depois que o senhor tiver direcionado o tráfego de imagens para o nome de host de origem estabelecido em sua conta do ImageEngine, o senhor pode usar uma tag de imagem como esta:
<img src="https://img.foo.com/logo.png" alt="logo">
Neste exemplo, a tag image encaminha a solicitação ao imageEngine quando o domínio img.foo.com é CNAMEd para o ImageEngine como parte da configuração da conta. Ele pegará o “logo.png” e fornecerá automaticamente o formato de arquivo de imagem ideal (por exemplo, JPEG 2000) para o navegador e o dispositivo.
Integração de uma CDN de imagem
A configuração de uma CDN de imagem é simples se o senhor estiver familiarizado com o gerenciamento de DNS e puder colocar um registro CNAME para direcionar o tráfego para a CDN de imagem. Depois de apontar a CDN de imagens para o URL das imagens principais, a CDN de imagens extrairá e otimizará as imagens principais somente quando necessário. Isso significa que o senhor não precisa mover ou carregar suas imagens; a CDN de imagens gerenciará a recuperação, a otimização e o armazenamento em cache. O ImageEngine também oferece suporte a certificados SSL para que a segurança possa ser mantida.
E quanto à qualidade da imagem?
Surge um ceticismo natural em relação à degradação da qualidade da imagem. Certamente, se o senhor comprime uma imagem, perde a qualidade. Para os puristas, a resposta é sim. No entanto, a maioria das CDNs de imagem calibra sua configuração de qualidade para que nenhuma diferença de qualidade seja perceptível, principalmente em dispositivos móveis como iPhones. Uma CDN de imagens como a ImageEngine combina seu conhecimento da resolução da tela do dispositivo e dos pixels por polegada (PPI) com um estudo rigoroso de métricas de qualidade como Similaridade estrutural Index Method (SSIM) para gerar imagens de qualidade quase idêntica, mas com um tamanho de arquivo muito menor.
Em um futuro próximo, a inteligência artificial do ImageEngine começará a analisar o conteúdo da imagem para ajudar na otimização. O reconhecimento de texto e rostos sobrepostos ajudará a garantir a qualidade e auxiliará na direção artística do corte automático.
Benefícios da otimização de imagens
Para a maioria dos sites, a economia de carga útil de imagem varia de 60 a 80%, o que é típico de uma CDN de imagem que atende JPEG 2000 de forma eficaz. Isso normalmente equivale à aceleração do carregamento da página em vários segundos, frequentemente até 50% mais rápido.
Essa economia no carregamento da página traz benefícios colaterais para muitos sites de comércio eletrônico. O tempo de carregamento da página influencia as classificações de página de SEO. O carregamento mais rápido da página também está diretamente relacionado a taxas de rejeição mais baixas e métricas de engajamento mais altas, como tempo no site e páginas visualizadas. E para muitas empresas de comércio eletrônico, essas métricas estão diretamente ligadas às conversões de vendas.
Primeiros passos
A maneira mais fácil de verificar se o JPEG 2000 funcionará para o senhor é iniciar uma avaliação gratuita com uma CDN de imagens. ImageEngine oferece uma avaliação gratuita de 30 dias sem riscos que não exige cartão de crédito. E se o senhor acabar usando o serviço, um recurso interessante é que, ao contrário de outras plataformas de gerenciamento de imagens, eles não cobram pelo número de transformações de imagens. Em vez disso, eles cobram pelos GBs otimizados entregues (eles os chamam de bytes inteligentes). Portanto, quanto maior for a otimização, menor será sua conta.