{"id":20728,"date":"2018-08-14T23:32:10","date_gmt":"2018-08-14T23:32:10","guid":{"rendered":"https:\/\/kinqsta.com\/?p=4337"},"modified":"2023-11-07T03:36:42","modified_gmt":"2023-11-07T06:36:42","slug":"otimizar-imagens-para-web","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/","title":{"rendered":"Como Otimizar Imagens para Web e Melhorar o Desempenho"},"content":{"rendered":"<p>Confie em n\u00f3s, voc\u00ea n\u00e3o quer que o Google odeie seu site. Felizmente, voc\u00ea pode reduzir o tamanho dos seus arquivos de imagem para ajudar a melhorar o desempenho do seu site.<\/p>\n<p>Um problema quando voc\u00ea vai formatar as imagens \u00e9 que as modifica\u00e7\u00f5es geralmente reduzem a qualidade delas (o que por sua vez, pode fazer o visitante odiar seu site). Isso n\u00e3o \u00e9 uma coisa ruim, desde que voc\u00ea n\u00e3o deixe que as imagens fiquem feias.<\/p>\n<p>Existem alguns truques e t\u00e9cnicas que permitem reduzir o tamanho do arquivo de imagem e ainda mant\u00ea-lo bonito o suficiente para exibir com orgulho em seu site.<\/p>\n<p>Ent\u00e3o, vamos dar uma olhada em como formatar suas imagens sem torn\u00e1-las feias, al\u00e9m de como <b>otimizar imagens para web e para melhorar o desempenho<\/b>.<\/p>\n\n<div  class=\"featured-snippet\" id=\"featuredSnippet\">\n    <div class=\"featured-snippet__content\">\n        <h2>O que Significa Otimizar Imagens?<\/h2>\n        <div><p>As imagens grandes reduzem a velocidade das suas p\u00e1ginas da Web, o que cria uma experi\u00eancia de usu\u00e1rio que n\u00e3o \u00e9 ideal. Otimizar imagens \u00e9 o processo de <b>diminuir o tamanho do arquivo<\/b>, usando um plugin ou script, o que, por sua vez, acelera o tempo de carregamento da p\u00e1gina. Compacta\u00e7\u00e3o com perdas e sem perdas s\u00e3o os dois m\u00e9todos comumente usados.<\/p>\n<\/div>\n    <\/div>\n    <div class=\"featured-snippet__footer\">\n        <div class=\"arrow-down\"><\/div>\n        <div class=\"featured-snippet__footer--content row nocol middle-xs between-xs reverse\">\n            <div style=\"margin-left: auto; position: relative; top: -1px\" class=\"row nocol middle-xs\">\n                <div class=\"color--mediumGray\" style=\"font-size: 14px; vertical-align: middle;\">\n                    <svg  class=\"icon icon--logo display--block\" aria-hidden=\"true\" focusable=\"false\"><use xlink:href=\"https:\/\/kinqsta.com\/pt\/wp-content\/themes\/kinsta\/dist\/sprite.svg?v=e8af2143e3b8bceb5561b327e81ec085#logo\" \/><\/svg>                <\/div>\n                <div class=\"text--bold color--mediumGray\" style=\"padding-left: 3px;\">Support<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3>Confira nosso <a href=\"https:\/\/www.youtube.com\/watch?v=rMKI-fLBTfM\">guia em v\u00eddeo<\/a> para otimiza\u00e7\u00e3o de imagens para SEO<\/h3>\n<p class=\"p1\"><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=rMKI-fLBTfM\"><\/kinsta-video><\/p>\n<h2 id=\"benefits-of-formatting-images\">Os Benef\u00edcios de Formatar Suas Imagens<\/h2>\n<p>Primeiro, por que voc\u00ea precisa formatar suas imagens? Quais s\u00e3o os benef\u00edcios? Existem in\u00fameros benef\u00edcios de otimizar suas imagens para melhorar o desempenho. De acordo com o <a href=\"https:\/\/httparchive.org\/reports\/page-weight\" target=\"_blank\" rel=\"noopener noreferrer\">HTTP Archive<\/a>, em novembro de 2018,\u00a0<b>as imagens representam em m\u00e9dia 21%<\/b> do peso total de uma p\u00e1gina da web. Ent\u00e3o, quando se trata de <a href=\"https:\/\/kinqsta.com\/pt\/aprenda\/acelerar-o-seu-site-wordpress\/\">otimizar seu site<\/a>, as imagens \u00e9 o primeiro por onde voc\u00ea deve come\u00e7ar!<\/p>\n<p>Imagens s\u00e3o mais importantes que scripts e fontes. E, ironicamente, um bom fluxo de trabalho de otimiza\u00e7\u00e3o de imagens \u00e9 uma das coisas mais f\u00e1ceis de implementar, mas muitos propriet\u00e1rios de sites ignoram isso.<\/p>\n<figure style=\"width: 1403px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/11\/media-bytes-por-pagina-1.png\" alt=\"M\u00e9dia de bytes por p\u00e1gina\" width=\"1403\" height=\"1030\"><figcaption class=\"wp-caption-text\">M\u00e9dia de bytes por p\u00e1gina<\/figcaption><\/figure>\n<p>Abaixo est\u00e3o os principais benef\u00edcios:<\/p>\n<ul>\n<li>Isso ir\u00e1 melhorar a velocidade de carregamento de sua p\u00e1gina (veja nosso estudo de caso abaixo para saber o quanto isso afeta sua velocidade). Se sua p\u00e1gina demorar muito para carregar, seus visitantes podem se cansar de esperar e passar para outra coisa. Para obter mais informa\u00e7\u00f5es sobre como otimizar o tempo de carregamento de sua p\u00e1gina, consulte nosso <a href=\"https:\/\/kinqsta.com\/pt\/?post_type=learn&#038;p=20419\" target=\"_blank\" rel=\"noopener noreferrer\">guia detalhado sobre otimiza\u00e7\u00e3o de velocidade de p\u00e1gina<\/a>.<\/li>\n<li>Combinado com um \u00f3timo <a href=\"https:\/\/kinqsta.com\/pt\/blog\/melhores-plugins-seo-para-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">plugin SEO WordPress<\/a>, isso melhora o seu <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-seo\/\">SEO<\/a>. Seu site ter\u00e1 uma posi\u00e7\u00e3o mais alta nos resultados dos buscadores. Arquivos grandes diminuem a velocidade do seu site e os <a href=\"https:\/\/kinqsta.com\/pt\/blog\/alternativas-mecanismos-de-pesquisa\/\">buscadores<\/a> detestam sites lentos. \u00c9 prov\u00e1vel que o Google rastreie e indexe suas imagens mais rapidamente para a pesquisa de imagens do Google. Est\u00e1 curioso sobre qual porcentagem do seu tr\u00e1fego vem da pesquisa de imagens do Google? Voc\u00ea pode usar plugin ou segmento do <a href=\"https:\/\/kinqsta.com\/pt\/blog\/google-analytics-wordpress\/\">Google Analytics WordPress<\/a> para <a href=\"https:\/\/passion.digital\/blog\/how-to-check-image-traffic-in-ga\/\" target=\"_blank\" rel=\"noopener noreferrer\">verificar o tr\u00e1fego de pesquisa de imagens do Google<\/a>.<\/li>\n<li>Criar backups ser\u00e1 mais r\u00e1pido.<\/li>\n<li>Tamanhos de arquivo de imagem menores usam menos largura de banda. Redes e navegadores ir\u00e3o apreciar isso.<\/li>\n<li>Requer <a href=\"https:\/\/kinqsta.com\/pt\/blog\/uso-do-disco-no-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">menos espa\u00e7o de armazenamento no seu servidor<\/a> (isso depende de quantas miniaturas voc\u00ea otimizar).<\/li>\n<\/ul>\n\n<p>Como um cliente Kinsta, voc\u00ea pode se beneficiar gratuitamente da otimiza\u00e7\u00e3o de imagem ao permitir a otimiza\u00e7\u00e3o autom\u00e1tica da imagem com apenas alguns cliques. Falaremos mais sobre isso abaixo.<\/p>\n<p>\u00a0<\/p>\n<h2 id=\"how-to-optimize-images\">Como Otimizar Imagens para Web e para Melhorar o Desempenho<\/h2>\n<p>O principal objetivo de formatar suas imagens \u00e9 encontrar o <b>equil\u00edbrio entre o menor tamanho de arquivo e uma qualidade aceit\u00e1vel<\/b>.<\/p>\n<p>H\u00e1 mais de uma maneira de executar quase todas essas otimiza\u00e7\u00f5es. Uma das formas mais populares \u00e9 simplesmente compact\u00e1-las antes de envi\u00e1-las para o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-wordpress\/\">WordPress<\/a>. Geralmente, isso pode ser feito em uma ferramenta como o Adobe Photoshop ou o Affinity Photo. Algumas dessas tarefas tamb\u00e9m podem ser executadas usando plugins, o que abordaremos mais abaixo.<\/p>\n\n<p>As duas coisas principais a se considerar s\u00e3o o <b>formato de arquivo<\/b> e o <b>tipo de compacta\u00e7\u00e3o<\/b> que voc\u00ea usa. Ao escolher a combina\u00e7\u00e3o certa de formato de arquivo e tipo de compacta\u00e7\u00e3o, voc\u00ea pode reduzir o tamanho da sua imagem em at\u00e9 5 vezes. Voc\u00ea ter\u00e1 que experimentar com cada imagem ou formato de arquivo para ver o que funciona melhor.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"5\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Escolha o Formato de Arquivo Correto<\/h3>\n<p>Antes de come\u00e7ar a modificar suas imagens, certifique-se de ter escolhido <a href=\"https:\/\/kinqsta.com\/pt\/blog\/tipos-arquivo-imagem\/\">o melhor tipo de arquivo<\/a>. Existem v\u00e1rios tipos de arquivos que voc\u00ea pode usar:<\/p>\n<ul>\n<li><b>PNG &#8211; <\/b>produz imagens de maior qualidade, mas tamb\u00e9m possui um tamanho de arquivo maior. Foi criado como um formato de imagem sem perdas, embora tamb\u00e9m possa ser com perdas.<\/li>\n<li><b>JPEG <\/b>\u2013 usa <a href=\"https:\/\/kinqsta.com\/pt\/blog\/compressao-com-perda\/\" target=\"_blank\" rel=\"noopener noreferrer\">otimiza\u00e7\u00e3o com perdas e sem perdas<\/a>. Voc\u00ea pode ajustar o n\u00edvel de qualidade para obter um bom equil\u00edbrio entre qualidade e tamanho do arquivo.<\/li>\n<li><b>GIF <\/b>\u2013 usa apenas 256 cores. \u00c9 a melhor escolha para imagens animadas. Ele usa somente compacta\u00e7\u00e3o sem perdas.<\/li>\n<\/ul>\n<p>Existem v\u00e1rios outros, como o JPEG XR e o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/webp\/\">WebP<\/a>, mas eles n\u00e3o s\u00e3o universalmente suportados por <a href=\"https:\/\/kinqsta.com\/pt\/participacao-mercado-navegadores-desktop\/\">todos os navegadores<\/a>. Idealmente, voc\u00ea deve usar JPEG (ou JPG) para imagens com muita cor e PNG para imagens simples.<br \/>\n(Sugest\u00e3o de leitura: <a href=\"https:\/\/kinqsta.com\/pt\/blog\/jpg-vs-jpeg\/\">JPG vs JPEG: Understanding the Most Common Image File Format<\/a>)<\/p>\n<h3>2. Cuidado com a qualidade da compress\u00e3o vs tamanho<\/h3>\n<p>Aqui est\u00e1 um exemplo do que pode acontecer se voc\u00ea comprimir demais uma imagem. O primeiro \u00e9 usar uma taxa de compacta\u00e7\u00e3o muito baixa, o que resulta na mais alta qualidade (mas em tamanho de arquivo maior). A segunda \u00e9 usar uma taxa de compacta\u00e7\u00e3o muito alta, o que resulta em uma imagem de baixa qualidade (mas com tamanho de arquivo menor). Nota: A imagem original intocada \u00e9 de 2,06 MB.<\/p>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/11\/baixa-compressao-alta-qualidade-jpg.jpg\" alt=\"Baixa compress\u00e3o (alta qualidade) JPG - 590 KB\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">Baixa compress\u00e3o (alta qualidade) JPG &#8211; 590 KB<\/figcaption><\/figure>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/11\/alta-compressao-baixa-qualidade-jpg.jpg\" alt=\"Alta compress\u00e3o (baixa qualidade) JPG - 68 KB\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">Alta compress\u00e3o (baixa qualidade) JPG &#8211; 68 KB<\/figcaption><\/figure>\n<p>Como voc\u00ea pode ver, a primeira imagem acima \u00e9 de 590 KB. Isso \u00e9 muito grande para uma foto! Geralmente, \u00e9 melhor se voc\u00ea puder manter o peso total de uma p\u00e1gina da web com tamanho de 1 ou 2 MB. 590 KB j\u00e1 seria um quarto disso. A segunda imagem, obviamente, parece horr\u00edvel, mas tamb\u00e9m tem apenas 68 KB. O que voc\u00ea deve fazer \u00e9 encontrar um meio termo ideal entre sua taxa de compress\u00e3o (qualidade) e o tamanho do arquivo.<\/p>\n<p>Ent\u00e3o processamos a imagem novamente com uma taxa m\u00e9dia de compress\u00e3o e como voc\u00ea pode ver abaixo, agora a qualidade parece boa e o tamanho do arquivo \u00e9 de 151 KB, o que \u00e9 aceit\u00e1vel para uma foto de alta resolu\u00e7\u00e3o. Isso \u00e9 quase 4x menor que a foto original com baixa compacta\u00e7\u00e3o. Normalmente, imagens mais simples, como PNGs, devem ter 100 KB ou menos para obter melhor desempenho.<\/p>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/11\/media-compressao-otima-qualidade-jpg-1.jpg\" alt=\"M\u00e9dia compress\u00e3o (\u00f3tima qualidade) JPG - 151 KB\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">M\u00e9dia compress\u00e3o (\u00f3tima qualidade) JPG &#8211; 151 KB<\/figcaption><\/figure>\n<h3>3. Entenda a otimiza\u00e7\u00e3o com perda vs sem perda<\/h3>\n<p>Tamb\u00e9m \u00e9 importante entender que existem dois tipos de compacta\u00e7\u00e3o que voc\u00ea pode usar: <a href=\"https:\/\/kinqsta.com\/pt\/blog\/compressao-com-perdas-vs-sem-perdas\/\">com perdas e sem perdas<\/a>.<\/p>\n<p><strong>Com perdas:<\/strong> Este \u00e9 um filtro que elimina alguns dos dados. Isso vai degradar a imagem, ent\u00e3o voc\u00ea precisa ter cuidado com o quanto reduzir a imagem. O tamanho do arquivo pode ser reduzido em grande quantidade. Voc\u00ea pode usar ferramentas como o Adobe Photoshop, o Affinity Photo ou outros editores de imagem para ajustar as configura\u00e7\u00f5es de qualidade de uma imagem. O exemplo que usamos acima est\u00e1 usando <a href=\"https:\/\/kinqsta.com\/pt\/blog\/compressao-com-perda\/\">compacta\u00e7\u00e3o com perdas<\/a>.<\/p>\n<p><b>Sem perdas: <\/b>Este \u00e9 um filtro que comprime os dados. Isso n\u00e3o reduz a qualidade, mas exigir\u00e1 que as imagens sejam descompactadas antes de serem exibidas. Voc\u00ea pode executar uma compacta\u00e7\u00e3o sem perdas no seu computador usando ferramentas como o Photoshop, o <a href=\"https:\/\/nikkhokkho.sourceforge.io\/static.php?page=FileOptimizer\" target=\"_blank\" rel=\"noopener noreferrer\">FileOptimizer<\/a> ou o <a href=\"https:\/\/imageoptim.com\/api\" target=\"_blank\" rel=\"noopener noreferrer\">ImageOptim<\/a>.<\/p>\n<p>\u00c9 melhor testar essas t\u00e9cnicas de compacta\u00e7\u00e3o para ver o que funciona melhor para cada imagem ou formato. Se suas ferramentas tiverem essa op\u00e7\u00e3o, salve a imagem para a web. Esta \u00e9 uma op\u00e7\u00e3o em muitos editores de imagens e fornecer\u00e1 os ajustes de qualidade para que voc\u00ea possa executar a compacta\u00e7\u00e3o ideal. Voc\u00ea perder\u00e1 um pouco da qualidade, ent\u00e3o tente encontrar o melhor equil\u00edbrio poss\u00edvel sem tornar as imagens feias.<\/p>\n<h3>4. Use ferramentas e programas de otimiza\u00e7\u00e3o de imagem<\/h3>\n<p>H\u00e1 muitas ferramentas e programas por a\u00ed, tanto pagos quanto gratuitos, que voc\u00ea pode usar para otimizar suas imagens.<\/p>\n<p>Alguns fornecem as ferramentas para realizar suas pr\u00f3prias otimiza\u00e7\u00f5es e outros fazem o trabalho para voc\u00ea. Pessoalmente, somos grandes f\u00e3s do <a href=\"https:\/\/affinity.serif.com\/en-us\/photo\/\">Affinity Photo<\/a>, pois ele \u00e9 barato e oferece recursos quase id\u00eanticos aos do Adobe Photoshop.<\/p>\n<figure style=\"width: 2165px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/11\/affinity-photo.jpg\" alt=\"Comprimir foto no affinity photo\" width=\"2165\" height=\"1354\"><figcaption class=\"wp-caption-text\">Comprimir foto no affinity photo<\/figcaption><\/figure>\n<p>Aqui est\u00e3o algumas ferramentas e programas adicionais para dar uma olhada:<\/p>\n<ul style=\"margin-left: 30px\">\n<li><a href=\"https:\/\/www.adobe.com\/products\/photoshop.html\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Photoshop<\/a><\/li>\n<li><a href=\"https:\/\/www.gimp.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gimp<\/a><\/li>\n<li><a href=\"https:\/\/www.getpaint.net\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Paint.NET<\/a><\/li>\n<li><a href=\"http:\/\/www.lcdf.org\/gifsicle\/\" target=\"_blank\" rel=\"noopener noreferrer\">GIFsicle<\/a><\/li>\n<li><a href=\"https:\/\/www.jpegmini.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JPEG Mini<\/a><\/li>\n<li><a href=\"https:\/\/optipng.sourceforge.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">OptiPNG<\/a><\/li>\n<li><a href=\"https:\/\/pngquant.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">pngquant<\/a><\/li>\n<li><a href=\"https:\/\/nikkhokkho.sourceforge.io\/static.php?page=FileOptimizer\" target=\"_blank\" rel=\"noopener noreferrer\">FileOptimizer<\/a><\/li>\n<li><a href=\"https:\/\/imageoptim.com\/api\" target=\"_blank\" rel=\"noopener noreferrer\">ImageOptim<\/a><\/li>\n<li><a href=\"https:\/\/trimage.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Trimage<\/a><\/li>\n<li><a href=\"https:\/\/imageresizer.com\/image-compressor\" target=\"_blank\" rel=\"noopener noreferrer\">ImageResize.org<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#image-optimization-1\">Otimiza\u00e7\u00e3o de imagem da Kinsta<\/a><\/li>\n<\/ul>\n<p>N\u00e3o se esque\u00e7a que seus m\u00e9todos para servir imagens s\u00e3o t\u00e3o importantes quanto o tamanho do arquivo. Muitos provedores de hospedagem premium como a Kinsta <a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#kinstas-cdn\">implementam um CDN<\/a> para entregar rapidamente imagens e outros arquivos aos usu\u00e1rios. A <a href=\"https:\/\/kinqsta.com\/pt\/blog\/integracao-cloudflare\/\">integra\u00e7\u00e3o gratuita da Kinsta Cloudflare<\/a> tamb\u00e9m protege todos os sites da plataforma, tornando mais r\u00e1pida <em>e<\/em> segura.<\/p>\n<h3>5. Redimensione as imagens para escalar<\/h3>\n<p>No passado, era muito importante que voc\u00ea enviasse imagens do tamanho certo e n\u00e3o deixasse o CSS redimension\u00e1-las. No entanto, isso n\u00e3o \u00e9 mais t\u00e3o importante, pois o WordPress 4.4 agora suporta <a href=\"https:\/\/make.wordpress.org\/core\/2015\/11\/10\/responsive-images-in-wordpress-4-4\/\" target=\"_blank\" rel=\"noopener noreferrer\">imagens responsivas<\/a> (n\u00e3o reduzidas pelo CSS).<\/p>\n<p>Basicamente, o WordPress cria automaticamente v\u00e1rios tamanhos de cada imagem carregada da biblioteca de m\u00eddia. Ao incluir os tamanhos dispon\u00edveis de uma imagem em um atributo srcset, os navegadores agora podem optar por baixar o tamanho mais apropriado e ignorar os outros. Veja um exemplo de como seu c\u00f3digo realmente \u00e9 abaixo.<\/p>\n<div id class=\"wp-caption aligncenter\">\n<figure style=\"width: 1386px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" title=\"srcset responsive images example in code\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2018\/05\/srcset-responsive-images.png\" alt=\"srcset responsive images example in code\" width=\"1386\" height=\"302\"><figcaption class=\"wp-caption-text\">srcset responsive images example in code<\/figcaption><\/figure>\n<\/div>\n<p>Assim, com mais e mais displays HiDPI hoje em dia, pode ser bom encontrar um meio termo ideal. Por exemplo, duas ou tr\u00eas vezes o tamanho da coluna ou do div do site, mas ainda menor que o tamanho original. O navegador mostrar\u00e1 a imagem correta com base na resolu\u00e7\u00e3o do dispositivo.<\/p>\n<p>A biblioteca de m\u00eddia do WordPress <a href=\"https:\/\/kinqsta.com\/pt\/blog\/regenerar-miniaturas\/\">cria miniaturas com base nas suas configura\u00e7\u00f5es<\/a>. No entanto, a imagem original ainda \u00e9 mantida e intocada. Se voc\u00ea deseja redimensionar suas imagens e economizar espa\u00e7o em disco, n\u00e3o salvando a original, voc\u00ea pode usar um plugin gratuito como o <a href=\"https:\/\/wordpress.org\/plugins\/imsanity\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imsanity<\/a>.<\/p>\n<figure style=\"width: 1626px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"WordPress media settings\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/05\/wordpress-midia-configuracoes.png\" alt=\"Configura\u00e7\u00f5es de m\u00eddia WordPress\" width=\"1626\" height=\"1314\"><figcaption class=\"wp-caption-text\">Configura\u00e7\u00f5es de m\u00eddia WordPress<\/figcaption><\/figure>\n<p>O Imsanity permite que voc\u00ea defina um limite de integridade para que todas as imagens enviadas sempre atinjam um tamanho razo\u00e1vel, que ainda \u00e9 maior do que o suficiente para as necessidades de um site t\u00edpico.<\/p>\n<p>O Imsanity conecta-se ao WordPress imediatamente ap\u00f3s o envio da imagem, mas antes do processamento do WordPress. Portanto, o WordPress se comporta exatamente da mesma maneira, mas ser\u00e1 como se o colaborador tivesse redimensionado sua imagem para um tamanho razo\u00e1vel antes de fazer o upload.<\/p>\n<h4>Limpe sua biblioteca de m\u00eddia<\/h4>\n<p>Se voc\u00ea est\u00e1 procurando uma ferramenta para economizar espa\u00e7o enquanto tamb\u00e9m limpa sua biblioteca de m\u00eddia, voc\u00ea poderia usar o <a href=\"https:\/\/wordpress.org\/plugins\/media-cleaner\/\">Media Cleaner<\/a> para encontrar arquivos de m\u00eddia n\u00e3o utilizados. O plugin verificar\u00e1 todos os seus arquivos de m\u00eddia e listar\u00e1 os n\u00e3o utilizados no Painel do Limpador de M\u00eddia para que voc\u00ea possa navegar por eles e exclu\u00ed-los.<\/p>\n<p>O Media Cleaner implementa um sistema inteligente de elimina\u00e7\u00e3o: quando os arquivos s\u00e3o eliminados, eles s\u00e3o movidos para um diret\u00f3rio de lixo. Dessa forma, voc\u00ea pode testar o seu site por um tempo e ter certeza de que tudo est\u00e1 bem. Se faltar um arquivo ou uma entrada de m\u00eddia, voc\u00ea pode facilmente restaur\u00e1-lo com um clique ou simplesmente esvaziar o lixo se tudo parecer bom para voc\u00ea.<\/p>\n<h2 id=\"\"image-optimization-wordpress-plugins\">Plugins de Otimiza\u00e7\u00e3o de Imagem que Voc\u00ea Pode Usar<\/h2>\n<p>Felizmente, com o WordPress, voc\u00ea n\u00e3o tem que fazer toda a formata\u00e7\u00e3o ou compress\u00e3o manualmente. Voc\u00ea pode usar plugins para fazer pelo menos parte do trabalho para voc\u00ea automaticamente.<\/p>\n<p>Existem v\u00e1rios plugins que ir\u00e3o otimizar automaticamente seus arquivos de imagem \u00e0 medida que voc\u00ea os carrega. Eles otimizar\u00e3o at\u00e9 mesmo as imagens que voc\u00ea j\u00e1 fez o upload. Este \u00e9 um recurso \u00fatil &#8211; especialmente se voc\u00ea j\u00e1 tem um site cheio de imagens. Aqui est\u00e3o alguns dos melhores plugins para formatar suas imagens para um melhor desempenho.<\/p>\n<p>Mas \u00e9 importante que voc\u00ea n\u00e3o confie somente nos plugins em si. Por exemplo, voc\u00ea n\u00e3o deve carregar imagens de 2 MB para sua biblioteca de m\u00eddia WordPress. Isso pode resultar em um consumo muito r\u00e1pido do espa\u00e7o em disco do seu servidor web.<\/p>\n<p>O melhor m\u00e9todo \u00e9 redimensionar rapidamente a imagem em uma ferramenta de edi\u00e7\u00e3o de fotos com anteced\u00eancia, e ent\u00e3o fazer o upload e usar um dos seguintes plugins para reduzi-la ainda mais.<\/p>\n<p>Antes de se comprometer com uma dessas ferramentas ou plugins, no entanto, voc\u00ea deve verificar se o seu <a href=\"https:\/\/kinqsta.com\/pt\/blog\/hospedagem-focada-em-agencias\/\">provedor de hospedagem<\/a> de sites n\u00e3o oferece ferramentas integradas para fazer o trabalho por voc\u00ea. Por exemplo, os clientes Kinsta t\u00eam acesso a um <a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#image-optimization-1\">recurso gratuito de Otimiza\u00e7\u00e3o de Imagens<\/a> que cria automaticamente c\u00f3pias otimizadas de todas as imagens do WordPress, armazenadas gratuitamente. O menor dos dois arquivos de imagem \u00e9 ent\u00e3o servido usando o <a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#kinstas-cdn\">r\u00e1pido CDN da Kinsta<\/a> para aumentar a velocidade. Os clientes podem at\u00e9 mesmo escolher entre compress\u00e3o sem perda e com perda, dependendo de suas necessidades.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"7\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3 id=\"imagify\">1. Otimizador de Imagem Imagify<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2015\/11\/imagify-image-optimizer.jpg\" alt=\"imagify image optimizer\" width=\"1349\" height=\"437\"><\/a><figcaption class=\"wp-caption-text\">Plugin Imagify Image Optimizer<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imagify<\/a> foi criado pela mesma equipe que desenvolveu o WP Rocket, que a maioria de voc\u00eas provavelmente j\u00e1 conhece. Ele \u00e9 compat\u00edvel com WooCommerce, <a href=\"https:\/\/kinqsta.com\/pt\/blog\/plugins-galeria-fotos-wordpress\/#nextgen-gallery\" target=\"_blank\" rel=\"noopener noreferrer\">NextGen Gallery<\/a><b> <\/b>e WP Retina. Ele tamb\u00e9m possui um recurso de otimiza\u00e7\u00e3o em massa e voc\u00ea pode escolher entre tr\u00eas diferentes n\u00edveis de compacta\u00e7\u00e3o: normal, agressivo e ultra. Ele tamb\u00e9m possui um recurso de restaura\u00e7\u00e3o, portanto, se voc\u00ea n\u00e3o estiver satisfeito com a qualidade, poder\u00e1 restaurar em um clique e compactar novamente em um n\u00edvel que melhor atenda \u00e0s suas necessidades. Existe uma vers\u00e3o gratuita e paga. Voc\u00ea est\u00e1 limitado a uma cota de 25 MB de imagens por m\u00eas com uma conta gratuita.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode se livrar da imagem original e redimensionar suas imagens maiores com este plugin.<\/p>\n<figure id=\"attachment_20956\" aria-describedby=\"caption-attachment-20956\" style=\"width: 1554px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-20956\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/redimensionar-imagify.png\" alt=\"Redimensionar suas imagens\" width=\"1554\" height=\"649\" srcset=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/redimensionar-imagify.png 1554w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/redimensionar-imagify-300x125.png 300w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/redimensionar-imagify-768x321.png 768w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/redimensionar-imagify-1024x428.png 1024w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/redimensionar-imagify-610x255.png 610w\" sizes=\"auto, (max-width: 1554px) 100vw, 1554px\" \/><figcaption id=\"caption-attachment-20956\" class=\"wp-caption-text\">Redimensionar suas imagens<\/figcaption><\/figure>\n<p>O Imagify tamb\u00e9m <b>compacta imagens em servidores de terceiros<\/b>, n\u00e3o no seu, o que \u00e9 muito importante quando se trata de desempenho. O Imagify n\u00e3o desacelera seu site WordPress.<\/p>\n<h3 id=\"optimole\">2. Optimole<\/h3>\n<figure id=\"attachment_39491\" aria-describedby=\"caption-attachment-39491\" style=\"width: 1539px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-39491 size-full\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/05\/optimole-1-1.jpg\" alt=\"Optimole\" width=\"1539\" height=\"495\"><\/a><figcaption id=\"caption-attachment-39491\" class=\"wp-caption-text\">Optimole plugin<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\">Optimole<\/a> \u00e9 um plugin de otimiza\u00e7\u00e3o de imagem WordPress que reduz automaticamente o tamanho das suas imagens sem qualquer trabalho necess\u00e1rio do seu lado. Ele tem uma grande vantagem quando se trata da velocidade de carregamento de seu site, pois \u00e9 totalmente baseado na nuvem e nunca veicula imagens maiores do que deveriam, mas tamb\u00e9m exibe o tamanho de imagem perfeita para a janela de visualiza\u00e7\u00e3o e o navegador do visitante.<\/p>\n<p>Al\u00e9m disso, o plugin fornece carregamento lento e substitui\u00e7\u00e3o de imagem eficiente &#8211; ele reduz a qualidade da imagem se o visitante tiver uma conex\u00e3o de internet mais lenta &#8211; o que a diferencia da multid\u00e3o. Ele tamb\u00e9m detecta automaticamente o navegador do usu\u00e1rio e veicula o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/webp\/\">WebP<\/a> se ele for compat\u00edvel.<\/p>\n<p>Todas as imagens que o Optimole comprime s\u00e3o servidas por meio de um r\u00e1pido CDN. Voc\u00ea pode experimentar o Optimole gratuitamente ou atualizar para o plano premium se precisar de largura de banda extra e espa\u00e7o de processamento.<\/p>\n<h3 id=\"optimus\">3. Optimus Otimizador de Imagem WordPress<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/optimus\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2015\/11\/optimus-image-optimizer.jpg\" alt=\"optimus image optimizer\" width=\"1349\" height=\"437\"><\/a><figcaption class=\"wp-caption-text\">Plugin Optimus Image Optimizer<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/wordpress.org\/plugins\/optimus\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimus Otimizador de Imagem WordPress<\/a> usa compacta\u00e7\u00e3o sem perdas para otimizar suas imagens. Sem perdas significa que voc\u00ea n\u00e3o ver\u00e1 nenhuma perda de qualidade. Ele suporta WooCoomerce e multi-site e tem um \u00f3timo recurso de otimiza\u00e7\u00e3o em massa para aqueles com grandes bibliotecas de m\u00eddia j\u00e1 existentes. Tamb\u00e9m \u00e9 compat\u00edvel com o plugin WP Retina do WordPress. Existe uma vers\u00e3o gratuita e uma vers\u00e3o paga. Na vers\u00e3o paga, voc\u00ea paga uma vez por ano e pode compactar uma quantidade ilimitada de imagens. Se voc\u00ea combin\u00e1-lo com o plugin Cache Enabler, voc\u00ea tamb\u00e9m <a href=\"https:\/\/kinqsta.com\/pt\/blog\/webp\/\">poder\u00e1 mergulhar nas imagens WebP<\/a>, que s\u00e3o um novo formato de imagem leve do Google.<\/p>\n<h3 id=\"wp-smush\">4. WP Smush<\/h3>\n<figure style=\"width: 1637px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2015\/11\/wp-smush.png\" alt=\"wp smush plugin\" width=\"1637\" height=\"528\"><\/a><figcaption class=\"wp-caption-text\">Plugin WP Smush<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Smush<\/a> tem uma vers\u00e3o gratuita e uma vers\u00e3o paga. Ele reduz as informa\u00e7\u00f5es ocultas das imagens para reduzir o tamanho sem reduzir a qualidade. Ele digitaliza imagens e as reduz conforme voc\u00ea as envia para o seu site. Ele tamb\u00e9m consegue digitalizar imagens que voc\u00ea j\u00e1 enviou e reduzi-las. Ele consegue reduzir at\u00e9 50 arquivos de uma s\u00f3 vez. Voc\u00ea tamb\u00e9m pode reduzir manualmente se quiser. Ele pode reduzir imagens em formato JPEG, GIF e PNG. Os tamanhos dos arquivos est\u00e3o limitados a 1 MB.<\/p>\n<ul>\n<li>\u00c9 compat\u00edvel com alguns dos plugins de m\u00eddia mais populares, como o WP All Import e o WPML.<\/li>\n<li>Toda a otimiza\u00e7\u00e3o de imagem \u00e9 feita com t\u00e9cnicas de compacta\u00e7\u00e3o sem perdas, mantendo a qualidade da sua imagem alta.<\/li>\n<li>N\u00e3o importa em qual diret\u00f3rio voc\u00ea salvou suas imagens. O Smush as encontra e as compacta.<\/li>\n<li>Smush tem a op\u00e7\u00e3o de definir automaticamente largura e altura para todas as imagens, para que todas as suas imagens sejam redimensionadas para propor\u00e7\u00f5es id\u00eanticas.<\/li>\n<\/ul>\n<h3 id=\"tinypng\">5. TinyPNG (JPG comprimidos tamb\u00e9m)<\/h3>\n<figure style=\"width: 1639px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/tiny-compress-images\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2015\/11\/tinypng.png\" alt=\"tinypng\" width=\"1639\" height=\"528\"><\/a><figcaption class=\"wp-caption-text\">Plugin TinyPNG<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/wordpress.org\/plugins\/tiny-compress-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">TinyPNG<\/a>\u00a0usa os servi\u00e7os TinyJPG e TinyPNG (a conta gratuita permite comprimir cerca de 100 imagens por m\u00eas) para otimizar suas imagens JPG e PNG. Ele consegue compactar automaticamente novas imagens e compactar em massa suas imagens existentes. Ele converte CMYK em RBG para economizar espa\u00e7o. Ele comprime imagens JPEG em at\u00e9 60% e imagens PNG em at\u00e9 80% sem uma perda vis\u00edvel na qualidade da imagem. N\u00e3o tem limite de tamanho de arquivo.<\/p>\n<h3 id=\"imagerecycle\">6. ImageRecycle<\/h3>\n<figure id=\"attachment_20958\" aria-describedby=\"caption-attachment-20958\" style=\"width: 1349px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-20958\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/imagerecycle-otimizador.png\" alt=\"Plugin ImageRecycle - Otimizador de imagem e PDF\" width=\"1349\" height=\"437\" srcset=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/imagerecycle-otimizador.png 1349w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/imagerecycle-otimizador-300x97.png 300w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/imagerecycle-otimizador-768x249.png 768w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/imagerecycle-otimizador-1024x332.png 1024w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/imagerecycle-otimizador-610x198.png 610w\" sizes=\"auto, (max-width: 1349px) 100vw, 1349px\" \/><figcaption id=\"caption-attachment-20958\" class=\"wp-caption-text\">Plugin ImageRecycle &#8211; Otimizador de imagem e PDF<\/figcaption><\/figure>\n<p>O plugin <a href=\"https:\/\/wordpress.org\/plugins\/imagerecycle-pdf-image-compression\/\" target=\"_blank\" rel=\"noopener noreferrer\">ImageRecyle<\/a> \u00e9 um otimizador autom\u00e1tico de imagem e PDF. Este plugin se concentra n\u00e3o apenas na compacta\u00e7\u00e3o de imagens, mas tamb\u00e9m em PDFs. Um recurso realmente \u00fatil \u00e9 a capacidade de definir o tamanho m\u00ednimo do arquivo para compacta\u00e7\u00e3o. Por exemplo, se voc\u00ea tiver imagens com 80 KB, poder\u00e1 exclu\u00ed-las automaticamente da compacta\u00e7\u00e3o. Isso garante que imagens e arquivos nunca sejam compactados demais. Tamb\u00e9m inclui otimiza\u00e7\u00e3o em massa e redimensionamento autom\u00e1tico de imagens. Observa\u00e7\u00e3o: o programa tem uma vers\u00e3o para avalia\u00e7\u00e3o gratuita de 15 dias, mas esse \u00e9 um servi\u00e7o pago, e as imagens s\u00e3o carregadas e compactadas usando seus servidores. Ele n\u00e3o cobra por m\u00eas, mas sim pelo n\u00famero total de imagens compactadas, a partir de $10 por 10.000 imagens.<\/p>\n<h3>7. EWWW Image Optimizer<\/h3>\n<figure id=\"attachment_129416\" aria-describedby=\"caption-attachment-129416\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-129416 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2017\/05\/ewww-image-optimizer.jpg\" alt=\"EWWW Image Optimizer\" width=\"1200\" height=\"389\"><figcaption id=\"caption-attachment-129416\" class=\"wp-caption-text\">EWWW Image Optimizer<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/wordpress.org\/plugins\/ewww-image-optimizer\/\">EWWW Image Optimizer<\/a> ajuda voc\u00ea a tornar suas imagens menores e seu site mais r\u00e1pido com menos aborrecimentos. Sem limites de tamanho e com muita flexibilidade para usu\u00e1rios avan\u00e7ados, voc\u00ea pode usar os padr\u00f5es ou personalizar o plugin completamente ao seu gosto.<\/p>\n<p>O modo gratuito permite <a href=\"https:\/\/kinqsta.com\/pt\/blog\/jpg-vs-jpeg\/\">compress\u00e3o JPG<\/a> ilimitada e convers\u00e3o WebP e \u00e9 \u00f3timo para sites de hobby ou blogs que est\u00e3o apenas come\u00e7ando. Todos os usu\u00e1rios EWWW IO podem usar o Bulk Optimizer para comprimir suas imagens existentes ou usar o modo de lista da Media Library para selecionar e escolher imagens espec\u00edficas para comprimir. Pastas adicionais podem ser digitalizadas para garantir que cada imagem em seu site seja devidamente otimizada.<\/p>\n<p>O EWWW IO permite at\u00e9 mesmo converter suas imagens em formatos de pr\u00f3xima gera\u00e7\u00e3o como <a href=\"https:\/\/kinqsta.com\/pt\/blog\/webp\/\">WebP<\/a> ou encontrar o melhor formato de imagem para uma imagem com op\u00e7\u00f5es de convers\u00e3o de v\u00e1rios formatos.<\/p>\n<p>O Premium Compress API permite que voc\u00ea leve a compress\u00e3o para um n\u00edvel totalmente novo sem sacrificar a qualidade e a economia m\u00e9dia de 50%. Ela tamb\u00e9m libera a compress\u00e3o PDF e inclui convenientes backups de imagem de 30 dias. Com o Easy IO CDN opcional, as imagens s\u00e3o automaticamente comprimidas, escalonadas para se adequar \u00e0 p\u00e1gina e ao tamanho do dispositivo, carregadas pregui\u00e7osamente e convertidas para o formato WebP de pr\u00f3xima gera\u00e7\u00e3o.<\/p>\n<h2 id=\"case-study\">Otimizar Imagens para a Web\u00a0Estudo de Caso<\/h2>\n<p>Decidimos fazer nosso pr\u00f3prio estudo de caso e testes para mostrar a voc\u00ea o quanto a otimiza\u00e7\u00e3o das imagens para a Web pode afetar a velocidade geral do seu site WordPress.<\/p>\n<h3>JPGs n\u00e3o compactados<\/h3>\n<p>Primeiro, fizemos o upload de 6 JPGs n\u00e3o compactados, todos com mais de 1 MB, para o nosso site teste. Em seguida, executamos 5 testes por meio do Pingdom e obtivemos a m\u00e9dia. Como voc\u00ea pode ver no <a href=\"https:\/\/tools.pingdom.com\/#!\/dbKwjQ\/https:\/\/perfmatters.io\/uncompressed-jpg\/\" target=\"_blank\" rel=\"noopener noreferrer\">teste de velocidade<\/a> abaixo, nosso tempo total de carregamento foi de 1,55 segundos e o tamanho total da p\u00e1gina foi de 14,7 MB.JPGs n\u00e3o compactados<\/p>\n<figure style=\"width: 1686px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/11\/teste-de-velocidade-jpg-comprimido.png\" alt=\"Teste de velocidade com JPGs comprimido\" width=\"1686\" height=\"535\"><figcaption class=\"wp-caption-text\">Teste de velocidade com JPGs comprimido<\/figcaption><\/figure>\n<h3>JPGs compactados<\/h3>\n<p>Em seguida, comprimimos os JPGs usando o plugin Imagify WordPress, usando a &#8220;configura\u00e7\u00e3o agressiva&#8221;. Em seguida, fizemos 5 testes atrav\u00e9s do Pingdom e obtivemos a m\u00e9dia. Como voc\u00ea pode ver no <a href=\"https:\/\/tools.pingdom.com\/#!\/eHwxw9\/https:\/\/perfmatters.io\/compressed-jpg\/\">teste de velocidade<\/a> abaixo, nosso tempo total no carregamento foi reduzido para 476 ms e o tamanho total da p\u00e1gina foi reduzido para 2,9 MB. Nosso <strong>tempo total de carregamento foi reduzido em 54,88%<\/strong> e o <strong>tamanho total de p\u00e1gina foi reduzido em 80,27%<\/strong>.<\/p>\n<figure id=\"attachment_10869\" aria-describedby=\"caption-attachment-10869\" style=\"width: 1686px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-10869 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2015\/11\/speed-test-compressed-jpg.png\" alt=\"Teste de velocidade com JPGs comprimidos\" width=\"1686\" height=\"535\"><figcaption id=\"caption-attachment-10869\" class=\"wp-caption-text\">Teste de velocidade com JPGs comprimidos<\/figcaption><\/figure>\n<p>N\u00e3o h\u00e1 quase nenhuma outra otimiza\u00e7\u00e3o que voc\u00ea possa fazer no seu site capaz de reduzir mais de 50% dos tempos de carregamento. \u00c9 por isso que a otimiza\u00e7\u00e3o de imagens \u00e9 t\u00e3o importante que o processo acima foi todo automatizado pelo plugin. \u00c9 uma abordagem interativa para obter um site WordPress mais r\u00e1pido.<\/p>\n<p>A \u00fanica outra otimiza\u00e7\u00e3o dram\u00e1tica que voc\u00ea poderia fazer seria alterar sua hospedagem do WordPress. Muitos clientes que se mudam para <a href=\"https:\/\/kinqsta.com\/pt\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kinsta<\/a> conseguem mais de 45% de aumento de velocidade. Imagine se mudar para a Kinsta e otimizar suas imagens!<\/p>\n<p>Ao otimizar suas imagens, tanto ao usar uma ferramenta de edi\u00e7\u00e3o de fotos quanto um plugin do WordPress, voc\u00ea tamb\u00e9m pode corrigir o aviso \u201cOtimizar imagens\u201d no <a href=\"https:\/\/kinqsta.com\/pt\/blog\/google-pagespeed-insights\/\">Google PageSpeed Insights<\/a> (conforme mostrado abaixo).<\/p>\n<figure style=\"width: 1898px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/05\/pagespeed-insights-optimiza-imagens.png\" alt=\"PageSpeed Insights otimiza o aviso de imagens\" width=\"1898\" height=\"1211\"><figcaption class=\"wp-caption-text\">PageSpeed Insights otimiza o aviso de imagens<\/figcaption><\/figure>\n<p>Se voc\u00ea tiver outros avisos de otimiza\u00e7\u00e3o das ferramentas de teste de velocidade, confira nossa postagem sobre o Google PageSpeed Insights e nossa <a href=\"https:\/\/kinqsta.com\/pt\/blog\/teste-de-velocidade-pingdom\/\">explica\u00e7\u00e3o detalhada sobre o Pingdom<\/a>.<\/p>\n<p><kinsta-video src=\"https:\/\/kinsta.wistia.com\/medias\/qvfucq5kz6?videoFoam=true&#038;videoWidth=640\"><\/kinsta-video><\/p>\n<p><strong>Tomamos nosso conhecimento de gerenciamento eficaz de sites em escala, e o transformamos em um ebook e v\u00eddeo. <\/strong><strong>Clique para baixar o <a href=\"https:\/\/kinqsta.com\/pt\/ebooks\/wordpress\/gerenciar-varios-sites-wordpress\/?utm_campaign=how-to-speed-up-your-wordpress-site&#038;utm_source=blog-knowledgebase&#038;utm_medium=video\">Guia de Gerenciamento de mais de 60 sites WordPress<\/a>!<\/strong><\/p>\n<h2>Usando SVGs: os benef\u00edcios que voc\u00ea precisa saber<\/h2>\n<p>Outra recomenda\u00e7\u00e3o \u00e9 usar <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-um-arquivo-svg\/\">arquivos SVG<\/a> junto com suas outras imagens. O SVG \u00e9 um formato vetorial escalon\u00e1vel que funciona bem para logotipos, \u00edcones, texto e imagens simples. Aqui est\u00e3o algumas raz\u00f5es:<\/p>\n<ul>\n<li>Os SVGs s\u00e3o automaticamente escalon\u00e1veis nos navegadores e nas ferramentas de edi\u00e7\u00e3o de fotos. \u00c9 o sonho de qualquer designer gr\u00e1fico da web!<\/li>\n<li>O Google indexa SVGs, da mesma forma que indexa <a href=\"https:\/\/kinqsta.com\/pt\/blog\/svg-vs-png\/\">PNGs<\/a> e JPGs, para que voc\u00ea n\u00e3o precise se preocupar com SEO.<\/li>\n<li>Os SVGs s\u00e3o tradicionalmente (nem sempre) menores em tamanho de arquivo do que PNGs ou JPGs. Isso pode resultar em tempos de carregamento mais r\u00e1pidos.<\/li>\n<\/ul>\n<p>Genki escreveu um \u00f3timo artigo onde ele compara o tamanho do <a href=\"https:\/\/web.archive.org\/web\/20200729105713\/http:\/\/genkihagata.com\/blog\/svg-vs-flat-images.html\" target=\"_blank\" rel=\"noopener noreferrer\">SVG vs PNG vs JPEG<\/a>. Abaixo est\u00e3o alguns t\u00f3picos do teste em que ele comparou os tr\u00eas diferentes tipos de imagem.<\/p>\n<h3>JPG (tamanho otimizado: 81,4 KB)<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-20867\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/jpg-tamanho.jpg\" alt=\"JPG tamanho\" width=\"1280\" height=\"535\" srcset=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/jpg-tamanho.jpg 1280w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/jpg-tamanho-300x125.jpg 300w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/jpg-tamanho-768x321.jpg 768w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/jpg-tamanho-1024x428.jpg 1024w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/jpg-tamanho-610x255.jpg 610w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/p>\n<figure id class=\"wp-caption aligncenter\"><figcaption class=\"wp-caption-text\">Imagem JPG\u00a0<\/figcaption><\/figure>\n<h3>PNG (tamanho otimizado: 85,1 KB)<\/h3>\n<figure id class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/04\/png-tamanho.png\" alt=\"PNG tamanho\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">Imagem PNG<\/figcaption><\/figure>\n<h3>SVG (tamanho otimizado: 6,1 KB)<\/h3>\n<figure id class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/04\/svg-tamanho.png\" alt=\"SVG tamanho\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">Imagem SVG\u00a0<\/figcaption><\/figure>\n<p>Como voc\u00ea pode ver acima, o SVG representa uma diminui\u00e7\u00e3o no tamanho do arquivo de 92,51% quando comparado ao JPG. E de 92,83% quando comparado ao PNG. Confira nosso tutorial sobre <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-um-arquivo-svg\/\" target=\"_blank\" rel=\"noopener noreferrer\">como usar SVGs no seu site WordPress<\/a>.<\/p>\n<h2>Melhores pr\u00e1ticas para a otimiza\u00e7\u00e3o de imagens na internet<\/h2>\n<p>Aqui est\u00e3o algumas boas pr\u00e1ticas gerais quando se trata de como otimizar imagens para a web:<\/p>\n<ul>\n<li>Se estiver usando um plugin do WordPress, <b>use um que compacte e otimize as imagens externamente<\/b> nos servidores deles. Isso, por sua vez, reduz a carga no seu pr\u00f3prio site.<\/li>\n<li>Use imagens vetoriais sempre que poss\u00edvel ao lado de seus PNGs e JPGs.<\/li>\n<li><a href=\"https:\/\/kinqsta.com\/pt\/blog\/cdn-do-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Use uma CDN<\/a> para exibir suas imagens rapidamente aos visitantes em todo o mundo.\u00a0O Kinsta CDN tem um <a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#kinstas-cdn#code-minification-1\">recurso de minifica\u00e7\u00e3o de c\u00f3digo<\/a> que \u00e9 embutido diretamente no <a href=\"https:\/\/kinqsta.com\/pt\/mykinsta\/\">painel MyKinsta<\/a>. Isto permite aos <a href=\"https:\/\/kinqsta.com\/pt\/precos\/?plan=visits-business1\">clientes Kinsta<\/a> ativar facilmente a minifica\u00e7\u00e3o autom\u00e1tica de CSS e JavaScript com um simples clique.<\/li>\n<li>Remova dados de imagem desnecess\u00e1rios.<\/li>\n<li>Recorte o espa\u00e7o em branco e recrie-o usando CSS para fornecer o espa\u00e7amento.<\/li>\n<li>Use efeitos CSS3 o m\u00e1ximo poss\u00edvel.<\/li>\n<li>Salve suas imagens nas dimens\u00f5es adequadas. Por\u00e9m lembre que o WordPress agora suporta imagens <a href=\"https:\/\/web.archive.org\/web\/20200729105713\/http:\/\/genkihagata.com\/blog\/svg-vs-flat-images.html\">responsivas<\/a> para exibi-las sem redimension\u00e1-las com CSS.<\/li>\n<li>Use sempre o formato de arquivo .ico para seu <a href=\"https:\/\/kinqsta.com\/pt\/blog\/favicon-no-wordpress\/\">favicon<\/a>.<\/li>\n<li>Use fontes da Web em vez de colocar texto nas imagens &#8211; elas t\u00eam uma apar\u00eancia melhor quando dimensionadas e ocupam menos espa\u00e7o.<\/li>\n<li>Use imagens rasterizadas apenas para cenas com muitas formas e detalhes.<\/li>\n<li>Reduza a profundidade de bits para uma paleta de cores menor.<\/li>\n<li><b>Use compress\u00e3o com perdas sempre que poss\u00edvel.<\/b><\/li>\n<li>Experimente encontrar as melhores configura\u00e7\u00f5es para cada formato.<\/li>\n<li>Use GIF se voc\u00ea precisar de anima\u00e7\u00e3o. (mas <a href=\"https:\/\/woorkup.com\/compress-animated-gif\/\" target=\"_blank\" rel=\"noopener noreferrer\">compacte seus GIFs animados<\/a>)<\/li>\n<li>Use PNG se voc\u00ea precisar de muitos detalhes e alta resolu\u00e7\u00e3o.<\/li>\n<li>Use o JPG para fotos e capturas de tela gerais.<\/li>\n<li>Remova quaisquer metadados de imagem desnecess\u00e1rios.<\/li>\n<li>Automatize o processo tanto quanto poss\u00edvel.<\/li>\n<li>Em alguns casos, talvez voc\u00ea queira usar o recurso <a href=\"https:\/\/kinqsta.com\/pt\/blog\/lazy-load-no-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">lazy load das imagens<\/a> para exibir a primeira p\u00e1gina mais rapidamente.<\/li>\n<li>Salve imagens como \u201cotimizadas para a web\u201d em ferramentas como o Photoshop.<\/li>\n<li>Use o WebP no Chrome para exibir imagens menores.<\/li>\n<li>Use o <a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#image-optimization-1\">recurso integrado de Otimiza\u00e7\u00e3o de Imagem<\/a> da Kinsta<\/li>\n<\/ul>\n\n<p>Depois de formatar suas imagens para um melhor desempenho e seguir as pr\u00e1ticas recomendadas, seu site ser\u00e1 mais apreciado pelos mecanismos de busca, navegadores e redes e ser\u00e1 carregado com mais rapidez para seus leitores. Ah, e n\u00e3o deixe de conferir nosso tutorial sobre <a href=\"https:\/\/kinqsta.com\/pt\/blog\/hotlinking\/\" target=\"_blank\" rel=\"noopener noreferrer\">hotlinking<\/a>, para impedir que as pessoas roubem suas imagens e largura de banda.<\/p>\n<p>Voc\u00ea formatou suas imagens para obter um melhor desempenho? Voc\u00ea as formata \u00e0 m\u00e3o, usando um plugin ou as duas coisas? Existe outra ferramenta ou plugin que voc\u00ea recomendaria? Voc\u00ea tem alguma coisa a acrescentar? Conte suas t\u00e9cnicas e pr\u00e1ticas nos coment\u00e1rios abaixo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Confie em n\u00f3s, voc\u00ea n\u00e3o quer que o Google odeie seu site. Felizmente, voc\u00ea pode reduzir o tamanho dos seus arquivos de imagem para ajudar a &#8230;<\/p>\n","protected":false},"author":38,"featured_media":56611,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[27,30],"topic":[1039,973,1015],"class_list":["post-20728","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webperf","tag-wordpress","topic-design-sites-wordpress","topic-otimizacao-de-imagens","topic-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Otimizar Imagens para Web e Melhorar o Desempenho<\/title>\n<meta name=\"description\" content=\"As imagens geralmente s\u00e3o respons\u00e1veis por tempos de carregamento de p\u00e1gina lentos. Aprenda a otimizar imagens para web, assim como o desempenho em seu site WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Otimizar Imagens para Web e Melhorar o Desempenho\" \/>\n<meta property=\"og:description\" content=\"As imagens geralmente s\u00e3o respons\u00e1veis por tempos de carregamento de p\u00e1gina lentos. Aprenda a otimizar imagens para web, assim como o desempenho em seu site WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fm.brianleejackson\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-14T23:32:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-07T06:36:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"As imagens geralmente s\u00e3o respons\u00e1veis por tempos de carregamento de p\u00e1gina lentos. Aprenda a otimizar imagens para web, assim como o desempenho em seu site WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@brianleejackson\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/\"},\"author\":{\"name\":\"Brian Jackson\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\"},\"headline\":\"Como Otimizar Imagens para Web e Melhorar o Desempenho\",\"datePublished\":\"2018-08-14T23:32:10+00:00\",\"dateModified\":\"2023-11-07T06:36:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/\"},\"wordCount\":4638,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg\",\"keywords\":[\"webperf\",\"WordPress\"],\"articleSection\":[\"Tutoriais de Desempenho do WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/\",\"name\":\"Como Otimizar Imagens para Web e Melhorar o Desempenho\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg\",\"datePublished\":\"2018-08-14T23:32:10+00:00\",\"dateModified\":\"2023-11-07T06:36:42+00:00\",\"description\":\"As imagens geralmente s\u00e3o respons\u00e1veis por tempos de carregamento de p\u00e1gina lentos. Aprenda a otimizar imagens para web, assim como o desempenho em seu site WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Otimiza\u00e7\u00e3o de Imagens\",\"item\":\"https:\/\/kinqsta.com\/pt\/topicos\/otimizacao-de-imagens\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Otimizar Imagens para Web e Melhorar o Desempenho\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\",\"name\":\"Brian Jackson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"caption\":\"Brian Jackson\"},\"description\":\"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fm.brianleejackson\",\"https:\/\/www.linkedin.com\/in\/brianleejackson\",\"https:\/\/x.com\/brianleejackson\"],\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/author\/brianjackson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Otimizar Imagens para Web e Melhorar o Desempenho","description":"As imagens geralmente s\u00e3o respons\u00e1veis por tempos de carregamento de p\u00e1gina lentos. Aprenda a otimizar imagens para web, assim como o desempenho em seu site WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Otimizar Imagens para Web e Melhorar o Desempenho","og_description":"As imagens geralmente s\u00e3o respons\u00e1veis por tempos de carregamento de p\u00e1gina lentos. Aprenda a otimizar imagens para web, assim como o desempenho em seu site WordPress.","og_url":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_author":"https:\/\/www.facebook.com\/fm.brianleejackson","article_published_time":"2018-08-14T23:32:10+00:00","article_modified_time":"2023-11-07T06:36:42+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg","type":"image\/jpeg"}],"author":"Brian Jackson","twitter_card":"summary_large_image","twitter_description":"As imagens geralmente s\u00e3o respons\u00e1veis por tempos de carregamento de p\u00e1gina lentos. Aprenda a otimizar imagens para web, assim como o desempenho em seu site WordPress.","twitter_image":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg","twitter_creator":"@brianleejackson","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Brian Jackson","Tempo estimado de leitura":"23 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/"},"author":{"name":"Brian Jackson","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7"},"headline":"Como Otimizar Imagens para Web e Melhorar o Desempenho","datePublished":"2018-08-14T23:32:10+00:00","dateModified":"2023-11-07T06:36:42+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/"},"wordCount":4638,"commentCount":5,"publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg","keywords":["webperf","WordPress"],"articleSection":["Tutoriais de Desempenho do WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/","url":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/","name":"Como Otimizar Imagens para Web e Melhorar o Desempenho","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg","datePublished":"2018-08-14T23:32:10+00:00","dateModified":"2023-11-07T06:36:42+00:00","description":"As imagens geralmente s\u00e3o respons\u00e1veis por tempos de carregamento de p\u00e1gina lentos. Aprenda a otimizar imagens para web, assim como o desempenho em seu site WordPress.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#primaryimage","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Otimiza\u00e7\u00e3o de Imagens","item":"https:\/\/kinqsta.com\/pt\/topicos\/otimizacao-de-imagens\/"},{"@type":"ListItem","position":3,"name":"Como Otimizar Imagens para Web e Melhorar o Desempenho"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/pt\/#website","url":"https:\/\/kinqsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7","name":"Brian Jackson","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","caption":"Brian Jackson"},"description":"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.","sameAs":["https:\/\/www.facebook.com\/fm.brianleejackson","https:\/\/www.linkedin.com\/in\/brianleejackson","https:\/\/x.com\/brianleejackson"],"url":"https:\/\/kinqsta.com\/pt\/blog\/author\/brianjackson\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/20728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/comments?post=20728"}],"version-history":[{"count":19,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/20728\/revisions"}],"predecessor-version":[{"id":57117,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/20728\/revisions\/57117"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/translations\/it"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/translations\/fr"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/translations\/se"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/20728\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media\/56611"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media?parent=20728"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/tags?post=20728"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/topic?post=20728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}