O GUIA COMPLETO DE MASTERIZAÇÃO DE OTIMIZAÇÃO DE IMAGEM

A otimização de imagem é uma das etapas mais simples e eficazes que você pode tomar para transformar seu site de bom em excelente.

Não acredite, e você corre o risco de antagonizar seus usuários, prejudicando sua receita e tancando seus rankings de SEO.

A boa notícia é que, graças a uma série de ferramentas modernas, nunca foi tão fácil obter essa parte crucial da otimização geral do site.

Neste artigo, abordaremos o assunto, cobrindo todos os aspectos do que você precisa saber para garantir que o seu site esteja perfurando acima de seu peso quando se trata de servir conteúdo gráfico.

Uma Visão Geral dos Tipos de Arquivo de Imagens Online

Como qualquer pessoa que já tenha passado algum tempo na caixa de diálogo Salvar como no Photoshop pode confirmar, existe uma incrível variedade de formatos de arquivos de imagem perdidos no mundo.

Quando se trata de colocar essas imagens on-line, no entanto, estamos lidando com um subconjunto relativamente fixo de opções.

Nosso universo de imagens potenciais pode ser dividido em duas grandes categorias:

1. Gráficos vetoriais : imagens geradas matematicamente a partir de formas geométricas básicas, como pontos, linhas e curvas.
2. Gráficos de quadriculação : imagens compostas por uma grade retangular de pixels .

As imagens com as quais nos preocupamos com a perspectiva de otimização são baseadas em raster, mas vale a pena rever o assunto de gráficos vetoriais antes de começar a trabalhar.

Imagens vetoriais

Devido à sua natureza gerada computacionalmente, os arquivos de imagens vetoriais vêm com uma série de vantagens diretamente fora da caixa:

1. Qualidade da imagem e independência de resolução: as imagens vetoriais podem ser ampliadas e ampliadas para qualquer tamanho sem distorção ou perda de detalhes e serão exibidas perfeitamente em todas as resoluções.
2. Facilmente editável: as imagens vetoriais se prestam extremamente bem à edição e ao ajuste não destrutivos.
3. Tamanho de arquivo pequeno: as imagens vetoriais são compostas por uma série de instruções programáticas, o que significa que eles têm, consequentemente, pequenos tamanhos de arquivo.

Todos os pontos acima têm tradicionalmente feito gráficos vetoriais uma ótima opção para projetar elementos gráficos, como ilustrações, fundos e logotipos.

Do ponto de vista da otimização, eles chegam perfeitamente perfeitos diretamente do portão. O problema até o momento foi garantir o suporte do navegador cruzado para seu uso.

Isso levou à prática ligeiramente estranha de designers criando recursos para um site em pacotes amigáveis para vetores, como o Adobe Illustrator  ou o Sketch , mas depois ser forçado a exportar uma variedade de tamanhos diferentes e formatos não vetoriais para uso on-line.

SVGs ( Scalable Vector Graphics ) são o formato web nativo cuja adoção universal tornaria a vida de todos consideravelmente mais simples a esse respeito. Infelizmente, ainda não estamos lá em termos de suporte.

Dito isto, após anos de progresso incremental, o verdadeiro suporte para o navegador cruzado para o formato está finalmente ao alcance , e os próximos dois anos devem finalmente ver a implantação generalizada de gráficos vetoriais verdadeiros online tornando-se uma realidade.

Até aquele dia chega, porém, é provável que você ainda precise exportar arquivos baseados em vetores para formatos de quadriculação para exibição na web. É para esses formatos que nos voltaremos a atenção.

Imagens Raster

A situação com imagens raster é o oposto do cenário vetorial – aceitação universal do navegador, mas requisitos de otimização pesada.

Existem três tipos principais de arquivos que você passará a maior parte do tempo aqui, e um novato emocionante no horizonte para tomar nota. Vamos examiná-los por sua vez.

Gifs

