A otimização de imagens começa escolhendo o melhor formato de arquivo para suas necessidades. Isso vai além de PNG vs. JPEG. Não existe um formato de arquivo para controlá-los todos.
As necessidades de imagem de todos são diferentes, até mesmo as diferentes imagens dentro de um único site têm requisitos diferentes. Mas não se preocupe, nós temos coberto.
Neste post, vou ensiná-lo a escolher o melhor formato de imagem para o seu site WordPress. Vamos ver os antigos favoritos, JPEG, PNG e GIFs e alguns dos da próxima geração, como WebP e SVG. Nós vamos cobrir seus pontos fortes, pontos fracos e casos de uso ideais para que você possa otimizar suas imagens como um profissional. Eu também montei uma folha de cola para download em PDF para você se referir! Clique aqui para pegar sua cópia
Você nunca teve que compartilhar dados com seus irmãos e mostra
Por que escolher o formato de arquivo correto é importante? Porque cada vez mais visitantes visitam sites em dispositivos móveis. Não são apenas as velocidades de rede relativamente mais lentas quando comparadas às redes dedicadas, mas nem todos têm dados ilimitados.
E como o Google penaliza as páginas que são carregadas muito lentamente , mostrando-as mais baixas nos resultados de pesquisa, melhorar os tempos de carregamento não é uma maneira fácil de aumentar o tráfego, as vendas e as conversões.
Quando você escolhe o formato de imagem errado, você pode inadvertidamente exibir uma imagem maior do que o necessário. Recursos adicionais de arquivos de imagem (como transparência), detalhes desnecessários e muitas cores adicionam inchaço às suas imagens. Às vezes, estas são necessárias e outras vezes não são. Se a sua imagem não tiver transparência, por exemplo, você realmente não estará dando nada se escolher um tipo de imagem que não ofereça suporte à transparência.
A chave é apenas adicionar o que você precisa.
Escolhendo o tamanho ideal do arquivo
Você também precisa considerar a imagem em relação ao restante de sua página para escolher o tamanho ideal de arquivo. A página da web média está atualmente perto de 2MB, então você quer ficar abaixo desse limite para ter um site relativamente rápido. Isso significa que você precisa analisar o total de todos os recursos em seu site, não apenas imagens.
Uma grande imagem de herói detalhada que tenha 1 MB não será um grande problema se for a única imagem em uma página com maior parte do texto; no entanto, se você for exibir 10 imagens grandes em uma página com todos os 1MB, será uma tarefa difícil de carregar. Você pode comprometer exibindo menos imagens ou mostrando todas elas em um tamanho menor.
Como compactar imagens: Lossy vs Lossless
Para escolher o formato de imagem ideal, você precisa entender a diferença entre a compactação com e sem perdas. Idealmente, sua imagem deve utilizar esses dois processos algorítmicos para produzir o menor tamanho de arquivo. Nem todos os formatos suportam ambos.
Com a compactação com perdas, alguns dos seus dados serão perdidos para sempre. Compressão de imagem com perdas remove permanentemente os dados da imagem e degrada a imagem no processo.
Isso não é tão ruim quanto parece, já que alguns desses detalhes adicionais podem nem ser percebidos pelo olho humano .
Por outro lado, a compactação de imagens sem perda preserva os dados para que nada seja perdido. Algoritmos sem perdas guardam todos os dados necessários para recriar a imagem exatamente.
Idealmente, sua imagem passará primeiro pela fase de compactação com perdas e depois por uma fase sem perdas, onde o que resta será otimizado.
O Guia Completo para Mastering Image Optimization
JPEG
JPEG significa Joint Photographic Experts Group e foi projetado para ser usado em fotos. Como formato de arquivo padrão para a maioria das câmeras digitais e telefones celulares, você encontrará praticamente todos os lugares.
JPEGs tem várias vantagens:
- JPEGs podem conter milhões de cores para produzir imagens vivas e ricas
- Eles produzem um tamanho de arquivo relativamente pequeno, mesmo com tantas cores
- Eles são suportados em todos os navegadores modernos.
Não admira que o JPEG seja um formato de arquivo tão popular para a web.
Como o JPEG foi projetado para fotos estáticas, ele não suporta transparência ou animação.
Compressão JPEG
Os JPEGs utilizam compactação com perdas para manter o tamanho do arquivo pequeno.
A compactação JPEG não é uma configuração total ou nenhuma. Você pode ajustar a taxa de compressão entre 0% (compactação pesada) a 100% (sem compactação) para criar o equilíbrio ideal para sua situação.
Geralmente, a compactação de uma imagem entre 75 e 100% manterá a integridade e a alta qualidade da imagem, mas em 75% a imagem é metade do tamanho. Metade! É por isso que a maioria das redes sociais comprime suas imagens entre a faixa de 70 a 85%. Facebook, por exemplo, comprime suas imagens 85% .
Então, quando você estiver preparando suas imagens no Adobe Photoshop ou no Lightroom, não tenha medo de mover o controle deslizante.
Basta olhar para estas duas imagens. Um não foi comprimido e é 229K, enquanto o outro foi comprimido 75% e é 95k.
Você pode dizer qual é qual?
Existe um formato JPEG sem perdas chamado JPEG-2000, mas não é amplamente adotado.
Além disso, você deve sempre evitar recomprimir uma imagem compactada. Você já fez uma cópia de uma fotocópia ou fez o download e reimpediu uma imagem na mídia social? A qualidade fica distorcida porque você está passando por outra rodada de compactação.
(A propósito, a Opção 1 é a imagem compactada)
Como corretamente redimensionar e servir imagens escalonadas com o WordPress
JPG vs. PNG
JPEGs são uma opção fraca para imagens com alto contraste. É por isso que as capturas de tela JPEG com texto preto em fundos brancos tendem a ficar embaçadas.
JPEG é o tipo de arquivo de imagem ideal para fotografias, especialmente aquelas sem texto, quando um arquivo de imagem menor tem prioridade na qualidade de imagem. Por exemplo, grandes imagens de heróis, destacando a fotografia profissional
JPEGs são significativamente menores que PNGs. Nossa imagem do cenário acima como PNG é 329k, quase 3,5x maior que a versão compactada.
PNGs
Vamos mergulhar no outro tipo de arquivo de imagem favorito da web, os PNGs. PNGs foram projetados para substituir o GIF por causa de problemas de licenciamento, daí as semelhanças funcionais.
A força do PNG é seu algoritmo de compressão sem perdas. Você não perde nenhum dado durante o processo de compactação para que a imagem possa ser recriada sem perda de qualidade. Como resultado, os PNGs preservam os detalhes nas imagens, mesmo quando se trata de texto. A desvantagem é que os tamanhos de arquivos PNG tendem a ser maiores em relação a outros tipos de arquivos de imagem devido a todos esses dados.
Outra vantagem é o suporte à transparência. Não apenas você pode criar um arquivo de logotipo com um plano de fundo transparente, mas também pode criar gradientes avançados de transparência e muito mais com PNGs.
Os três tipos de PNGs
Existem três tipos de PNGs: PNG-8, PNG-24 e o misterioso PNG-32. Tecnicamente, também há PNGs animados, mas não entraremos nisso porque ainda não são amplamente suportados.
O PNG-8 é como o GIF dos PNGs. O PNG-8 suporta 256 cores indexadas, mas em um tamanho de arquivo muito menor, ainda menor do que seu equivalente em JPEG. Ao contrário dos GIFs, o PNG-8 tem um suporte de animação ruim. O PNG-8 é ideal para gráficos da Web simples com fundos transparentes, como logotipos e ícones do site.
Enquanto o PNG-8 suporta cores de 8 bits, o PNG-24 suporta cores de 24 bits, o que significa suporte para 16 milhões de cores. YAS! O PNG-24 é mais parecido com um JPEG, mas em um tamanho de arquivo significativamente maior. Mas a qualidade de imagem do PNG-24 é excelente, mesmo quando ampliada, o que a torna ideal para fotos de comércio eletrônico, bem como capturas de tela ou imagens com texto.
Se você criar PNGs na caixa de diálogo Salvar na Web do Photoshop , não verá o PNG-32 listado como uma opção, mas o PNG será convertido silenciosamente em PNG-32 se você adicionar suporte à transparência. Por que é que?
1,6 milhão de super-heróis do WordPress lêem e confiam em nosso blog. Junte-se a eles e receba postagens diárias na sua caixa de entrada – grátis!
Os PNG-32s suportam cores de 24 bits com um canal alfa adicional de 8 bits para recursos avançados de transparência. Os PNG-32s foram projetados para ter a capacidade de criar imagens avançadas com gradientes de transparência.
Esses recursos avançados significam que o PNG-32 produz tamanhos de arquivo muito maiores. Se você não está criando uma imagem que precisa de transparência complexa, fique com o PNG-24. Se você está criando uma sobreposição de imagem que se desvanece para nada, então isso é um trabalho para o PNG-32.
Você pode ver um exemplo aqui. A imagem que criei no Photoshop tem um gradiente transparente com duas cores que desaparecem da opacidade total para concluir a transparência incolor. Para ilustrar isso, fiz o segundo plano atrás da imagem em preto usando style="background: #222"
.
Você pode ver como o fundo preto afeta como a imagem é exibida porque escurece as cores em todo o gradiente.
Para o PNG-8 acima, esse efeito é distorcido. As imagens PNG-8 suportam apenas um nível de transparência, portanto, a transparência aparece apenas em uma faixa distorcida na parte superior.
WebPs
Não seria ótimo se você pudesse combinar o melhor dos PNGs e JPEGs? O Google pensou a mesma coisa e inventou o formato WebP de código aberto.
WebP pode ser apenas um dos segredos mais bem guardados quando se trata de otimizar imagens. Sites enormes como o YouTube e o eBay já começaram a usá-lo no nível mais baixo para melhorar o desempenho do site.
Existem dois tipos de imagens WebP. Um é conhecido simplesmente como WebP e usa compactação com perdas. Você pode pensar nisso como a versão JPEG do formato WebP. Quando você cria um WebP com perdas em um programa como o Photoshop, você pode escolher a taxa de compactação.
A outra versão é conhecida como WebP Lossless , e é mais como um PNG. Você terá um tamanho de arquivo maior, mas não perderá detalhes.
Ambos os tipos de formatos WebP produzem uma imagem muito menor que suas contrapartes JPEG e PNG. Quanto exatamente?
De acordo com os dados do Google , em média, as imagens do WebP são 25-34% menores do que os JPEGs comparáveis e 26% menores do que os PNGs comparáveis.
Aquilo é enorme! Então, por que ainda não mudamos para as imagens do WebP?
Bem, aqui está a má notícia. Mesmo que o WebP tenha pisado no cenário da imagem em 2010, o Firefox e o Safari não suportaram isso. O Safari ainda não, embora agora que o Firefox subiu a bordo, é mais provável que seja apenas uma questão de tempo. Então, no momento, o WebP não é uma solução totalmente suportada pelo navegador.
Você pode contornar essa limitação servindo o equivalente PNG ou JPEG para visitantes que usam um navegador sem suporte para o WebP.
Quanto à criação desses arquivos WebP legais para o WordPress, você pode usar um plugin para fazer isso por você. Na verdade, o Smush Pro CDN converte imagens em WebP . Se alguém visitar seu site em um navegador compatível com WebP, o Smush converterá suas imagens e exibirá imagens WebP. Se eles estiverem em um navegador que não suporta WebP, eles terão seu JPEG ou PNG diário.
Um conto de dois tipos de gráficos de imagem
Existem dois tipos de gráficos de imagem, vetor e raster.
Imagens vetoriais são geradas matematicamente a partir de uma série de pontos que são conectados por linhas e curvas para formar formas geométricas. Com gráficos vetoriais, uma imagem pode ser redimensionada para qualquer forma, grande ou pequena, sem prejudicar a qualidade da imagem.
Os gráficos raster, por outro lado, consistem em pixels dispostos em uma grade, com cada pixel representando uma cor. Os gráficos rasterizados só aparecem com alta qualidade na resolução em que foram exibidos. Se a imagem for dimensionada para um tamanho maior, ocorrerá pixilation.
SVGs
Vamos esclarecer uma coisa: os SVGs não são, na verdade, um formato de arquivo de imagem. SVG é uma linguagem de marcação que permite criar gráficos bidimensionais. SVGs são mais semelhantes a HTML do que PNGs ou JPEGs.
Os SVGs são tecnicamente baseados em XML e podem ser manipulados e animados com Javascript e CSS. Basta olhar para esta incrível imagem de herói .
Os SVGs também são únicos porque, ao contrário dos formatos de imagem que cobrimos até agora, eles criam imagens vetoriais. Isso significa que as imagens são infinitamente escaláveis e ficam bem em todas as resoluções. O que os torna ótimos para se adaptar a diferentes dispositivos.
Você não obterá essa pixelação que ocorre em outros tipos de arquivo de imagem. No entanto, como os SVGs foram projetados para exibir imagens simples com base em formas geométricas, como logotipos, sinalizadores, gráficos e ícones. Eles não funcionam bem para a fotografia.
Você pode criar SVGs em um programa vetorial, como o Adobe Illustrator, o Inkscape, o Vectr, o SVG-edit ou o Sketch. Se você criar imagens simples, o tamanho do arquivo resultante será muito menor do que uma imagem PNG, JPEG ou WebP, mesmo imagens grandes em altas resoluções. Arquivos SVG complexos negarão essas vantagens.
Embora seja uma linguagem de marcação, o Google indexa SVGs, de modo que eles aparecem em pesquisas de imagens. E eles são compatíveis com todos os navegadores.
Para SVG ou não para SVG?
Se eu vendi você em SVGs e você tentou enviar um para o WordPress enquanto você está lendo este artigo, você deve ter notado que o WordPress não permite SVGs por motivos de segurança.
Mas o WordPress não é o único. Redes sociais como Medium, Tumblr e Facebook também não permitem SVGs.
Você pode tentar contornar isso e modificar seu arquivo de funções para permitir SVGs , mas eu não recomendaria isso. Como os SVGs são uma linguagem de marcação, eles estão abertos à injeção de malware. Se você é um administrador de site e habilita SVGs, mas os autores e colaboradores de seu site não estão cientes dos riscos, eles podem enviar arquivos SVG comprometidos sem saber.
Se você decidir instalar um plug-in para permitir SVGs, só deverá fazer o upload de SVGs de pessoas confiáveis e limitar a capacidade de fazer upload de SVGs para pessoas que saibam como fazer upload de SVGs com segurança.
Gifs
Eu salvei o tipo de arquivo mais famoso por último. Embora seja ótimo para animar piadas de uma forma ironicamente ruim, os GIFs não são bons para muito mais nos dias de hoje.
Você quer saber algo que vai explodir sua mente? Os GIFs animados no Twitter não são mais GIFs! Eles são arquivos WebM.
Porque a verdade é que os GIFs nunca foram projetados para animações. Eles produzem tamanhos de arquivo excepcionalmente grandes. Quanto mais quadros, pior fica. Se você mudar para um arquivo WebM, você terá um arquivo 9 vezes menor e com uma qualidade muito maior . MP4s são outra opção viável que é compatível com todos os navegadores.
Os GIFs têm uma paleta de cores limitada de 256 cores e usam compactação sem perdas. Mas o mesmo acontece com os arquivos PNG-8, em um tamanho de arquivo muito menor e também com transparência.
Assim, talvez o único caso de uso para GIFs seja quando você está tentando exibir algo que seja compatível com navegadores mais antigos que não suportam HTML 5, pareçam ruins de propósito ou tenham efeitos nostálgicos .
O tamanho ideal do arquivo é o menor possível
Embora o uso de imagens em seu site seja excelente, essas 1000 palavras não são baratas! Eles tomam muitos recursos para servir. A melhor abordagem é escolher o formato de arquivo que lhe dá o que você precisa e nada mais.
O WordPress tenta ajudar no departamento de otimização de imagens comprimindo automaticamente as imagens, mas isso não ajuda muito. Para isso, uma ferramenta dedicada como o Smush Pro pode poupar muito tempoe entregar imagens mais rapidamente do que você jamais imaginou ser possível.
Como eu estava escrevendo este post e aprendendo sobre imagens WebP, compressão e outras técnicas de otimização de imagem, fiquei animado em usar meu novo conhecimento para melhorar meu site pessoal. Eu estava prestes a ler um longo tutorial sobre como criar imagens WebP quando descobri que o Smush Pro faz isso com o toque de um botão.
Eu também ativei o CDN Smush e vi o tempo de carregamento da minha página cair. Antes que as imagens de carregamento do Smush Pro levassem 3 segundos em algumas páginas, mas depois de converter em WebPs e usar o CDN do Smush, a coisa seria carregada em menos de um segundo. Eu fiquei impressionado.
Bacana, gostei do conteúdo bem informativo. Porém, arrumem a responsividade para telas 1366×768, uma responsividade mal apresentada em um site que aborda assuntos de front-end tira um pouco da credibilidade.