{"id":33413,"date":"2021-01-12T14:00:11","date_gmt":"2021-01-12T17:00:11","guid":{"rendered":"https:\/\/www.yogh.com.br\/blog\/?p=33413"},"modified":"2025-04-14T11:50:30","modified_gmt":"2025-04-14T14:50:30","slug":"as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui","status":"publish","type":"post","link":"https:\/\/www.yogh.com.br\/blog\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/","title":{"rendered":"As imagens podem afetar a otimiza\u00e7\u00e3o do site? Saiba aqui"},"content":{"rendered":"<p>\t\t\t\t<b>A resposta para a pergunta acima \u00e9 SIM!<\/b><span style=\"font-weight: 400;\"> As imagens podem afetar a otimiza\u00e7\u00e3o de performance do seu site.<\/span><b> Mas isso n\u00e3o significa que voc\u00ea deve deixar de utilizar as imagens para garantir que o seu site em WordPress tenha uma boa otimiza\u00e7\u00e3o.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Ter boas imagens no seu site pode fazer toda a diferen\u00e7a no momento em que um usu\u00e1rio navega pelo seu site, afinal, uma imagem vale mais que mil palavras, n\u00e3o \u00e9 mesmo? Principalmente quando voc\u00ea possui a loja virtual do WordPress, o WooCommerce.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Neste caso, as imagens podem ser suas aliadas na hora de estimular o seu usu\u00e1rio ou cliente a finalizar uma compra. Por\u00e9m, as imagens utilizadas n\u00e3o devem afetar a performance do seu site ou e-commerce.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sendo assim, a otimiza\u00e7\u00e3o de imagens se torna um fator essencial na busca por um bom desempenho.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Neste artigo, voc\u00ea ver\u00e1 dois m\u00e9todos para comprimir imagens, evitando desta forma que as imagens afetem a performance da sua p\u00e1gina.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Utilize_plugins\"><\/span><b>Utilize plugins<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Um dos m\u00e9todos para executar a otimiza\u00e7\u00e3o de imagens \u00e9 utilizando plugins. Este formato \u00e9 o mais indicado para sites que costumam fazer o upload de um grande n\u00famero de imagens com frequ\u00eancia, como blogs e lojas virtuais.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Atualmente, h\u00e1 uma s\u00e9rie de plugins de otimiza\u00e7\u00e3o de imagens dispon\u00edveis, mas a Yogh recomenda que voc\u00ea utilize o Plugin Smush para otimizar as imagens que ser\u00e3o utilizadas em seu site.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Smush_plugin_de_otimizacao_de_imagens\"><\/span><b>Smush: plugin de otimiza\u00e7\u00e3o de imagens\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-33123\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2020\/09\/smush-um-plugin-para-otimizar-imagens.png\" alt=\"\" width=\"900\" height=\"404\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2020\/09\/smush-um-plugin-para-otimizar-imagens.png 900w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2020\/09\/smush-um-plugin-para-otimizar-imagens-300x135.png 300w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2020\/09\/smush-um-plugin-para-otimizar-imagens-768x345.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Este plugin \u00e9 gratuito e est\u00e1 dispon\u00edvel para<\/span><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\"> download<\/span><\/a><span style=\"font-weight: 400;\"> no reposit\u00f3rio oficial do WordPress. Ele possui mais de 1 milh\u00e3o de instala\u00e7\u00f5es ativas e conta com a classifica\u00e7\u00e3o de 05 estrelas no reposit\u00f3rio.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conheca_alguns_recursos_deste_plugin\"><\/span><b>Conhe\u00e7a alguns recursos deste plugin:<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><span style=\"font-weight: 400;\"><strong>Redimensionamento de imagens:<\/strong> com o Smush, voc\u00ea poder\u00e1 definir a largura e a altura ideal para suas imagens.\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Compress\u00e3o sem perdas:<\/strong> as imagens ser\u00e3o otimizadas sem perder qualidade.\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Processamento de imagens:<\/strong> o plugin tem a capacidade de processar e otimizar arquivos nos formatos PNG, JPEG e GIF.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Otimiza\u00e7\u00e3o automatizada:<\/strong> depois de configurado, o plugin far\u00e1 a otimiza\u00e7\u00e3o de todas as imagens no momento em que voc\u00ea for realizar o upload.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Lazy Loading:<\/strong> o plugin tamb\u00e9m disponibiliza a fun\u00e7\u00e3o lazy loading. Com esta fun\u00e7\u00e3o, as imagens inclu\u00eddas nas p\u00e1ginas s\u00f3 carregar\u00e3o no momento em que o usu\u00e1rio se aproximar de cada uma delas.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Quer saber mais sobre este plugin que possui tamb\u00e9m uma vers\u00e3o PRO com mais recursos? Leia este artigo: <\/span><a href=\"https:\/\/www.yogh.com.br\/blog\/smush-um-plugin-para-otimizar-as-imagens-do-wordpress\/\"><span style=\"font-weight: 400;\">Smush: um plugin para otimizar imagens do WordPress<\/span><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Otimizacao_manual\"><\/span><b>Otimiza\u00e7\u00e3o manual<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Se voc\u00ea possui um site que n\u00e3o possui uma grande frequ\u00eancia de uploads de imagens, como um site institucional, por exemplo, a otimiza\u00e7\u00e3o manual pode ser mais pr\u00e1tica e eficaz para voc\u00ea.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Afinal, a quantidade de plugins utilizados tamb\u00e9m pode afetar a performance do seu site WordPress.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Portanto, o segundo m\u00e9todo de otimiza\u00e7\u00e3o de imagens recomendado pela Yogh \u00e9 o site <\/span><a href=\"https:\/\/tinyjpg.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">TinyJPG.<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-33417 size-full\" title=\"TinyJPG - um site para otimiza\u00e7\u00e3o de imagens\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/01\/tinyjpg-site-para-otimizacao-de-imagens.png\" alt=\"TinyJPG - um site para otimiza\u00e7\u00e3o de imagens\" width=\"1024\" height=\"647\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/01\/tinyjpg-site-para-otimizacao-de-imagens.png 1024w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/01\/tinyjpg-site-para-otimizacao-de-imagens-300x190.png 300w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2021\/01\/tinyjpg-site-para-otimizacao-de-imagens-768x485.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Atrav\u00e9s deste site, voc\u00ea poder\u00e1 fazer a otimiza\u00e7\u00e3o de forma manual e gratuita. O site permite, ainda, que voc\u00ea fa\u00e7a o upload de at\u00e9 20 imagens com no m\u00e1ximo 5MB cada.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Como_fazer_a_otimizacao_de_imagens_utilizando_o_site_TinyJPG\"><\/span><b>Como fazer a otimiza\u00e7\u00e3o de imagens utilizando o site TinyJPG:<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><span style=\"font-weight: 400;\">Para realizar a otimiza\u00e7\u00e3o, basta acessar o site e fazer o upload das imagens no campo \u201cDrop your .png ou .jpg files here\u201d.\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Em seguida, ap\u00f3s concluir a otimiza\u00e7\u00e3o, basta clicar em \u201cdownload all\u201d para que voc\u00ea possa ter as imagens em seu computador.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Ap\u00f3s este processo, \u00e9 s\u00f3 inserir as imagens em sua biblioteca de m\u00eddia do WordPress, como de costume.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Vale salientar que o ideal \u00e9 que as imagens tenham no m\u00e1ximo 150kb ap\u00f3s a otimiza\u00e7\u00e3o.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Formato_da_imagem\"><\/span><b>Formato da imagem<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Outro fator que merece aten\u00e7\u00e3o quando o assunto \u00e9 otimiza\u00e7\u00e3o de imagens \u00e9 o formato utilizado. Os dois formatos mais utilizados s\u00e3o o JPEG e PNG. O ideal \u00e9 que voc\u00ea escolha JPEG para fotos e PNG para gr\u00e1ficos, simples assim.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se a imagem escolhida por voc\u00ea conter cores e tiver diferentes texturas e gradientes, escolha a op\u00e7\u00e3o JPEG na hora de salvar a imagem. Se for um logotipo, que contenha texto ou cores planas, salve-a como PNG.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Quer saber mais sobre tamanhos de imagem e como utiliz\u00e1-los? <strong>Leia este artigo: <\/strong><\/span><a href=\"https:\/\/www.yogh.com.br\/blog\/tamanho-de-imagens-no-wordpress-saiba-como-definir-a-dimensao-ideal\/\"><span style=\"font-weight: 400;\">Tamanho de imagens no WordPress: saiba como definir a dimens\u00e3o ideal.<\/span><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Vantagens_da_otimizacao_da_performance\"><\/span><strong>Vantagens da otimiza\u00e7\u00e3o da performance<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A imagem pode ser um dos grandes vil\u00f5es quando o tema \u00e9 performance. Portanto, voc\u00ea deve estar atento ao tamanho das imagens que voc\u00ea costuma fazer o upload em seu WordPress.<\/p>\n<p>Um site bem otimizado tem vantagens! <span style=\"font-weight: 400;\">A otimiza\u00e7\u00e3o permite que seus usu\u00e1rios tenham uma nova e melhor experi\u00eancia ao navegar pelo seu site ao acessar rapidamente as suas p\u00e1ginas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Al\u00e9m disso, a otimiza\u00e7\u00e3o pode melhorar o seu posicionamento no Google e outros mecanismos de busca, gerando uma chance maior de convers\u00f5es em seu site WordPress ou WooCommerce.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Quer_aprender_mais_sobre_otimizacao_de_performance\"><\/span><b>Quer aprender mais sobre otimiza\u00e7\u00e3o de performance?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Se voc\u00ea quer saber mais sobre este tema, assista a aula b\u00f4nus do curso gr\u00e1tis &#8220;Criando seu site em WordPress sem programar&#8221;. Nesta aula, voc\u00ea tamb\u00e9m vai conhecer 03 plugins de cache para o seu WordPress e duas ferramentas que v\u00e3o te ajudar a testar a performance do seu site.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Curso WordPress Gr\u00e1tis - Otimiza\u00e7\u00e3o de performance - Aula B\u00f4nus\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/0YtFhUCmQM4?start=902&#038;feature=oembed&#038;enablejsapi=1&#038;origin=https:\/\/www.yogh.com.br\/blog\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Por \u00faltimo, se voc\u00ea ainda n\u00e3o tem um site em WordPress? A hora \u00e9 essa!<\/span><a href=\"https:\/\/www.yogh.com.br\/blog\/materiais\/\"> <span style=\"font-weight: 400;\">Inscreva-se em nosso curso<\/span><\/a><span style=\"font-weight: 400;\"> e aprenda como criar um site de forma f\u00e1cil e r\u00e1pida, sem precisar da ajuda de um programador!<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span><strong>Conclus\u00e3o<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Neste artigo, voc\u00ea pode conferir dois m\u00e9todos para tornar a otimiza\u00e7\u00e3o de imagens em um processo f\u00e1cil e pr\u00e1tico. Mas n\u00f3s queremos saber: voc\u00ea utiliza algum plugin de otimiza\u00e7\u00e3o de imagem? Compartilhe as boas pr\u00e1ticas conosco nos coment\u00e1rios.<\/p>\n<p><strong>Gostou deste post? Compartilhe com seus amigos em suas redes sociais!<\/strong><\/p>\n<p>At\u00e9 a pr\u00f3xima!\t\t<\/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\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/#Utilize_plugins\" >Utilize plugins<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.yogh.com.br\/blog\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/#Smush_plugin_de_otimizacao_de_imagens\" >Smush: plugin de otimiza\u00e7\u00e3o de imagens\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.yogh.com.br\/blog\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/#Conheca_alguns_recursos_deste_plugin\" >Conhe\u00e7a alguns recursos deste plugin:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.yogh.com.br\/blog\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/#Otimizacao_manual\" >Otimiza\u00e7\u00e3o manual<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.yogh.com.br\/blog\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/#Como_fazer_a_otimizacao_de_imagens_utilizando_o_site_TinyJPG\" >Como fazer a otimiza\u00e7\u00e3o de imagens utilizando o site TinyJPG:<\/a><\/li><\/ul><\/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\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/#Formato_da_imagem\" >Formato da imagem<\/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\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/#Vantagens_da_otimizacao_da_performance\" >Vantagens da otimiza\u00e7\u00e3o da performance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.yogh.com.br\/blog\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/#Quer_aprender_mais_sobre_otimizacao_de_performance\" >Quer aprender mais sobre otimiza\u00e7\u00e3o de performance?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.yogh.com.br\/blog\/as-imagens-podem-afetar-a-otimizacao-do-site-saiba-aqui\/#Conclusao\" >Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\t\t\t\tSe voc\u00ea quer ter um site otimizado, saiba que a imagem utilizada pode ser um vil\u00e3o. Neste post, voc\u00ea conhecer\u00e1 dois m\u00e9todos para realizar a otimiza\u00e7\u00e3o de imagens de forma f\u00e1cil e pr\u00e1tica\t\t<\/p>\n","protected":false},"author":2,"featured_media":33416,"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],"tags":[],"class_list":["post-33413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-otimizacao-de-performance"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/33413","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/comments?post=33413"}],"version-history":[{"count":1,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/33413\/revisions"}],"predecessor-version":[{"id":38862,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/33413\/revisions\/38862"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/media\/33416"}],"wp:attachment":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/media?parent=33413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/categories?post=33413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/tags?post=33413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}