{"id":530,"date":"2020-02-12T15:28:26","date_gmt":"2020-02-12T15:28:26","guid":{"rendered":"https:\/\/drcode.com.br\/blog\/?p=530"},"modified":"2020-02-12T15:28:26","modified_gmt":"2020-02-12T15:28:26","slug":"otimizando-imagens-com-o-gulp","status":"publish","type":"post","link":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/","title":{"rendered":"Otimizando imagens com o Gulp"},"content":{"rendered":"<p>Se voc\u00ea \u00e9 um desenvolvedor front end, deve (ou deveria) se importar com a performance do seu site otimizar imagens. Se olharmos no site <a href=\"https:\/\/httparchive.org\/\">HttpArchive<\/a> voc\u00ea descobrir\u00e1 que o maior peso da internet s\u00e3o as imagens.<\/p>\n<p>Isso significa que: Sempre que acessarem nosso site, o que mais consumir\u00e1 a banda do usu\u00e1rio s\u00e3o as imagens. Por isso a import\u00e2ncia de otimiz\u00e1-las para que tenham o menor peso poss\u00edvel.<\/p>\n<h2>Otimizando imagens de um jeito f\u00e1cil<\/h2>\n<p>Existe o site <a href=\"https:\/\/tinypng.com\">TinyPNG<\/a> que faz a <strong>otimiza\u00e7\u00e3o de imagens<\/strong> de um jeito muito pr\u00e1tico.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-531 size-full\" title=\"Otimizando Imagens com o TinyPNG\" src=\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagem-com-tinypng.png\" alt=\"Otimizando Imagens com o TinyPNG\" width=\"968\" height=\"509\" srcset=\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagem-com-tinypng.png 968w, https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagem-com-tinypng-300x158.png 300w, https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagem-com-tinypng-768x404.png 768w\" sizes=\"auto, (max-width: 968px) 100vw, 968px\" \/><\/p>\n<p>Logo ao acessar o site, voc\u00ea j\u00e1 ver\u00e1 esta tela. Basta arrastar suas imagens para a \u00e1rea de upload e o site ir\u00e1 comprimi-las para voc\u00ea. Retornando este resultado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-532 size-full\" title=\"Imagem otimizada com o TinyPNG\" src=\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/imagem-otimizada-com-tinypng.png\" alt=\"Otimizando Imagens com o TinyPNG\" width=\"970\" height=\"587\" srcset=\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/imagem-otimizada-com-tinypng.png 970w, https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/imagem-otimizada-com-tinypng-300x182.png 300w, https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/imagem-otimizada-com-tinypng-768x465.png 768w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><\/p>\n<p>Podemos ver que da imagem que fiz o upload no site, ele conseguiu <strong>otimizar 69% do peso da imagem<\/strong> sem perder a qualidade. Isso mostra o enorme ganho que podemos ter fazendo otimiza\u00e7\u00f5es de imagens.<\/p>\n<p>Mas, se \u00e9 s\u00f3 fazer isso para <strong>otimizar imagens<\/strong>, por que ningu\u00e9m faz isso? A resposta \u00e9 simples. Imagine um projeto gigantesco com v\u00e1rias pastas e v\u00e1rias imagens. Agora imagine <strong>otimizar imagem<\/strong> por imagem depois subi-las no seu servidor novamente. Puff! Uma perda de tempo segundo muitos desenvolvedores.<\/p>\n<p>Pensando nisso, com o surgimento do <a href=\"https:\/\/drcode.com.br\/blog\/node-js\/node-js-o-que-e-e-como-funciona\/\">Noje.js<\/a> foi criado o <a href=\"https:\/\/gulpjs.com\/\">Gulp<\/a>.<\/p>\n<h2>Conhecendo o Gulp<\/h2>\n<p>O gulp n\u00e3o serve apenas para <strong>otimizar imagens do site<\/strong> ele \u00e9 um automatizador de tarefas do nosso front-end. Ou seja, ele faz todas as tarefas que todo desenvolvedor front-end deveria fazer antes de colocar um site no ar.<\/p>\n<p>Com o gulp podemos:<\/p>\n<ul>\n<li>Otimizar imagens<\/li>\n<li>Minificar arquivos css e js<\/li>\n<li>Compilar SASS<\/li>\n<li>Concatenar v\u00e1rios arquivos em um s\u00f3<\/li>\n<\/ul>\n<p>S\u00e3o infintas as coisas que podemos fazer com Gulp. Mais abaixo deixarei alguns dos principais plugins.<\/p>\n<h3>Pr\u00e9-requisitos para otimizar imagens com gulp<\/h3>\n<p>Para utilizar o Gulp, \u00e9 necess\u00e1rio pelo menos estes requisitos:<\/p>\n<ol>\n<li>Node.js na vers\u00e3o 8.11.1 ou superior<\/li>\n<li>NPM na vers\u00e3o 5.6.0 ou superior<\/li>\n<li>NPX na vers\u00e3o 9.7.1 ou superior<\/li>\n<\/ol>\n<p>Caso voc\u00ea n\u00e3o tenha instalado, voc\u00ea pode instalar atrav\u00e9s deste link <a href=\"https:\/\/nodejs.org\/en\/\">https:\/\/nodejs.org\/en\/<\/a><\/p>\n<h2>Utilizando o gulp para otimizar imagens<\/h2>\n<p>Atendendo os pr\u00e9-requisitos m\u00ednimos para utilizar o gulp, vamos a m\u00e3o na massa! A primeira coisa \u00e9 instalar o Gulp. Para isso abra o seu terminal (Mac ou Linux) ou seu Prompt de Comando\/PowerShell (Windows) na pasta do seu projeto.<\/p>\n<p>Al\u00e9m disso no windows voc\u00ea pode clicar com o bot\u00e3o esquerdo segurando a tecla Shift e selecionar a op\u00e7\u00e3o, Abrir CMD aqui.<\/p>\n<p>Execute o seguinte comando:<\/p>\n<p><code>npm init<\/code><\/p>\n<p>Este comando ir\u00e1 criar o arquivo package.json, este arquivo \u00e9 semelhante ao do <a href=\"https:\/\/drcode.com.br\/blog\/php\/composer-entendendo-na-pratica\/\">composer<\/a>. Serve para guardarmos todas as depend\u00eancias de nosso projeto. Voc\u00ea pode preencher as informa\u00e7\u00f5es que lhe forem solicitadas no terminal ou apertar Enter em todas elas sem preencher nada que funciona tamb\u00e9m.<\/p>\n<p>Logo ap\u00f3s estarmos com nosso package.json criado, executaremos o seguinte comando:<\/p>\n<p><code>npm install gulp-cli -g<\/code><\/p>\n<p>Este comando ir\u00e1 de fato instalar o gulp em nossa maquina.<\/p>\n<h3>Criando o gulpfile.js<\/h3>\n<p>Primeiramente para o gulp funcionar e <strong>otimizar nossas imagens<\/strong> precisamos ter criado um arquivo chamado &#8220;gulpfile.js&#8221; na raiz de nosso projeto. Este arquivo ser\u00e1 respons\u00e1vel por todas as nossas tarefas, inclusive a te otimizar e <strong>diminuir o peso das imagens sem perder qualidade<\/strong>.<\/p>\n<p>Neste arquivo voc\u00ea pode iniciar com esta estrutura padr\u00e3o do gulp.<\/p>\n<pre class=\"theme:monokai font-size:14 line-height:26 top-margin:15 bottom-margin:15 left-margin:15 right-margin:15 toolbar:2 nums:false lang:js decode:true\">var gulp = require('gulp');\r\n\r\ngulp.task('default', function() {\r\n    \/\/ Tarefas\r\n});<\/pre>\n<h3>Criando nossa tarefa de otimizar imagens<\/h3>\n<p>Portanto para <strong>otimizar nossas imagens<\/strong> e reduzir o peso delas devemos instalar um plugin para o gulp. O <a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\">gulp-imagemin<\/a> para isso, basta executar este comando no seu terminal:<\/p>\n<p><code>npm install gulp-imagemin<\/code><\/p>\n<p>Contudo sempre que vamos utilizar um plugin no nosso gulpfile.js \u00e9 necess\u00e1rio que fa\u00e7amos o require dele. Desta forma:<\/p>\n<pre class=\"marking:true nums:false lang:js mark:2 decode:true\">var gulp = require('gulp');\r\nvar imagemin = require('gulp-imagemin');\r\n\r\ngulp.task('default', function() {\r\n    \/\/ Tarefas\r\n});<\/pre>\n<p>Mas ent\u00e3o agora vamos entender como o gulp funciona. Praticamente tudo no gulp tem o seguinte fluxo:<\/p>\n<p>Algo entra -&gt; \u00c9 tratado -&gt; \u00c9 devolvido.<\/p>\n<p>Ent\u00e3o isso utilizamos os comandos:<\/p>\n<ul>\n<li><code>src()<\/code> Cuida da entrada dos arquivos<\/li>\n<li><code>pipe()<\/code> Serve de ligar o arquivo recebido com a tratativa<\/li>\n<li><code>dest()<\/code> Encarregado de devolver o arquivo tratado para o seu devido lugar<\/li>\n<\/ul>\n<p>Primeiramente vamos imaginar a seguinte estrutura de diret\u00f3rios em nosso projeto:<\/p>\n<pre class=\"nums:false lang:default decode:true \">|-- css\/\r\n|-- images\/\r\n    -- banners\/\r\n       -- banner.png\r\n    -- diversos\/\r\n       -- diversos01.png\r\n       -- diversos02.png\r\n    -- imagem01.png\r\n|-- js\/\r\n|-- index.html\r\n|-- gulpfile.js\r\n|-- package.json<\/pre>\n<p>Ent\u00e3o com esta estrutura de pastas teremos o seguinte gulpfile.js<\/p>\n<pre class=\"lang:js mark:5,6,7 decode:true \">var gulp = require('gulp');\r\nvar imagemin = require('gulp-imagemin');\r\n\r\ngulp.task('default', function(){ \/\/gulp.task() define uma nova tarefa\r\n    gulp.src('images\/**\/*') \/\/Dizemos de onde vir\u00e1 a entrada\r\n    .pipe(imagemin()) \/\/Fazemos a tratativa com a fun\u00e7\u00e3o do gulp-imagemin\r\n    .pipe(gulp.dest('images')) \/\/Devolvemos as imagens tratadas para seus lugares\r\n});<\/pre>\n<p>Nosso arquivo est\u00e1 completo e pronto para <strong>otimizar as imagens<\/strong>. Para ver ele funcionando, basta abrir o seu terminal e executar o comando:<\/p>\n<p><code>gulp<\/code><\/p>\n<p>Ap\u00f3s a execu\u00e7\u00e3o se tudo der certo, voc\u00ea ver\u00e1 a quantidade de imagens que foram otimizadas e quanto foi salvo do peso delas.<\/p>\n<h2>Principais plugins para o gulp<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-util\">gulp-util<\/a> varias fun\u00e7\u00f5es uteis<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-ruby-sass\">gulp-ruby-sass<\/a> compilador de SASS<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-minify-css\">gulp-minify-css<\/a> minificador de CSS<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\">gulp-imagemin<\/a> otimizador de imagens<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-replace\">gulp-replace<\/a> faz a substitui\u00e7\u00e3o de strings<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-concat\">gulp-concat<\/a> concatena v\u00e1rios arquivos em um<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-rename\">gulp-rename<\/a> renomeia arquivos<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-livereload\">gulp-livereload<\/a> faz o reload automatico sempre que ocorre alguma modifica\u00e7\u00e3o no arquivo<\/li>\n<\/ul>\n<p>Contudo pode parecer trabalhoso desta forma, mas em um projeto pronto, que pegamos para fazer SEO, por exemplo. O trabalho de otimiza\u00e7\u00e3o fica muito mais f\u00e1cil. Imagine s\u00f3, ter que minificar diversos css, depois uni-los todos em um \u00fanico s\u00f3 e fazer tudo isso manualmente. Com o Gulp \u00e9 muito mais f\u00e1cil.<\/p>\n<p>Enfim, n\u00e3o se esque\u00e7a de deixar seu coment\u00e1rio, sua d\u00favida, critica ou elogio. E at\u00e9 o pr\u00f3ximo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea \u00e9 um desenvolvedor front end, deve (ou deveria) se importar com a performance do seu site otimizar imagens. Se olharmos no site HttpArchive voc\u00ea descobrir\u00e1 que o maior peso da internet s\u00e3o as imagens. Isso significa que: Sempre que acessarem nosso site, o que mais consumir\u00e1 a banda do usu\u00e1rio s\u00e3o as imagens. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":545,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,4,172,1],"tags":[213,211,208,206,207,209,212,80,210],"class_list":["post-530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-jquery","category-node-js","category-sem-categoria","tag-dica-para-diminuir-imagem","tag-diminuindo-peso-da-imagem","tag-diminuir-imagens","tag-otimizando-imagens","tag-otimizar-imagens","tag-otimizar-imagens-seo","tag-peso-da-imagem","tag-seo","tag-utilizando-gulp"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Otimizar imagens com Gulp - Melhore a performace de seu site | Dr Code<\/title>\n<meta name=\"description\" content=\"Otimizar imagens pode parecer uma tarefa dificil e desnecess\u00e1ria. Mas 67% da internet \u00e9 composta s\u00f3 de imagens. Utilize o Gulp para otimizar suas imagens.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Otimizar imagens com Gulp - Melhore a performace de seu site | Dr Code\" \/>\n<meta property=\"og:description\" content=\"Otimizar imagens pode parecer uma tarefa dificil e desnecess\u00e1ria. Mas 67% da internet \u00e9 composta s\u00f3 de imagens. Utilize o Gulp para otimizar suas imagens.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/\" \/>\n<meta property=\"og:site_name\" content=\"Dr Code\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/Dr-Code\/1408258822807332\" \/>\n<meta property=\"article:author\" content=\"http:\/\/www.facebook.com.br\/Felipeourjake\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-12T15:28:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagens-com-gulp.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felipe Mello\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Mello\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/\"},\"author\":{\"name\":\"Felipe Mello\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\"},\"headline\":\"Otimizando imagens com o Gulp\",\"datePublished\":\"2020-02-12T15:28:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/\"},\"wordCount\":883,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagens-com-gulp.jpg\",\"keywords\":[\"dica para diminuir imagem\",\"diminuindo peso da imagem\",\"diminuir imagens\",\"otimizando imagens\",\"otimizar imagens\",\"otimizar imagens SEO\",\"peso da imagem\",\"seo\",\"utilizando gulp\"],\"articleSection\":[\"HTML 5\",\"JS\/Jquery\",\"Node.js\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/\",\"url\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/\",\"name\":\"Otimizar imagens com Gulp - Melhore a performace de seu site | Dr Code\",\"isPartOf\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagens-com-gulp.jpg\",\"datePublished\":\"2020-02-12T15:28:26+00:00\",\"author\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\"},\"description\":\"Otimizar imagens pode parecer uma tarefa dificil e desnecess\u00e1ria. Mas 67% da internet \u00e9 composta s\u00f3 de imagens. Utilize o Gulp para otimizar suas imagens.\",\"breadcrumb\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#primaryimage\",\"url\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagens-com-gulp.jpg\",\"contentUrl\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagens-com-gulp.jpg\",\"width\":500,\"height\":250,\"caption\":\"Otimizar imagem com Gulp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/drcode.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Node.js\",\"item\":\"https:\/\/drcode.com.br\/blog\/category\/node-js\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Otimizando imagens com o Gulp\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#website\",\"url\":\"https:\/\/drcode.com.br\/blog\/\",\"name\":\"Dr Code\",\"description\":\"Dicas para desenvoldores web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/drcode.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\",\"name\":\"Felipe Mello\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g\",\"caption\":\"Felipe Mello\"},\"description\":\"Felipe Mello, desenvolvedor desde 2014. Sendo programador Back-end, Front-end, e Designer. Conhecedor de PHP, CakePHP, Laravel, React, Angular, Node, jQuery\",\"sameAs\":[\"http:\/\/www.facebook.com.br\/Felipeourjake\",\"https:\/\/instagram.com\/felipeourjake\",\"https:\/\/www.linkedin.com\/in\/felipe-melo-62837aa7\/\",\"https:\/\/x.com\/felipeourjake\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Otimizar imagens com Gulp - Melhore a performace de seu site | Dr Code","description":"Otimizar imagens pode parecer uma tarefa dificil e desnecess\u00e1ria. Mas 67% da internet \u00e9 composta s\u00f3 de imagens. Utilize o Gulp para otimizar suas imagens.","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:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/","og_locale":"pt_BR","og_type":"article","og_title":"Otimizar imagens com Gulp - Melhore a performace de seu site | Dr Code","og_description":"Otimizar imagens pode parecer uma tarefa dificil e desnecess\u00e1ria. Mas 67% da internet \u00e9 composta s\u00f3 de imagens. Utilize o Gulp para otimizar suas imagens.","og_url":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/","og_site_name":"Dr Code","article_publisher":"https:\/\/www.facebook.com\/pages\/Dr-Code\/1408258822807332","article_author":"http:\/\/www.facebook.com.br\/Felipeourjake","article_published_time":"2020-02-12T15:28:26+00:00","og_image":[{"width":500,"height":250,"url":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagens-com-gulp.jpg","type":"image\/jpeg"}],"author":"Felipe Mello","twitter_misc":{"Escrito por":"Felipe Mello","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#article","isPartOf":{"@id":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/"},"author":{"name":"Felipe Mello","@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281"},"headline":"Otimizando imagens com o Gulp","datePublished":"2020-02-12T15:28:26+00:00","mainEntityOfPage":{"@id":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/"},"wordCount":883,"commentCount":0,"image":{"@id":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#primaryimage"},"thumbnailUrl":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagens-com-gulp.jpg","keywords":["dica para diminuir imagem","diminuindo peso da imagem","diminuir imagens","otimizando imagens","otimizar imagens","otimizar imagens SEO","peso da imagem","seo","utilizando gulp"],"articleSection":["HTML 5","JS\/Jquery","Node.js"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/","url":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/","name":"Otimizar imagens com Gulp - Melhore a performace de seu site | Dr Code","isPartOf":{"@id":"https:\/\/drcode.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#primaryimage"},"image":{"@id":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#primaryimage"},"thumbnailUrl":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagens-com-gulp.jpg","datePublished":"2020-02-12T15:28:26+00:00","author":{"@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281"},"description":"Otimizar imagens pode parecer uma tarefa dificil e desnecess\u00e1ria. Mas 67% da internet \u00e9 composta s\u00f3 de imagens. Utilize o Gulp para otimizar suas imagens.","breadcrumb":{"@id":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#primaryimage","url":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagens-com-gulp.jpg","contentUrl":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2020\/02\/otimizando-imagens-com-gulp.jpg","width":500,"height":250,"caption":"Otimizar imagem com Gulp"},{"@type":"BreadcrumbList","@id":"https:\/\/drcode.com.br\/blog\/node-js\/otimizando-imagens-com-o-gulp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/drcode.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Node.js","item":"https:\/\/drcode.com.br\/blog\/category\/node-js\/"},{"@type":"ListItem","position":3,"name":"Otimizando imagens com o Gulp"}]},{"@type":"WebSite","@id":"https:\/\/drcode.com.br\/blog\/#website","url":"https:\/\/drcode.com.br\/blog\/","name":"Dr Code","description":"Dicas para desenvoldores web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/drcode.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281","name":"Felipe Mello","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g","caption":"Felipe Mello"},"description":"Felipe Mello, desenvolvedor desde 2014. Sendo programador Back-end, Front-end, e Designer. Conhecedor de PHP, CakePHP, Laravel, React, Angular, Node, jQuery","sameAs":["http:\/\/www.facebook.com.br\/Felipeourjake","https:\/\/instagram.com\/felipeourjake","https:\/\/www.linkedin.com\/in\/felipe-melo-62837aa7\/","https:\/\/x.com\/felipeourjake"]}]}},"views":3272,"_links":{"self":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/comments?post=530"}],"version-history":[{"count":13,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/530\/revisions"}],"predecessor-version":[{"id":546,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/530\/revisions\/546"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/media\/545"}],"wp:attachment":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/media?parent=530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/categories?post=530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/tags?post=530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}