Inventado em 1987, os GIF ( Graphics Interchange Format ) são o grande velho do mundo da imagem online. O tamanho do arquivo pequeno, a paleta de cores limitada de 256 cores e o suporte à transparência tornaram-se o campo de trabalho da primeira web e uma solução para imagens que contém principalmente texto e / ou áreas de cores planas.

Embora os GIFs tenham feito um retorno com a recente mania de GIFs animados , eles estão cada vez mais perdendo terreno para PNGs .

JPEGs

Os JPEGs têm sido o padrão universal para exibir fotos on-line desde os primeiros dias da web e continuam a ser usados em mais de 70% dos sites em todo o mundo.

Sua base de compressão com perdas os torna excelentes candidatos para otimização pesada e são perfeitos para imagens com uma grande variedade de cores e gradientes. A única desvantagem é a falta de apoio à transparência.

PNGs

Originalmente inventado como resposta a possíveis problemas de licenciamento com GIFs, os PNGs ( Portable Network Graphics ) fornecem compressão sem perdas, suporte de transparência e excelente qualidade de imagem.

O formato de 8 bits faz uma substituição natural para GIFs e resulta em tamanhos de arquivos menores, enquanto as variantes de 24 bits e 32 bits  oferecem uma excelente alternativa aos JPEGs. A desvantagem potencial é o tamanho de arquivo maior que pode resultar.

WebP

Embora os três formatos de arquivo raster discutidos até agora sejam universalmente implantáveis em todos os principais navegadores, faz um tempo que tem havido alguma inovação real no espaço.

Isso está potencialmente configurado para mudar com  o projeto WebP da Google , um novo padrão de imagem proposto que promete reduções de até 25% em tamanho de arquivo . Embora suportado de forma nativa no Chrome, a adoção universal desse formato continua a ser bem diferente .

Você pode mergulhar mais profundamente nos formatos de quadriculação individuais na excelente visão geral do Sitepoint .

Para resumir, as imagens vetoriais são ideais para muitos casos de uso, mas em termos de criação de conteúdo do dia-a-dia, você usará uma mistura de GIFs, PNGs e JPEGs no futuro previsível.

Vamos explorar as razões pelas quais a otimização desses tipos de arquivos é tão importante.

O caso para otimização

A velocidade com que a revolução da banda larga atingiu a maioria dos países levou a uma certa abordagem laissez-faire para a otimização de imagem em alguns círculos.

Afinal, quais são outros poucos kilobytes entre amigos, quando a maioria dos usuários tem a capacidade de transmitir eventos esportivos ao vivo em seus dispositivos móveis? Não passamos por o motivo de ter que nos preocupar com tais trivialidades?

A resposta, infelizmente, é um “não” muito firme. A velocidade é importante; Nenhum lugar mais do que no celular.

A Nova Realidade Móvel

O ponto de inflexão foi bem e verdadeiramente cruzado nesta fase – o celular é a direção na qual toda a web está indo inexoravelmente .

Isso tem duas considerações imediatas sobre a otimização da imagem:

1. As imagens não podem mais ser consideradas como meros olhos para preencher espaço em branco em dispositivos grandes. Eles estão lá para fazer um trabalho no contexto de imóveis de tela extremamente limitada.
2. Embora em constante aumento , as taxas de download móvel ainda ficam aquém daqueles disponíveis na área de trabalho e seu uso é medido em taxas potencialmente proibidas . Cada pixel potencialmente conta.

Dado esse contexto mais amplo, vejamos três razões pelas quais a otimização de imagem é um requisito e não um bom-a-ter:

1. Usuários exigem páginas rápidas

A pesquisa do Arquivo HTTP mostra que, ao lado do abuso de Javascript, as imagens são a principal causa de tamanhos médios de páginas da web pesando na marca de 1,25 MB. Está muito longe dos dias do 5K Challenge .

