{"id":35339,"date":"2021-06-02T17:37:45","date_gmt":"2021-06-02T20:37:45","guid":{"rendered":"https:\/\/www.yogh.com.br\/blog\/?p=35339"},"modified":"2025-04-14T11:50:12","modified_gmt":"2025-04-14T14:50:12","slug":"imagens-webp-saiba-que-e-e-como-utilizar","status":"publish","type":"post","link":"https:\/\/www.yogh.com.br\/blog\/imagens-webp-saiba-que-e-e-como-utilizar\/","title":{"rendered":"Imagens WebP: saiba o que \u00e9 e como utilizar no seu site WordPress"},"content":{"rendered":"\n<p>Quem tem um site em WordPress ou uma loja virtual WooCommerce j\u00e1 sabe o quanto \u00e9 importante ter um site focado em performance. E as imagens WebP podem auxiliar na melhoria da performance do seu site em WordPress.<\/p>\n\n\n\n<p>Mas por que elas apenas podem auxiliar? \u00c9 porque a otimiza\u00e7\u00e3o de performance vai muito al\u00e9m da compacta\u00e7\u00e3o de imagens. Para uma boa performance, \u00e9 preciso analisar uma s\u00e9rie de fatores, at\u00e9 mesmo a sua hospedagem pode fazer a diferen\u00e7a na performance do seu site.<\/p>\n\n\n\n<p>E de que forma as imagens WebP podem auxiliar? Basicamente, as imagens WebP s\u00e3o um formato de imagem moderno que oferece melhor compacta\u00e7\u00e3o de imagem reduzindo o tamanho do arquivo. Isso torna o carregamento do seu site mais r\u00e1pido, o que gera economia de dados, especialmente para quem est\u00e1 acessando as suas p\u00e1ginas atrav\u00e9s de um smartphone.<\/p>\n\n\n\n<p>Por isso neste artigo, que \u00e9 uma tradu\u00e7\u00e3o de um post do site &#8220;<a href=\"https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-use-webp-images-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">WPBeginner<\/a>&#8220;, voc\u00ea vai entender o que s\u00e3o imagens WebP e porque voc\u00ea deve utiliz\u00e1-las em seu site. Al\u00e9m disso, voc\u00ea vai conferir 03 op\u00e7\u00f5es de plugins que v\u00e3o te ajudar a utilizar este recurso em seu WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_e_WebP_e_por_que_usar_imagens_WebP_no_WordPress\"><\/span>O que \u00e9 WebP e por que usar imagens WebP no WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>WebP \u00e9 um novo formato de arquivo de imagens que vem sendo cada vez mais utilizado na web. Ao usar o formato de imagem WebP, suas imagens ser\u00e3o 25-34% menores em tamanho de arquivo do que imagens no formato PNG e JPEG, sem perder a qualidade. Incr\u00edvel, n\u00e3o \u00e9 mesmo?<\/p>\n\n\n\n<p>Se as imagens est\u00e3o deixando seu site mais lento, convert\u00ea-las para o formato WebP pode melhorar os seus resultados em testes de performance.<\/p>\n\n\n\n<p>Voc\u00ea quer saber como est\u00e1 a nota de performance do seu site? Ent\u00e3o leia este artigo: <a href=\"https:\/\/www.yogh.com.br\/blog\/conheca-02-ferramentas-gratis-para-testar-a-performance-do-seu-site\/\">Conhe\u00e7a 02 ferramentas gr\u00e1tis para testar a performance do seu site.<\/a><\/p>\n\n\n\n<p>Como WebP \u00e9 um novo formato de arquivo, ele ainda n\u00e3o \u00e9 compat\u00edvel com todos os navegadores. No entanto, a maioria dos navegadores modernos como Google Chrome, Firefox e Microsoft Edge j\u00e1 oferecem suporte para imagens WebP.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Voce_deve_usar_imagens_WebP_no_WordPress\"><\/span>Voc\u00ea deve usar imagens WebP no WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>As imagens WebP podem ajud\u00e1-lo a melhorar a performance do seu site em WordPress. Por padr\u00e3o, o WordPress n\u00e3o oferece suporte a imagens WebP e ao carregar uma imagem WebP, voc\u00ea ver\u00e1 uma imagem de erro na tela.<\/p>\n\n\n\n<p>Para corrigir isso, voc\u00ea precisar\u00e1 usar um plugin de compress\u00e3o de imagem para converter imagens em formato de imagem WebP. Voc\u00ea ainda far\u00e1 upload de suas imagens em formatos de arquivo compat\u00edveis com o WordPress, como PNG, JPEG e GIF, para que possam ser usados \u200b\u200bcomo backup.<\/p>\n\n\n\n<p>Se o seu site usa muitas imagens e elas est\u00e3o tornando o seu site lento, voc\u00ea definitivamente deve considerar o uso de imagens WebP.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conheca_03_plugins_para_converter_imagens_em_WebP\"><\/span>Conhe\u00e7a 03 plugins para converter imagens em WebP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A partir de agora, voc\u00ea vai conhecer 03 op\u00e7\u00f5es de plugins que v\u00e3o te ajudar a deixar as suas imagens no formato WebP.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"EWWW_Image_Optimizer\"><\/span><a href=\"https:\/\/wordpress.org\/plugins\/ewww-image-optimizer\/\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">EWWW Image Optimizer&nbsp;<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"415\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/plugin-ewww-imagem-optimizer-webp-1024x415.png\" alt=\"O plugin para converter imagens WebP - EWWW Image Optimizer\" class=\"wp-image-35340\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/plugin-ewww-imagem-optimizer-webp-1024x415.png 1024w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/plugin-ewww-imagem-optimizer-webp-300x121.png 300w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/plugin-ewww-imagem-optimizer-webp-768x311.png 768w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/plugin-ewww-imagem-optimizer-webp.png 1072w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Este plugin est\u00e1 dispon\u00edvel para download no reposit\u00f3rio oficial do WordPress. No momento, ele conta com mais de 800 mil instala\u00e7\u00f5es ativas e \u00e9 considerado um dos melhores plugins de compress\u00e3o de imagens para WordPress.<\/p>\n\n\n\n<p>Ele tamb\u00e9m oferece suporte a imagens WebP e \u00e9 capaz de mostr\u00e1-las de forma autom\u00e1tica para os usu\u00e1rios que utilizam navegadores compat\u00edveis.&nbsp;<\/p>\n\n\n\n<p>Caso voc\u00ea n\u00e3o queira otimizar as imagens para o novo formato, \u00e9 poss\u00edvel utilizar este plugin gratuito para compactar imagens em outros formatos e tamb\u00e9m redimension\u00e1-los.<\/p>\n\n\n\n<p>O plugin tamb\u00e9m conta com uma vers\u00e3o premium com mais recursos voltados para otimiza\u00e7\u00e3o de imagens.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Optimole\"><\/span><a href=\"https:\/\/br.wordpress.org\/plugins\/optimole-wp\/\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">Optimole<\/a><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"990\" height=\"432\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/optimole-plugin-para-compactar-imagens.png\" alt=\"Optimole - um plugin para converter imagens em WebP\" class=\"wp-image-35342\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/optimole-plugin-para-compactar-imagens.png 990w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/optimole-plugin-para-compactar-imagens-300x131.png 300w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/optimole-plugin-para-compactar-imagens-768x335.png 768w\" sizes=\"(max-width: 990px) 100vw, 990px\" \/><\/figure>\n\n\n\n<p>O Optimole \u00e9 mais uma op\u00e7\u00e3o de plugin gratuito para quem deseja transformar as imagens utilizadas para o formato WebP. Atualmente, ele possui mais de 80 mil instala\u00e7\u00f5es ativas.<\/p>\n\n\n\n<p>Este plugin \u00e9 capaz de otimizar suas imagens em tempo real, sem reduzir a qualidade das imagens. O Optimole tamb\u00e9m conta com uma fun\u00e7\u00e3o de reduzir a qualidade das imagens utilizadas, quando \u00e9 detectado que a conex\u00e3o do usu\u00e1rio est\u00e1 lenta. E se voc\u00ea costuma utilizar muitas imagens e quer incluir marca da \u00e1gua, este plugin tamb\u00e9m pode te ajudar nesta tarefa.<\/p>\n\n\n\n<p>Por fim, se voc\u00ea utiliza construtores de p\u00e1gina em seu WordPress, este plugin \u00e9 compat\u00edvel com page builders e tamb\u00e9m com o editor Gutenberg.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Web_Express\"><\/span><a href=\"https:\/\/br.wordpress.org\/plugins\/webp-express\/\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">Web Express<\/a><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/web-express-plugin-webp.png\" alt=\"WebP Express - plugin para WordPress\" class=\"wp-image-35343\" width=\"840\" height=\"377\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/web-express-plugin-webp.png 974w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/web-express-plugin-webp-300x135.png 300w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/06\/web-express-plugin-webp-768x345.png 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p>O \u00faltimo plugin deste post \u00e9 o Web Express. Ele \u00e9 gratuito e est\u00e1 dispon\u00edvel para download no reposit\u00f3rio oficial do WordPress. Com ele, voc\u00ea pode converter suas imagens para WebP para navegadores compat\u00edveis. <\/p>\n\n\n\n<p>O plugin tamb\u00e9m mant\u00e9m arquivado as imagens originais, portanto, em navegadores que n\u00e3o s\u00e3o compat\u00edveis, o plugin vai exibir imagens em formatos como PNG e JPEG. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ao longo deste post, voc\u00ea pode entender melhor o que \u00e9 o novo formato de imagem dispon\u00edvel na web e como este formato pode te ajudar a ter um site mais perform\u00e1tico. <\/p>\n\n\n\n<p>Mas se voc\u00ea n\u00e3o costuma utilizar muitas imagens em seu site, no entanto, pretende otimizar as imagens utilizadas em seu WordPress, n\u00f3s temos um post que pode te ajudar: <a href=\"https:\/\/www.yogh.com.br\/blog\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/\" class=\"rank-math-link\">As imagens podem afetar a otimiza\u00e7\u00e3o do site? Descubra. <\/a><\/p>\n\n\n\n<p>Neste post, voc\u00ea tamb\u00e9m vai encontrar op\u00e7\u00f5es para otimizar imagens de forma f\u00e1cil e gratuita. Antes de encerrar este post, n\u00f3s queremos saber: voc\u00ea j\u00e1 tinha ouvido falar em imagens WebP? Conte para n\u00f3s a sua experi\u00eancia com este novo formato de imagem.<\/p>\n\n\n\n<p>E se voc\u00ea gostou deste post, compartilhe com seus amigos em suas redes sociais!<\/p>\n\n\n\n<p>At\u00e9 a pr\u00f3xima!<\/p>\n\n\n\n<p>Artigo traduzido e adaptado: <a href=\"https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-use-webp-images-in-wordpress\/\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">How to use WebP Images in WordPress (3 methods).<\/a><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.yogh.com.br\/blog\/imagens-webp-saiba-que-e-e-como-utilizar\/#O_que_e_WebP_e_por_que_usar_imagens_WebP_no_WordPress\" >O que \u00e9 WebP e por que usar imagens WebP no WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.yogh.com.br\/blog\/imagens-webp-saiba-que-e-e-como-utilizar\/#Voce_deve_usar_imagens_WebP_no_WordPress\" >Voc\u00ea deve usar imagens WebP no WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.yogh.com.br\/blog\/imagens-webp-saiba-que-e-e-como-utilizar\/#Conheca_03_plugins_para_converter_imagens_em_WebP\" >Conhe\u00e7a 03 plugins para converter imagens em WebP<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.yogh.com.br\/blog\/imagens-webp-saiba-que-e-e-como-utilizar\/#EWWW_Image_Optimizer\" >EWWW Image Optimizer&nbsp;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.yogh.com.br\/blog\/imagens-webp-saiba-que-e-e-como-utilizar\/#Optimole\" >Optimole<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.yogh.com.br\/blog\/imagens-webp-saiba-que-e-e-como-utilizar\/#Web_Express\" >Web Express<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.yogh.com.br\/blog\/imagens-webp-saiba-que-e-e-como-utilizar\/#Conclusao\" >Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n","protected":false},"excerpt":{"rendered":"<p>WebP \u00e9 um novo formato de imagem utilizado na web. Neste post, voc\u00ea entender o que \u00e9 este novo formato e como ele pode melhorar a performance do seu site<\/p>\n","protected":false},"author":4,"featured_media":35341,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"kk_blocks_editor_width":"","_kiokenblocks_attr":"","_kiokenblocks_dimensions":"","footnotes":""},"categories":[42,57],"tags":[],"class_list":["post-35339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-otimizacao-de-performance","category-plugins-para-wordpress"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/35339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/comments?post=35339"}],"version-history":[{"count":4,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/35339\/revisions"}],"predecessor-version":[{"id":35348,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/35339\/revisions\/35348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/media\/35341"}],"wp:attachment":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/media?parent=35339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/categories?post=35339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/tags?post=35339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}