{"id":3679,"date":"2015-05-04T12:34:56","date_gmt":"2015-05-04T15:34:56","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=3679"},"modified":"2021-09-14T17:32:26","modified_gmt":"2021-09-14T20:32:26","slug":"performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site","title":{"rendered":"Performance de imagens &#8211; acelerando o tempo de carregamento do seu site"},"content":{"rendered":"<figure id=\"attachment_3687\" aria-describedby=\"caption-attachment-3687\" style=\"width: 795px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg\" alt=\"Otimizacao imagens, melhores pr\u00e1ticas\" width=\"795\" height=\"230\" class=\"size-full wp-image-3687\" srcset=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg 795w, https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens-300x87.jpg 300w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><\/a><figcaption id=\"caption-attachment-3687\" class=\"wp-caption-text\">Otimiza\u00e7\u00e3o de imagens<\/figcaption><\/figure>\n<p>Atualmente a maioria dos sites cont\u00e9m uma grande quantidade de imagens. Essas imagens, quase sempre, s\u00e3o respons\u00e1veis pela maior parte das requisi\u00e7\u00f5es, chegando de 50% a 65% da carga total de uma p\u00e1gina.<br \/>\n<!--more--><\/p>\n<h2>Otimiza\u00e7\u00e3o de imagens<\/h2>\n<p>Quer reduzir o tempo de carregamento das suas p\u00e1ginas? Saiba que t\u00e9cnicas de <strong>otimiza\u00e7\u00e3o de imagens<\/strong> podem fazer uma enorme diferen\u00e7a.<\/p>\n<p>Ao otimizar suas imagens, simplesmente reduzindo a quantidade de bytes que seus usu\u00e1rios est\u00e3o baixando, voc\u00ea pode melhorar drasticamente o tempo de carregamento das p\u00e1ginas.<\/p>\n<h2>Webp imagens<\/h2>\n<p>Desenvolvido pela equipe do Google e sendo utilizado nos servi\u00e7os: <em>Picasa<\/em>, <em>Gmail <\/em>e <em>Chrome Web Store<\/em>, as imagens WebP s\u00e3o incr\u00edveis e prometem facilitar o processo de <strong>compacta\u00e7\u00e3o das imagens<\/strong> na web.<\/p>\n<figure id=\"attachment_3684\" aria-describedby=\"caption-attachment-3684\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/logo-webp.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/logo-webp.png\" alt=\"Otimiza\u00e7\u00e3o de imagens com webp\" width=\"300\" height=\"92\" class=\"size-full wp-image-3684\"><\/a><figcaption id=\"caption-attachment-3684\" class=\"wp-caption-text\">Formato webp<\/figcaption><\/figure>\n<p>Infelizmente, o formato n\u00e3o deixa de ter suas limita\u00e7\u00f5es: o suporte aos navegadores. Para servir esse tipo de imagem podemos utilizar um algoritmo do lado do servidor com base no navegador do usu\u00e1rio. Caso tenha suporte oferecemos a imagem Webp, caso contr\u00e1rio fornecemos os formatos mais comuns, PNG, JPG&#8230;<\/p>\n<ul>\n<li>Formato de imagens WebP s\u00e3o 26% menores em compara\u00e7\u00e3o com PNGs;<\/li>\n<li>S\u00e3o 25-34% menor em tamanho em compara\u00e7\u00e3o com imagens JPEG;<\/li>\n<li>Suportam transpar\u00eancia (<a href=\"\/\/developers.google.com\/speed\/webp\/)\" target=\"_blank\" rel=\"noopener noreferrer\">Developers Google<\/a>).<\/li>\n<\/ul>\n<p>Suporte dos navegadores: <a href=\"http:\/\/caniuse.com\/#feat=webp\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/caniuse.com\/#feat=webp<\/a><\/p>\n<h2>data URI<\/h2>\n<p>Uma das t\u00e9cnicas comuns de otimiza\u00e7\u00e3o \u00e9 a redu\u00e7\u00e3o da quantidade de requisi\u00e7\u00f5es HTTP. Data URI baseia-se numa ideia de <strong>incorporar imagens<\/strong> de sites com base64 codificados. Ap\u00f3s a imagem ser incorporado diretamente no HTML ou CSS do site, nenhum pedido HTTP adicional \u00e9 necess\u00e1rio para carregar essa imagem.<\/p>\n<p>Para utilizar URI\u2019s e realmente ter um ganho no desempenho das p\u00e1ginas \u00e9 importante que o <strong>GZIP no servidor esteja habilitado<\/strong>. Habilitando o GZIP o HTML, CSS, JS&#8230; s\u00e3o comprimidos no servidor antes de ser enviado ao usu\u00e1rio.<\/p>\n<p><strong>Forma tradicional:<\/strong><\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\n&amp;lt;img src=&quot;\/images\/logos\/logo.png&quot; alt=&quot;Logo&quot; \/&amp;gt;\n<\/pre>\n<p><strong>Imagem otimizada em Base 64:<\/strong><\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\n&amp;lt;img src=&quot;data:image\/png;base64,\niVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP\nC\/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA\nAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq\nch9\/\/q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0\nvr4MkhoXe0rZigAAAABJRU5ErkJggg==&quot;&amp;gt;\n<\/pre>\n<p>URI funciona como uma alternativa para o uso de CSS sprites. Cabe ao desenvolvedor analisar e ver qual a melhor solu\u00e7\u00e3o para o momento. Cada formato tem suas vantagens e desvantagens, mas <strong>ambas melhoram<\/strong> o tempo de carregamento do site:<\/p>\n<ul>\n<li>Caso GZIP n\u00e3o esteja habilitado URI pode n\u00e3o ser \u00fatil;<\/li>\n<li>Com URI voc\u00ea n\u00e3o precisar posiciona suas imagens manualmente atrav\u00e9s do background-position do CSS;<\/li>\n<li>Ao usar URI seu c\u00f3digo HTML e CSS aumentar\u00e1 consideravelmente a quantidade de linhas.<\/li>\n<\/ul>\n<p><strong>Converter arquivos JPG, PNG, GIF em data URI:<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.base64-image.de\/step-1.php\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.base64-image.de\/step-1.php<\/a><\/li>\n<\/ul>\n<p>Suporte dos navegadores: <a href=\"http:\/\/caniuse.com\/#feat=datauri\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/caniuse.com\/#feat=datauri<\/a><\/p>\n<h2>Comprimir suas imagens<\/h2>\n<p>Caso deseja servir a mesma imagem para v\u00e1rios tipos de dispositivos e telas, podemos usar uma t\u00e9cnica conhecida como <strong>compressive images<\/strong>.<\/p>\n<p>A t\u00e9cnica nada mais \u00e9 que gerar uma imagem JPG grande com o dobro da resolu\u00e7\u00e3o, por\u00e9m com uma qualidade baixa, por exemplo 30. Na hora de incluir essa imagem na tela declaramos a metade do seu tamanho. O resultado final \u00e9 muito bom, j\u00e1 que a imagem fica boa em telas retina tamb\u00e9m.<\/p>\n<p>Para <strong>maiores detalhes<\/strong> veja o artigo <a href=\"https:\/\/www.kadunew.com\/blog\/web-design\/imagens-em-tela-retina-com-compressive-images\">Imagens em Tela Retina com Compressive images<\/a> onde ensino passo-a-passo como aplicar essa t\u00e9cnica.<\/p>\n<h2>Carregue imagens com lazy<\/h2>\n<p>A otimiza\u00e7\u00e3o com lazy loading <strong>carrega o conte\u00fado<\/strong> apenas quando o mesmo est\u00e1 na \u00e1rea vis\u00edvel da janela do browser.<\/p>\n<p>Ao acessar uma p\u00e1gina com muitas imagens, por exemplo, as que est\u00e3o mais abaixo (fora da \u00e1rea vis\u00edvel do usu\u00e1rio), n\u00e3o ser\u00e3o carregadas.<\/p>\n<p>Imagens ser\u00e3o baixadas para o computador do usu\u00e1rio <strong>apenas quando for dado scroll<\/strong> para baixo e as imagens passarem pela \u00e1rea vis\u00edvel do usu\u00e1rio.<\/p>\n<p><strong>Exemplos e bibliotecas Lazy Loading<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.appelsiini.net\/projects\/lazyload\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.appelsiini.net\/projects\/lazyload<\/a><\/li>\n<li><a href=\"http:\/\/callmecavs.github.io\/layzr.js\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/callmecavs.github.io\/layzr.js\/<\/a><\/li>\n<\/ul>\n<h2>CSS Sprites<\/h2>\n<p>T\u00e9cnica muito conhecida mas ainda muitos n\u00e3o utilizam. Essa Otimiza\u00e7\u00e3o consiste em <strong>combinar muitas imagens<\/strong> de logos, \u00edcones.. em uma s\u00f3, a fim de reduzir as solicita\u00e7\u00f5es HTTP da pagina e melhorar assim, o tempo de carregamento.<\/p>\n<figure id=\"attachment_3549\" aria-describedby=\"caption-attachment-3549\" style=\"width: 437px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/css-sprite-performance.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/css-sprite-performance.png\" alt=\"Exemplo CSS Sprite\" width=\"437\" height=\"170\" class=\"size-full wp-image-3549\" srcset=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/css-sprite-performance.png 437w, https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/css-sprite-performance-300x117.png 300w\" sizes=\"(max-width: 437px) 100vw, 437px\" \/><\/a><figcaption id=\"caption-attachment-3549\" class=\"wp-caption-text\">Performance Web com CSS Sprite<\/figcaption><\/figure>\n<p><strong>Ferramentas para CSS Sprites:<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/wearekiss.com\/spritepad\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/wearekiss.com\/spritepad<\/a><\/li>\n<li><a href=\"http:\/\/compass-style.org\/help\/tutorials\/spriting\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/compass-style.org\/help\/tutorials\/spriting\/<\/a><\/li>\n<li><a href=\"http:\/\/instantsprite.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/instantsprite.com\/<\/a><\/li>\n<\/ul>\n<h2>Use ferramentas de otimiza\u00e7\u00e3o de imagens<\/h2>\n<p>H\u00e1 diversas <strong>ferramentas<\/strong> que permitem otimizar as imagens sem perderem qualidade ou sua transpar\u00eancia.<\/p>\n<p>Imagens exportadas de editores de imagens como  PhotoShop, FireWorks&#8230; n\u00e3o est\u00e3o ainda totalmente <strong>otimizadas<\/strong> para serem usadas na web. Elas ainda t\u00eam informa\u00e7\u00f5es sobre cores, camadas etc.<\/p>\n<ul>\n<li><a href=\"http:\/\/kraken.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/kraken.io\/<\/a><br \/>\nAtualmente a melhor ferramenta online para compactar imagens. \u00c9 uma ferramenta paga, entretanto podemos usar o modo gratuito, que nos permite compactar no m\u00e1ximo imagens de 1MB.<\/li>\n<li><a href=\"http:\/\/compressor.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/compressor.io\/<\/a><br \/>\nFerramenta totalmente gratuita e com a mesma efici\u00eancia que a anterior.<\/li>\n<\/ul>\n<figure id=\"attachment_3782\" aria-describedby=\"caption-attachment-3782\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/Ferramenta-otimizacao-imagens.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/Ferramenta-otimizacao-imagens.png\" alt=\"Otimizar imagens com Kraken\" width=\"800\" height=\"393\" class=\"size-full wp-image-3782\" srcset=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/Ferramenta-otimizacao-imagens.png 800w, https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/Ferramenta-otimizacao-imagens-300x147.png 300w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><figcaption id=\"caption-attachment-3782\" class=\"wp-caption-text\">Melhore a performance das suas imagens com a Ferramenta Kraken<\/figcaption><\/figure>\n<p><strong>Mais ferramentas de Otimiza\u00e7\u00e3o de imagens <\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/luci.criosweb.ro\/riot\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/luci.criosweb.ro\/riot\/<\/a><br \/>\nPrograma para otimizar JPG, PNG, GIF&#8230;<\/li>\n<li><a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/tinypng.com\/<\/a><br \/>\nServi\u00e7o online para compactar imagens no formato PNG<\/li>\n<li><a href=\"http:\/\/www.imagemagick.org\/script\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.imagemagick.org\/script\/<\/a><br \/>\nPrograma para compactar imagens PNG, JPEG, JPEG-2000, GIF, TIFF, DPX, EXR, WebP&#8230;<\/li>\n<li><a href=\"http:\/\/webresizer.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/webresizer.com\/<\/a><br \/>\n\u00d3tima ferramenta online para compactar, ajustar contraste, qualidade, etc.<\/li>\n<\/ul>\n<h2>Elemento Picture<\/h2>\n<p>Muitas vezes servir uma mesma imagem grande para v\u00e1rios dispositivos pode ter um <strong>impacto negativo no desempenho da p\u00e1gina<\/strong>. Ela pode se adaptar ao layout ao dispositivo, mas o tamanho em bytes ainda ser\u00e1 o mesmo.<\/p>\n<p>O elemento de imagem <code>picture <\/code>atende a diferentes imagens conforme o tamanho da tela do dispositivo. O elemento <code>picture<\/code> tem total suporte a media queries; e baseado na largura do <em>viewport <\/em>consegue enviar a imagem mais apropriada ao usu\u00e1rio.<\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\n&amp;lt;picture&amp;gt;\n&amp;lt;source media=&quot;(min-width: 1024px)&quot; srcset=&quot;dest\/1024\/tiger.jpg&quot;&amp;gt;\n&amp;lt;source media=&quot;(min-width: 640px)&quot; srcset=&quot;dest\/640\/tiger.jpg&quot;&amp;gt;\n&amp;lt;source srcset=&quot;dest\/320\/tiger.jpg&quot;&amp;gt;\n&amp;lt;img src=&quot;dest\/640\/tiger.jpg&quot; alt=&quot;Imagem para navegadores sem suporte.&quot;&amp;gt;\n&amp;lt;p&amp;gt;Texto para acessibilidade.&amp;lt;\/p&amp;gt;\n&amp;lt;\/picture&amp;gt;\n<\/pre>\n<p>Suporte dos navegadores: <a href=\"http:\/\/caniuse.com\/#feat=picture\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/caniuse.com\/#feat=picture<\/a><\/p>\n<h2>Conclus\u00e3o<\/h2>\n<p>Listei nesse artigo algumas das melhores <strong>pr\u00e1ticas de otimiza\u00e7\u00e3o<\/strong> de imagem, pois as imagens podem ser um enorme obst\u00e1culo no desempenho de uma p\u00e1gina, entretanto, aplicando t\u00e9cnicas de otimiza\u00e7\u00e3o de imagem simples, podemos reduzir o tempo de carregamento da p\u00e1gina.<\/p>\n<p>Al\u00e9m das dicas apresentadas aqui, temos outros <strong>pontos importantes<\/strong> para otimizar a velocidade de um site. Confira mais dicas no artigo <a href=\"https:\/\/www.kadunew.com\/blog\/web-design\/tecnicas-e-ferramentas-para-melhorar-a-performance-de-sites\" title=\"T\u00e9cnicas e ferramentas para melhorar a performance de sites\">T\u00e9cnicas e Ferramentas para Melhorar a Performance de Sites<\/a>.<\/p>\n<p>Curta a p\u00e1gina do <a href=\"https:\/\/www.facebook.com\/pages\/Kadunew-Artigos-e-tutoriais-sobre-Web-Design\/787883281258323\" title=\"Artigos e tutoriais sobre Web Design\" target=\"_blank\" rel=\"noopener noreferrer\">blog kadunew<\/a> no Facebook. Siga-me no Twitter: <a href=\"http:\/\/twitter.com\/kadunew\" rel=\"nofollow\">@kadunew<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Atualmente a maioria dos sites cont\u00e9m uma grande quantidade de imagens. Essas imagens, quase sempre, s\u00e3o respons\u00e1veis pela maior parte das requisi\u00e7\u00f5es, chegando de 50% a 65% da carga total de uma p\u00e1gina.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-3679","post","type-post","status-publish","format-standard","hentry","category-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Performance de imagens - acelerando o tempo de carregamento do seu site<\/title>\n<meta name=\"description\" content=\"Uma cole\u00e7\u00e3o de ferramentas e t\u00e9cnicas para otimiza\u00e7\u00e3o de imagens. Melhore o tempo de carregamento das suas p\u00e1ginas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Performance de imagens - acelerando o tempo de carregamento do seu site\" \/>\n<meta property=\"og:description\" content=\"Uma cole\u00e7\u00e3o de ferramentas e t\u00e9cnicas para otimiza\u00e7\u00e3o de imagens. Melhore o tempo de carregamento das suas p\u00e1ginas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-04T15:34:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-14T20:32:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site\",\"url\":\"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site\",\"name\":\"Performance de imagens - acelerando o tempo de carregamento do seu site\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg\",\"datePublished\":\"2015-05-04T15:34:56+00:00\",\"dateModified\":\"2021-09-14T20:32:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Uma cole\u00e7\u00e3o de ferramentas e t\u00e9cnicas para otimiza\u00e7\u00e3o de imagens. Melhore o tempo de carregamento das suas p\u00e1ginas.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg\",\"width\":795,\"height\":230,\"caption\":\"Otimiza\u00e7\u00e3o de imagens\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/web-design\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Performance de imagens &#8211; acelerando o tempo de carregamento do seu site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Performance de imagens - acelerando o tempo de carregamento do seu site","description":"Uma cole\u00e7\u00e3o de ferramentas e t\u00e9cnicas para otimiza\u00e7\u00e3o de imagens. Melhore o tempo de carregamento das suas p\u00e1ginas.","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:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site","og_locale":"pt_BR","og_type":"article","og_title":"Performance de imagens - acelerando o tempo de carregamento do seu site","og_description":"Uma cole\u00e7\u00e3o de ferramentas e t\u00e9cnicas para otimiza\u00e7\u00e3o de imagens. Melhore o tempo de carregamento das suas p\u00e1ginas.","og_url":"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site","og_site_name":"KADUNEW","article_published_time":"2015-05-04T15:34:56+00:00","article_modified_time":"2021-09-14T20:32:26+00:00","og_image":[{"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site","url":"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site","name":"Performance de imagens - acelerando o tempo de carregamento do seu site","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg","datePublished":"2015-05-04T15:34:56+00:00","dateModified":"2021-09-14T20:32:26+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Uma cole\u00e7\u00e3o de ferramentas e t\u00e9cnicas para otimiza\u00e7\u00e3o de imagens. Melhore o tempo de carregamento das suas p\u00e1ginas.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/otimizacao-imagens.jpg","width":795,"height":230,"caption":"Otimiza\u00e7\u00e3o de imagens"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/performance-de-imagens-acelerando-o-tempo-de-carregamento-do-seu-site#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/www.kadunew.com\/blog\/category\/web-design"},{"@type":"ListItem","position":3,"name":"Performance de imagens &#8211; acelerando o tempo de carregamento do seu site"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3679"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=3679"}],"version-history":[{"count":38,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3679\/revisions"}],"predecessor-version":[{"id":4492,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3679\/revisions\/4492"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=3679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=3679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=3679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}