Esta obesidade rastejante em termos de tamanho da página tem um custo:  73% dos usuários de internet móvel informam que tiveram problemas com os tempos de carregamento da página em seus dispositivos.

Enquanto isso, metade dos usuários da Web dizem que esperam que um site seja carregado em dois segundos. Infelizmente, o tempo médio de carregamento da página em um dispositivo móvel permanece em algum lugar em torno de sete segundos. As expectativas simplesmente não estão sendo atendidas.

Para fazer uma longa história curta, obstruir seu site com imagens desnecessariamente enormes significa que você arrisca antagonizar seus visitantes antes mesmo de terem tido a chance de se envolver com seu conteúdo.

2. Imagem Bloat Can Tank Search Engine Rankings

O Google confirmou o que muitos tinham suspeitado desde 2010: a velocidade do site é um fator de classificação oficial .

Sua página deve ser carregada em um segundo ou menos. Esse extra 200K escondido em sua imagem de cabeçalho não é simplesmente uma discórdia para usuários móveis; Isso poderia impedir que eles sempre encontrassem seu site para começar.

3. Páginas lentas danifica diretamente a linha inferior

Combine os dois pontos anteriores e você tem uma receita para águas financeiras agitadas.

A pesquisa da Strangeloop mostra que apenas um atraso de um segundo no tempo de carregamento da página pode levar a uma queda de conversão de 7% ou mais.

Você está realmente em posição de afastar esse tipo de dinheiro simplesmente por não otimizar sua produção?

A necessidade de otimização é esperançosamente aparente até agora. Antes de explorar a gama de opções à nossa disposição com imagens prontas na web, vamos falar sobre alguns passos simples de preparação de alto impacto que podem fazer toda a diferença em termos de otimização posterior.

Redimensionar cedo

As câmeras digitais modernas avançaram para um grau incrível, mas, em alguns aspectos, eles foram quase longe demais. As imagens padrão produzidas por até um iPhone são muito maiores do que qualquer coisa que você precisa para o WordPress.

Dependendo das configurações da sua câmera, eles podem chegar como grandes 7.360 x 4.912 pixels e pesar em mais de 30mb. Redimensionar para uso na web é um primeiro passo essencial para controlar as questões.

Você precisará de uma ferramenta para fazer isso, é claro, e as opções aqui são diversas e variadas.

Se você estiver em um orçamento apertado, nada é bom. Paint for Windows e Preview for Mac podem funcionar como ferramentas de redimensionamento de imagem perfeitamente adequadas em uma pitada.

Se você está procurando um pouco mais de sofisticação – enquanto ainda mantém sua carteira com segurança no bolso – o Gimp  oferece uma solução de desktop livre, de plataforma  aberta, de código aberto. As opções somente on-line, como  Pixlr e Fotoflexer , também estão disponíveis.

Movendo-se para a arena de soluções comerciais, o  Pixelmator no Mac ou o IrfanView no Windows oferecem uma excelente funcionalidade geral a preços acessíveis.

O padrão-ouro permanece, naturalmente, o Photoshop. As boas notícias aqui são que o anúncio relativamente recente da Adobe de pacotes do  Creative Cloud  em toda a sua suíte de software finalmente colocou essa ferramenta de manipulação de fotos de melhor qualidade dentro do alcance financeiro de mais mortal.

Independentemente da solução que você acabou, tenha sempre em mente os seguintes pontos de vista quando redimensionar suas imagens:

• Trabalhar em uma cópia da imagem (em vez do arquivo original original de alta qualidade) dá espaço para experimentar e mudar de idéia.
• Certifique-se sempre de manter a relação de aspecto da imagem original sem introduzir distorção óptica ao redimensionar.

Cortar cortes de ambos os caminhos

Ao lado do redimensionamento das dimensões gerais da sua imagem, o outro passo preparatório crucial que você deveria tomar é o cultivo.

Cortar a gordura visual consegue dois propósitos:

1. O tamanho do arquivo irá naturalmente cair, e
2. Suas imagens irão empacotar mais um soco visual.

