Como metade dos dados que os visitantes precisam baixar quando visualizam o seu site v\u00eam de imagens, qualquer otimiza\u00e7\u00e3o que voc\u00ea fizer aqui pode ter um grande impacto no desempenho do seu site.<\/p>\n
Na verdade, se suas imagens n\u00e3o estiverem otimizadas, voc\u00ea poder\u00e1 reduzir o peso da imagem em 50-80%<\/strong> seguindo este guia.<\/p>\n Quando se trata de otimiza\u00e7\u00e3o de imagem, existem tr\u00eas t\u00e9cnicas simples.<\/p>\n A primeira e mais eficaz maneira de otimizar suas imagens \u00e9 compact\u00e1-las.<\/p>\n Clique aqui para experimentar ShortPixel por si mesmo<\/a><\/p>\n A compacta\u00e7\u00e3o de imagens \u00e9 o principal meio de otimiza\u00e7\u00e3o de gr\u00e1ficos. Se voc\u00ea seguiu o guia de otimiza\u00e7\u00e3o de foguetes WP<\/a>, estar\u00e1 familiarizado com o conceito de minifica\u00e7\u00e3o apresentado l\u00e1. A compress\u00e3o da imagem n\u00e3o \u00e9 t\u00e3o diferente.<\/p>\n Ao compactar uma imagem, um algoritmo basicamente reescreve o c\u00f3digo na imagem para reduzir o tamanho total do arquivo. Existem dois tipos principais de compress\u00e3o.<\/p>\n A compacta\u00e7\u00e3o sem perdas otimiza suas imagens enquanto mant\u00e9m a mesma exibi\u00e7\u00e3o pixel a pixel. N\u00e3o h\u00e1 raz\u00e3o para pular a compacta\u00e7\u00e3o sem perdas porque ela reduz o tamanho do arquivo sem fazer literalmente nenhuma diferen\u00e7a visual.<\/p>\n Dito isso, eu recomendei que voc\u00ea use compacta\u00e7\u00e3o com perdas em vez disso.<\/p>\n A compacta\u00e7\u00e3o com perdas oferece uma otimiza\u00e7\u00e3o muito maior, mas \u00e0s custas de uma pequena degrada\u00e7\u00e3o da qualidade. No entanto, essa perda de qualidade \u00e9 t\u00e3o pequena que muitas vezes \u00e9 impercept\u00edvel.<\/p>\n A compress\u00e3o sem perdas \u00e9 importante para imagens m\u00e9dicas e desenhos t\u00e9cnicos, mas para imagens exibidas em um site, a compress\u00e3o sem perdas atende facilmente aos nossos padr\u00f5es de qualidade.<\/p>\n Vou recomendar o plugin ShortPixel<\/a> para otimiza\u00e7\u00e3o de imagens que uso aqui no Compete Themes. Inclui compacta\u00e7\u00e3o com e sem perdas, al\u00e9m de compacta\u00e7\u00e3o “brilhante", que \u00e9 uma op\u00e7\u00e3o intermedi\u00e1ria.<\/p>\n ShortPixel compactar\u00e1 automaticamente as imagens conforme voc\u00ea as carrega em seu site, o que pode ser muito conveniente. Estou bastante impaciente durante a edi\u00e7\u00e3o, ent\u00e3o prefiro desligar essa op\u00e7\u00e3o e otimizar as imagens do menu M\u00eddia mais tarde.<\/p>\n A compress\u00e3o autom\u00e1tica no upload pode ser desligada<\/p>\n Voc\u00ea pode usar uma ferramenta como o TinyPNG<\/a> para compactar suas imagens, mas acho mais f\u00e1cil fazer upload das imagens para o meu site como sempre e, em seguida, otimiz\u00e1-las com ShortPixel.<\/p>\n \u00c9 aqui que o ShortPixel<\/a> realmente se destaca.<\/p>\n Se voc\u00ea usar uma ferramenta como o TinyPNG para otimizar suas imagens, voc\u00ea apenas otimizar\u00e1 as novas imagens que enviar para o seu site. E todas as imagens que voc\u00ea j\u00e1 carregou? Como voc\u00ea os otimiza?<\/p>\n ShortPixel tem uma op\u00e7\u00e3o incr\u00edvel de otimiza\u00e7\u00e3o em massa que ir\u00e1 percorrer todas as suas imagens de uma vez.<\/p>\n A imagem acima \u00e9 bastante autoexplicativa, exceto pela parte das “miniaturas menores”. Por que existem 4x mais miniaturas menores e quais s\u00e3o elas?<\/p>\n Voc\u00ea pode n\u00e3o saber disso, mas sempre que carrega uma imagem no WordPress, ele cria automaticamente tr\u00eas tamanhos adicionais (se a imagem for grande o suficiente):<\/p>\n Voc\u00ea pode visualizar e editar as dimens\u00f5es desses tamanhos de imagem no menu Configura\u00e7\u00f5es> M\u00eddia.<\/p>\n Aqui est\u00e1 o problema …<\/p>\n Digamos que voc\u00ea comprima uma imagem e a carregue em seu site. A vers\u00e3o “completa” \u00e9 totalmente otimizada, mas os tr\u00eas tamanhos adicionais n\u00e3o. Se voc\u00ea inserir a vers\u00e3o “m\u00e9dia” da imagem em uma postagem, essa imagem ser\u00e1 descompactada. ShortPixel otimizar\u00e1 as imagens originais que voc\u00ea carregou e todos os tamanhos adicionais que o WordPress cria.<\/p>\n Voc\u00ea obter\u00e1 um incr\u00edvel aumento de desempenho apenas com a compacta\u00e7\u00e3o, mas existem duas maneiras mais simples de otimizar ainda mais as imagens em seu site.<\/p>\n Digamos que voc\u00ea carregue uma imagem de 5.000 x 2.500 pixels em seu site. Em seguida, voc\u00ea o insere em uma postagem onde \u00e9 exibido a 800 x 400 px. Apesar de a imagem ter apenas 800px de largura na tela do visitante, eles ainda precisam fazer o download da vers\u00e3o de 5.000px.<\/p>\n N\u00e3o \u00e9 preciso dizer que uma imagem de 5.000 pixels de largura \u00e9 enorme e provavelmente levar\u00e1 mais tempo para carregar do que todos os outros arquivos do site juntos.<\/p>\n Existem duas maneiras de evitar isso.<\/p>\n Como regra geral, n\u00e3o fa\u00e7a upload de imagens maiores que 2.000 px de largura. Quer voc\u00ea use Windows ou Mac, voc\u00ea tem um editor de imagens simples que pode usar para redimensionar rapidamente imagens que s\u00e3o muito grandes antes de carreg\u00e1-las.<\/p>\n Outra dica \u00e9 evitar a vers\u00e3o “completa” ao inserir uma imagem superdimensionada em uma postagem. Escolha o tamanho “Grande”, que \u00e9 1024 px por padr\u00e3o.<\/p>\n \u00c9 f\u00e1cil redimensionar as imagens antes de carreg\u00e1-las, mas e as que j\u00e1 est\u00e3o no seu site?<\/p>\n ShortPixel<\/a> tem uma configura\u00e7\u00e3o que permite definir uma largura e altura m\u00e1ximas para suas imagens.<\/p>\n Voc\u00ea pode definir esta op\u00e7\u00e3o para que as imagens nunca sejam cortadas ao serem redimensionadas. Depois de ativar essa configura\u00e7\u00e3o, voc\u00ea pode executar o otimizador em massa e o ShortPixel redimensionar\u00e1 todas as imagens muito grandes que encontrar. Ele tamb\u00e9m redimensionar\u00e1 novas imagens conforme voc\u00ea as carrega.<\/p>\n Se voc\u00ea tem usado muitas imagens grandes, essa pode ser a etapa mais ben\u00e9fica para o seu site. Existe apenas mais uma t\u00e9cnica de otimiza\u00e7\u00e3o e \u00e9 a mais f\u00e1cil ainda.<\/p>\n Os arquivos de imagem podem conter dados adicionais n\u00e3o exibidos na pr\u00f3pria imagem, chamados de dados EXIF. O EXIF \u200b\u200bpode ser muito \u00fatil e inclui informa\u00e7\u00f5es como o fabricante da c\u00e2mera, data e hora em que a foto foi tirada e at\u00e9 mesmo as coordenadas GPS.<\/p>\n Voc\u00ea n\u00e3o precisa desses dados anexados \u00e0s imagens que publica em seu site. Sem mencionar que, provavelmente, por motivos de privacidade, \u00e9 melhor que suas fotos n\u00e3o incluam coordenadas de GPS!<\/p>\n Mais uma vez, ShortPixel<\/a> lida com isso facilmente para n\u00f3s. H\u00e1 uma configura\u00e7\u00e3o ativada por padr\u00e3o que retira os dados EXIF \u200b\u200bde todas as imagens durante o processo de otimiza\u00e7\u00e3o.<\/p>\n Em m\u00e9dia, isso leva a uma redu\u00e7\u00e3o adicional de 8,5% no tamanho do arquivo.<\/p>\n Se voc\u00ea ainda n\u00e3o otimizou suas imagens, este ser\u00e1 um dia incr\u00edvel para o seu site!<\/p>\n Todo mundo fala sobre hospedagem e otimiza\u00e7\u00f5es de arquivos, mas por algum motivo, a otimiza\u00e7\u00e3o de imagens costuma ser negligenciada. Isso \u00e9 uma loucura, porque h\u00e1 ganhos enormes a serem obtidos.<\/p>\n Eu uso ShortPixel para lidar com todas as pr\u00e1ticas de otimiza\u00e7\u00e3o de imagem descritas neste guia e o recomendo para qualquer pessoa que se preocupa com o desempenho de seu site WordPress.<\/p>\n Clique aqui para experimentar ShortPixel agora<\/a><\/p>\n Agora que voc\u00ea est\u00e1 a caminho de uma biblioteca de m\u00eddia superotimizada, pode considerar um host premium como o WP Engine<\/a> para carregar essas imagens ainda mais r\u00e1pido. E voc\u00ea deve dar uma olhada no guia WP Rocket,<\/a> especialmente a parte sobre carregamento lento<\/a> para otimiza\u00e7\u00e3o de imagem adicional.<\/p>\nTr\u00eas maneiras de otimizar imagens<\/h2>\n
1 Comprima suas imagens<\/h3>\n
Compress\u00e3o sem perdas<\/h4>\n
Compress\u00e3o com perda<\/h4>\n
Como comprimir suas imagens<\/h4>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f3240ca972.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32428aed6.png\")
<\/a><\/p>\nE as imagens que voc\u00ea j\u00e1 carregou?<\/h4>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32446974a.png\")
<\/a><\/p>\nOtimize todos os tamanhos de imagem<\/h4>\n
\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32466e04b.png\")
<\/a><\/p>\n2 Redimensione suas imagens<\/h3>\n
Fa\u00e7a upload de imagens menores<\/h4>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f3248c6bb4.png\")
<\/a><\/p>\nRedimensionar imagens em sua biblioteca de m\u00eddia<\/h4>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f324ac8d3b.png\")
<\/a><\/p>\n3 Remova os dados EXIF<\/h3>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f324cc2416.png\")
<\/a><\/p>\nImagens menores = sites mais r\u00e1pidos<\/h2>\n