{"id":670,"date":"2023-05-02T18:29:30","date_gmt":"2023-05-02T18:29:30","guid":{"rendered":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/?p=670"},"modified":"2023-05-02T18:29:32","modified_gmt":"2023-05-02T18:29:32","slug":"ferramentas-de-otimizacao-de-imagem","status":"publish","type":"post","link":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/","title":{"rendered":"Ferramentas de otimiza\u00e7\u00e3o de imagem"},"content":{"rendered":"\n

Existem alguns detalhes t\u00e9cnicos envolvidos, mas a regra geral \u00e9 apenas manter o arquivo de imagem o menor poss\u00edvel.<\/p>\n\n\n\n

De um modo geral, voc\u00ea n\u00e3o deseja que seu site carregue uma imagem gigantesca, apenas para que ela seja reduzida pelo HTML. Isso causa velocidades de p\u00e1gina desnecessariamente altas! Otimizar suas imagens \u00e9 uma \u00f3tima maneira de melhorar seus tempos de p\u00e1gina, e isso pode ser feito de v\u00e1rias maneiras.<\/p>\n\n\n\n

As ferramentas ajudar\u00e3o!<\/p>\n\n\n\n

Ferramentas de redimensionamento de imagens N\u00e3o poder\u00edamos escolher apenas uma ferramenta para esta importante etapa. Basicamente, voc\u00ea deseja que suas imagens tenham exatamente a mesma largura e altura necess\u00e1rias em seu site. Isso significa que voc\u00ea n\u00e3o deseja ter uma imagem com 1200 pixels de largura, mas exibida em seu blog com 300 pixels.<\/p>\n\n\n\n

Voc\u00ea precisa redimensionar o arquivo de imagem real para 300 pixels. Isso reduzir\u00e1 o tamanho de suas imagens e reduzir\u00e1 drasticamente o tempo de carregamento. Aqui est\u00e1 uma lista de ferramentas e tutoriais com os quais voc\u00ea pode fazer isso:<\/p>\n\n\n\n

Redimensionando uma imagem no Photoshop<\/p>\n\n\n\n

Redimensionando uma imagem no Paint<\/p>\n\n\n\n

Redimensionando uma imagem no Microsoft Picture Manager<\/p>\n\n\n\n

Pixlr<\/p>\n\n\n\n

Redimensionador da Web<\/p>\n\n\n\n

Encolher imagens<\/p>\n\n\n\n

Ferramentas de compress\u00e3o de imagem de redimensionamento de imagem<\/p>\n\n\n\n

Da mesma forma, existem tantas ferramentas de compacta\u00e7\u00e3o por a\u00ed tamb\u00e9m!<\/p>\n\n\n\n

A compacta\u00e7\u00e3o de imagem combinar\u00e1 cores semelhantes e remover\u00e1 muito lixo extra de que suas imagens n\u00e3o precisam. Isso parece brutal, mas geralmente voc\u00ea n\u00e3o consegue ver a diferen\u00e7a entre as imagens que s\u00e3o e as que n\u00e3o s\u00e3o compactadas! Voc\u00ea tamb\u00e9m pode fazer isso no Photoshop, mas encontramos algumas ferramentas de compacta\u00e7\u00e3o em massa online que podem ser mais f\u00e1ceis de usar:<\/p>\n\n\n\n

Kraken.io<\/p>\n\n\n\n

TinyPNG<\/p>\n\n\n\n

Outra forma de fazer isso \u00e9 com a ferramenta PageSpeed Insights dentro da extens\u00e3o do Google Chrome .<\/p>\n\n\n\n

Na se\u00e7\u00e3o Otimizar imagens, os links \u201cVer conte\u00fado otimizado\u201d aparecer\u00e3o ao lado de cada sugest\u00e3o. Voc\u00ea pode abri-los e salv\u00e1-los para uso em seu site! grandepexinxa<\/a>.<\/p>\n\n\n\n

Lazy Load Images Voc\u00ea pode dar um passo adiante para acelerar suas imagens. Na verdade, voc\u00ea pode simplesmente n\u00e3o carreg\u00e1-los! \u2026<\/p>\n\n\n\n

isto \u00e9, at\u00e9 que o visitante realmente precise v\u00ea-los. As imagens carregadas lentamente s\u00e3o impedidas, via JavaScript, de carregar at\u00e9 que um determinado evento aconte\u00e7a. Esse evento pode ser baseado no tempo ou no local para onde o visitante est\u00e1 olhando.<\/p>\n\n\n\n

Por exemplo, uma imagem n\u00e3o ser\u00e1 carregada at\u00e9 que o usu\u00e1rio role a p\u00e1gina o suficiente para v\u00ea-la. Isso evita que sua p\u00e1gina tenha que esperar o carregamento de uma imagem que s\u00f3 ser\u00e1 vista v\u00e1rios segundos (ou at\u00e9 minutos) depois. Lazy load pode ser um t\u00f3pico complicado, mas existem muitos plug-ins WordPress de carregamento lento e  plug-ins jQuery que n\u00e3o s\u00e3o muito dif\u00edceis de configurar se voc\u00ea souber lidar com HTML e JavaScript.<\/p>\n\n\n\n

Ferramentas CSS Sprite<\/p>\n\n\n\n

Seu site pode ter algumas imagens e \u00edcones que voc\u00ea criou ou encontrou online para usar em todo o site.<\/p>\n\n\n\n

Uma \u00f3tima maneira de economizar espa\u00e7o \u00e9 combinando essas imagens em sprites CSS (n\u00e3o, n\u00e3o a bebida). Um sprite CSS permite que voc\u00ea tenha v\u00e1rias imagens combinadas em uma, economizando a quantidade de vezes que um navegador precisa se comunicar com o servidor. Em seguida, um CSS simples divide a imagem em se\u00e7\u00f5es para exibir a parte correta onde ela \u00e9 necess\u00e1ria no site.<\/p>\n\n\n\n

Combinar as imagens e encontrar as dimens\u00f5es corretas para cada se\u00e7\u00e3o pode ser um processo chato. No entanto, algumas pessoas legais criaram algumas ferramentas aqui e ali para ajudar a facilitar o processo!<\/p>\n\n\n\n

Spritecow<\/p>\n\n\n\n

SpritePad Spritebox (foto acima)<\/p>\n","protected":false},"excerpt":{"rendered":"

Existem alguns detalhes t\u00e9cnicos envolvidos, mas a regra geral \u00e9 apenas manter o arquivo de imagem o menor poss\u00edvel. De um modo geral, voc\u00ea n\u00e3o deseja que seu site carregue uma imagem gigantesca, apenas para que ela seja reduzida pelo HTML. Isso causa velocidades de p\u00e1gina desnecessariamente altas! Otimizar suas imagens \u00e9 uma \u00f3tima maneira […]<\/p>\n","protected":false},"author":4,"featured_media":671,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,7],"tags":[],"yoast_head":"\nFerramentas de otimiza\u00e7\u00e3o de imagem<\/title>\n<meta name=\"description\" content=\"Existem alguns detalhes t\u00e9cnicos envolvidos, mas a regra geral \u00e9 apenas manter o arquivo de imagem o menor poss\u00edvel.\" \/>\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.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ferramentas de otimiza\u00e7\u00e3o de imagem\" \/>\n<meta property=\"og:description\" content=\"Existem alguns detalhes t\u00e9cnicos envolvidos, mas a regra geral \u00e9 apenas manter o arquivo de imagem o menor poss\u00edvel.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/\" \/>\n<meta property=\"og:site_name\" content=\"Projeto Web Site\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-02T18:29:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-02T18:29:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-content\/uploads\/2023\/05\/ferramentas-de-otimizacao-de-imagem.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"701\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"pw_webmaster_developer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"pw_webmaster_developer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/\",\"url\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/\",\"name\":\"Ferramentas de otimiza\u00e7\u00e3o de imagem\",\"isPartOf\":{\"@id\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/#website\"},\"datePublished\":\"2023-05-02T18:29:30+00:00\",\"dateModified\":\"2023-05-02T18:29:32+00:00\",\"author\":{\"@id\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/#\/schema\/person\/7f9a2712f7b45991f746f3c0446347e7\"},\"description\":\"Existem alguns detalhes t\u00e9cnicos envolvidos, mas a regra geral \u00e9 apenas manter o arquivo de imagem o menor poss\u00edvel.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ferramentas de otimiza\u00e7\u00e3o de imagem\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/#website\",\"url\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/\",\"name\":\"Projeto Web Site\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/#\/schema\/person\/7f9a2712f7b45991f746f3c0446347e7\",\"name\":\"pw_webmaster_developer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-content\/litespeed\/avatar\/29d81feb7cb4e2de3c0e5529ed23f488.jpg?ver=1780525625\",\"contentUrl\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-content\/litespeed\/avatar\/29d81feb7cb4e2de3c0e5529ed23f488.jpg?ver=1780525625\",\"caption\":\"pw_webmaster_developer\"},\"url\":\"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/author\/pw_webmaster_developer\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ferramentas de otimiza\u00e7\u00e3o de imagem","description":"Existem alguns detalhes t\u00e9cnicos envolvidos, mas a regra geral \u00e9 apenas manter o arquivo de imagem o menor poss\u00edvel.","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.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/","og_locale":"pt_BR","og_type":"article","og_title":"Ferramentas de otimiza\u00e7\u00e3o de imagem","og_description":"Existem alguns detalhes t\u00e9cnicos envolvidos, mas a regra geral \u00e9 apenas manter o arquivo de imagem o menor poss\u00edvel.","og_url":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/","og_site_name":"Projeto Web Site","article_published_time":"2023-05-02T18:29:30+00:00","article_modified_time":"2023-05-02T18:29:32+00:00","og_image":[{"width":1200,"height":701,"url":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-content\/uploads\/2023\/05\/ferramentas-de-otimizacao-de-imagem.webp","type":"image\/webp"}],"author":"pw_webmaster_developer","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"pw_webmaster_developer","Est. tempo de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/","url":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/","name":"Ferramentas de otimiza\u00e7\u00e3o de imagem","isPartOf":{"@id":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/#website"},"datePublished":"2023-05-02T18:29:30+00:00","dateModified":"2023-05-02T18:29:32+00:00","author":{"@id":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/#\/schema\/person\/7f9a2712f7b45991f746f3c0446347e7"},"description":"Existem alguns detalhes t\u00e9cnicos envolvidos, mas a regra geral \u00e9 apenas manter o arquivo de imagem o menor poss\u00edvel.","breadcrumb":{"@id":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/ferramentas-de-otimizacao-de-imagem\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/"},{"@type":"ListItem","position":2,"name":"Ferramentas de otimiza\u00e7\u00e3o de imagem"}]},{"@type":"WebSite","@id":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/#website","url":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/","name":"Projeto Web Site","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/#\/schema\/person\/7f9a2712f7b45991f746f3c0446347e7","name":"pw_webmaster_developer","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/#\/schema\/person\/image\/","url":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-content\/litespeed\/avatar\/29d81feb7cb4e2de3c0e5529ed23f488.jpg?ver=1780525625","contentUrl":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-content\/litespeed\/avatar\/29d81feb7cb4e2de3c0e5529ed23f488.jpg?ver=1780525625","caption":"pw_webmaster_developer"},"url":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/author\/pw_webmaster_developer\/"}]}},"_links":{"self":[{"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/posts\/670"}],"collection":[{"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/comments?post=670"}],"version-history":[{"count":1,"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/posts\/670\/revisions"}],"predecessor-version":[{"id":672,"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/posts\/670\/revisions\/672"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/media\/671"}],"wp:attachment":[{"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/media?parent=670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/categories?post=670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.projetoweb.com.br\/marketing-de-conteudo\/wp-json\/wp\/v2\/tags?post=670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}