As pessoas boas da The Next Web têm um ótimo tutorial para fazer você ir focando os elementos-chave da sua imagem .

Preparando-se para Retina

Antes de avançarmos para comprimir nossas imagens, vamos abordar brevemente o assunto de otimização para dispositivos prontos para retina.

Não está claro sobre o que a retina significa neste contexto? Consulte este guia útil  antes de irmos mais longe.

Retina Display  será cada vez mais a nova norma para dispositivos de todos os tamanhos, e sua porcentagem do tráfego do site só vai subir nos próximos anos.

A menos que você queira que suas imagens cuidadosamente recortadas e redimensionadas apareçam agitadas e pixeladas em dispositivos modernos, você precisará levar isso em consideração.

O blog Jetpack  fornece um ótimo exemplo visual das diferenças em jogo aqui:

O que isso significa na prática é que você precisa produzir duas versões de suas imagens: uma em seu requisito de tamanho de pixel base e uma versão 2x para retina. Por exemplo, um JPEG de 350px x 350px também seria emitido a 700px x 700px.

Gerenciar a exibição dessas versões no seu site WordPress pode ser realizado rolando sua própria solução usando Retina.js , ou usando o WP Retina 2x .

Compressando suas imagens

Por esta etapa, abordamos a preparação de nossas imagens por meio de redimensionamento e criação criativa e permitiu que elas possam ser exibidas em uma variedade de dispositivos.

É hora de voltar para o coração do assunto quando se trata de otimização: compressão de imagem.

A compressão é simplesmente o processo de remoção algorítmica de informações de imagem que o olho humano não pode perceber. É um passo essencial na otimização e pode diminuir drasticamente o tamanho das imagens.

Dos três formatos de arquivo raster que mencionamos anteriormente, os JPEG são geralmente os melhores candidatos para a compressão. Em contraste com PNGs e GIFs, eles usam compressão com perdas, o que significa que ganhos maiores na redução de tamanho de arquivo potencialmente oferecidos.

A desvantagem é que você terá que verificar cuidadosamente os resultados pós-compressão para artefatos visuais indesejados, conforme mostrado na imagem abaixo.

Você está apontando para um balanço do tamanho de arquivo mais baixo com a qualidade de imagem mais alta possível. Para uma discussão completa dos trade-offs envolvidos neste processo, consulte a  visão geral da compressão de imagem iluminada do HTML5Rocks .

Devemos enfatizar aqui que os PNG e os GIF também podem beneficiar da compressão; É simplesmente que as reduções no tamanho do arquivo serão menores. A seguinte imagem do TinyPNG mostra que os ganhos a serem feitos ainda são consideráveis:

Ferramentas de compressão de imagem

Quando se trata de realmente executar a compressão, há uma série de opções à sua disposição.

Se você estiver usando um dos editores de imagem offline que mencionamos anteriormente, você pode simplesmente ajustar as opções de Salvar incorporadas . Um guia detalhado sobre como fazer isso no Photoshop está disponível nesta peça .

Há também uma série de aplicativos off-line para as principais plataformas dedicadas inteiramente à compressão de imagens. As principais opções aqui são  ImageOptim  no Mac ou  Trimage  em Mac e Windows.

Finalmente, existem várias soluções disponíveis on-line com os principais concorrentes, incluindo TinyPNG  e  Kraken .

Nós, claro, também fizemos nossa contribuição significativa neste campo aqui na WPMU sob a forma de WP Smush .

Com o risco de soprar nossa própria trombeta, vejamos essa última opção com mais detalhes.

WP Smush

Desde a adoção do projeto WP Smush em 2013, investimos um tempo e uma energia consideráveis para torná-lo a ferramenta de otimização de imagem baseada em WordPress, com mais recursos.

A recente queda do Yahoo pela API que tem tradicionalmente alimentado seus serviços forçou-nos a avançar no prato e levar todo o projeto em casa.

Nós redesenhamos o plugin desde o início , fazendo melhorias em todos os níveis no desempenho em funcionalidades com as versões gratuita e Pro .

Nós colocamos recentemente o WP Smush Pro à prova , comparando seus resultados com outras ferramentas de otimização de imagem premium, Kraken e EWWW e WP Smush saiu no topo.

Se você está procurando um plugin com todas as funções para cuidar da maior parte do levantamento de otimização pesada dentro do próprio WordPress, recomendamos que tente.

Otimizando suas imagens para SEO

Até agora nos concentramos nas propriedades de exibição das imagens, mas a otimização de SEO é de igual importância para o sucesso geral do seu site. Vamos rever rapidamente o básico:

• Nomes de arquivos:  use nomes de arquivos descritivos que mostram suas palavras-chave em vez de nomes genéricos sem sentido. Por exemplo, use “green-child-bicycle.jpg” em vez de “BX8A132E.JPEG”.
• Etiquetas Alt:  forneça uma tag alt sucinta e não spam para cada imagem por razões de SEO e maior acessibilidade. Por exemplo, “alt = ‘Vista lateral da bicicleta verde de uma criança'”.

Você pode encontrar informações mais detalhadas sobre o assunto aqui no site ou mais no excelente guia da Yoast para otimizar imagens para SEO .

Otimizando além do WordPress

Todo o trabalho de otimização de imagem no mundo, obviamente, faz pouca diferença se o seu site for dificultado por problemas de desempenho em outros lugares da pilha. É um assunto enorme para enfrentar, mas comece com o seguinte:

•  Ferramentas de teste de velocidade : benchmark seu desempenho atual com ferramentas padrão de teste de velocidade do site .
•  Configuração de servidor / hospedagem : Benchmark seu provedor de hospedagem e garantir o seu servidor é otimizado para o WordPress .

Você também pode aproveitar o poder das redes de entrega de conteúdo , como o próprio Photon Cloudflare ou WordPress para garantir que suas imagens otimizadas sejam entregues o mais rápido possível.

Coloque otimização de imagem em um horário

Depois de dominar os fundamentos descritos acima, bloqueie os benefícios aproveitando o poder das listas de verificação  para transformar a otimizaçãode imagem em um processo repetido e documentado que pode ser realizado por você ou qualquer membro de sua equipe.

Use a seguinte seqüência de seis passos – ajustando de acordo com as necessidades do seu site específico à medida que você vai – e você estará em boa forma:

1. Certifique- se de selecionar o formato de imagem certo para o trabalho a ser feito. Selecione sempre o formato de imagem certo para o trabalho.
2. Coloque e redimensione imagens para obter o máximo impacto visual e tamanho mínimo de arquivo.
3. À prova de futuro, seus artigos, produzindo variantes de imagem para a exibição padrão e retina.
4. Aproveite a compressão de imagem e prova visual os resultados. Nossa ferramenta WP Smush deve ser sua primeira ligação telefônica aqui.
5. Aproveite o tempo extra para otimizar todas as imagens para o SEO para pegar algumas frutas de baixa suspensão em termos de tráfego.
6. Considere alavancar o poder de um CDN para entrega de imagens para ganhos adicionais.

Conclusão

Esperamos que este artigo lhe tenha dado uma sólida visão geral sobre o tema da otimização de imagem no WordPress e além. É um passo essencial para incluir no fluxo de trabalho de criação de conteúdo e um dos métodos mais acionáveis lá para adicionar melhorias instantâneas ao seu site em rankings de pesquisa, engajamento de usuários e aumento do tráfego móvel.

Nós presos ao tentado e verdadeiro em termos de técnicas acima, mas as opções disponíveis estão mudando todos os dias. Deixe-nos saber nos comentários abaixo se você tiver algumas dicas ou truques próprios para compartilhar que possam ser úteis para outros usuários do WordPress.