{"id":123678,"date":"2025-03-03T09:19:52","date_gmt":"2025-03-03T07:19:52","guid":{"rendered":"https:\/\/elementor.com\/blog\/como-adicionar-uma-imagem-html\/"},"modified":"2025-12-17T15:03:10","modified_gmt":"2025-12-17T13:03:10","slug":"como-adicionar-uma-imagem-html","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/","title":{"rendered":"Como Adicionar Uma Imagem HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"123678\" class=\"elementor elementor-123678 elementor-1397\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2eb0215 e-flex e-con-boxed e-con e-parent\" data-id=\"2eb0215\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-05d1603 elementor-widget elementor-widget-text-editor\" data-id=\"05d1603\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Independentemente de ser um desenvolvedor web experiente ou estar apenas come\u00e7ando com WordPress, este guia o equipar\u00e1 com tudo o que voc\u00ea precisa saber sobre adicionar imagens em HTML. Abordaremos os fundamentos e as melhores pr\u00e1ticas de otimiza\u00e7\u00e3o, e at\u00e9 exploraremos t\u00e9cnicas avan\u00e7adas para elevar o apelo visual do seu site. Se voc\u00ea utiliza o construtor de sites Elementor, descobrir\u00e1 como ele simplifica todo o processo de manipula\u00e7\u00e3o de imagens!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Compreendendo a Tag de Imagem HTML <\/span><\/h2>\n<h3><b>A Tag <\/b><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O fundamento da exibi\u00e7\u00e3o de imagens em uma p\u00e1gina web reside na <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\"> . Esta tag atua como um espa\u00e7o reservado, instruindo o navegador onde encontrar e exibir a imagem que voc\u00ea especifica. Eis como se apresenta uma tag de imagem b\u00e1sica:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4dbc401 elementor-widget elementor-widget-code-highlight\" data-id=\"4dbc401\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A descriptive caption for the image\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03efd4b elementor-widget elementor-widget-text-editor\" data-id=\"03efd4b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Vamos decompor os componentes-chave desta tag:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Isto informa ao navegador que voc\u00ea deseja inserir uma imagem. \u00c9 uma tag de fechamento autom\u00e1tico, o que significa que voc\u00ea n\u00e3o necessita de um  <\/span><span style=\"font-weight: 400;\">&lt;\/img&gt;<\/span><span style=\"font-weight: 400;\"> separado para fech\u00e1-la.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">src<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Este atributo essencial significa &#8220;source&#8221; (fonte). \u00c9 onde voc\u00ea especifica a localiza\u00e7\u00e3o do arquivo de imagem, que pode ser uma <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/url\/\"   title=\"What is a URL? Structure, Syntax &#038; Best Practices\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20332\">URL<\/a> relativa ou absoluta:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>URL Relativa:<\/b><span style=\"font-weight: 400;\">  Aponta para uma imagem dentro do diret\u00f3rio do seu site. Exemplo: <\/span><span style=\"font-weight: 400;\">src=&#8221;images\/my-image.jpg&#8221;<\/span><span style=\"font-weight: 400;\"> (pressup\u00f5e a exist\u00eancia de uma pasta &#8220;images&#8221;)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>URL Absoluta:<\/b><span style=\"font-weight: 400;\">  Fornece o endere\u00e7o web completo da imagem, mesmo que esteja localizada em um site diferente. Exemplo: <\/span><span style=\"font-weight: 400;\">src=&#8221;https:\/\/www.example.com\/images\/my-image.jpg&#8221;<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">alt<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Este atributo significa &#8220;alternative text&#8221; (texto alternativo). Ele fornece uma descri\u00e7\u00e3o crucial do conte\u00fado da imagem. A tag  <\/span><span style=\"font-weight: 400;\">alt<\/span><span style=\"font-weight: 400;\"> \u00e9 vital para:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Acessibilidade:<\/b><span style=\"font-weight: 400;\"> Leitores de tela dependem do texto <\/span><span style=\"font-weight: 400;\">alt<\/span><span style=\"font-weight: 400;\"> para descrever a imagem para usu\u00e1rios com defici\u00eancia visual.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>SEO:<\/b><span style=\"font-weight: 400;\"> Mecanismos de busca utilizam o texto <\/span><span style=\"font-weight: 400;\">alt<\/span><span style=\"font-weight: 400;\"> para compreender a relev\u00e2ncia da imagem, potencialmente melhorando o ranking do seu site.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Falha no Carregamento da Imagem:<\/b><span style=\"font-weight: 400;\"> Se a imagem n\u00e3o puder ser exibida por algum motivo, o texto <\/span><span style=\"font-weight: 400;\">alt<\/span><span style=\"font-weight: 400;\"> aparecer\u00e1 em seu lugar.<\/span><\/li>\n<\/ul>\n<h5><span style=\"font-weight: 400;\">A Import\u00e2ncia do Atributo <\/span><span style=\"font-weight: 400;\">Alt<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">Enquanto o atributo <\/span><span style=\"font-weight: 400;\">src<\/span><span style=\"font-weight: 400;\"> informa ao navegador <\/span><i><span style=\"font-weight: 400;\">qual<\/span><\/i><span style=\"font-weight: 400;\"> imagem exibir, o atributo <\/span><span style=\"font-weight: 400;\">alt<\/span><span style=\"font-weight: 400;\"> descreve o <\/span><i><span style=\"font-weight: 400;\">significado<\/span><\/i><g id=\"gid_10\"> da imagem<\/g><span style=\"font-weight: 400;\">. Aqui est\u00e1 como escrever um texto alt eficaz:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Seja Descritivo:<\/b><span style=\"font-weight: 400;\"> Transmita a ess\u00eancia da imagem de forma clara e concisa.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>O Contexto \u00e9 Fundamental:<\/b><span style=\"font-weight: 400;\"> Considere o papel da imagem no conte\u00fado circundante.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Mantenha a Brevidade:<\/b><span style=\"font-weight: 400;\"> Procure utilizar uma frase curta ou algumas palavras.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Evite Redund\u00e2ncia:<\/b><span style=\"font-weight: 400;\">  N\u00e3o inicie com &#8220;Imagem de&#8230;&#8221; ou &#8220;Foto de&#8230;&#8221;. Os leitores de tela j\u00e1 anunciaram isso.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Formatos de Arquivo de Imagem e Otimiza\u00e7\u00e3o<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Formatos de Imagem Comuns<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A escolha do formato de imagem correto \u00e9 essencial para equilibrar a qualidade visual com o tamanho do arquivo, o que influencia diretamente a velocidade do seu site. Aqui est\u00e1 uma vis\u00e3o geral dos formatos de imagem web mais comuns:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">JPEG (ou JPG)<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">\u00c9 ideal para fotografias e imagens com cores complexas e gradientes. Suporta milh\u00f5es de cores e utiliza compress\u00e3o com perdas, o que significa que alguma qualidade de imagem \u00e9 sacrificada para reduzir o tamanho do arquivo.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">PNG<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">\u00c9 excelente para gr\u00e1ficos, ilustra\u00e7\u00f5es, logotipos e imagens que requerem transpar\u00eancia. Suporta compress\u00e3o sem perdas (qualidade original) e com perdas. Os tamanhos de arquivo PNG tendem a ser maiores que os JPEGs.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">GIF<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">\u00c9 utilizado principalmente para anima\u00e7\u00f5es simples e suporta uma paleta de cores limitada. Devido \u00e0s restri\u00e7\u00f5es de tamanho de arquivo, n\u00e3o \u00e9 ideal para imagens est\u00e1ticas.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">SVG<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Scalable Vector Graphics, um formato baseado em XML, \u00e9 perfeito para logotipos, \u00edcones e ilustra\u00e7\u00f5es. Sua principal vantagem \u00e9 que se redimensiona infinitamente sem perder qualidade, tornando-o ideal para websites responsivos.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Selecionando o Formato Adequado<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">Eis um guia de decis\u00e3o r\u00e1pida para selecionar o formato de imagem apropriado:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fotografias:<\/b><span style=\"font-weight: 400;\"> JPEG \u00e9 geralmente a melhor escolha.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gr\u00e1ficos, Logotipos e Ilustra\u00e7\u00f5es com Transpar\u00eancia:<\/b><span style=\"font-weight: 400;\"> Opte por PNG.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u00cdcones, Gr\u00e1ficos Simples Necessitando Escalabilidade:<\/b><span style=\"font-weight: 400;\"> Escolha SVG.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Anima\u00e7\u00f5es Simples:<\/b><span style=\"font-weight: 400;\"> GIFs podem ser a \u00fanica op\u00e7\u00e3o, mas considere formatos de v\u00eddeo modernos para tamanhos de arquivo melhores.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Otimiza\u00e7\u00e3o de Imagens<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Independentemente do formato escolhido, otimizar suas imagens \u00e9 crucial para manter um website de carregamento r\u00e1pido. O objetivo \u00e9 atingir um equil\u00edbrio entre preservar qualidade de imagem suficiente e minimizar o tamanho do arquivo tanto quanto poss\u00edvel. Eis por que a otimiza\u00e7\u00e3o de imagens \u00e9 importante:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Velocidade da P\u00e1gina:<\/b><span style=\"font-weight: 400;\"> Imagens grandes s\u00e3o um dos maiores culpados por websites de carregamento lento, impactando negativamente a experi\u00eancia do usu\u00e1rio.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>SEO:<\/b><span style=\"font-weight: 400;\"> Google e outros mecanismos de busca favorecem websites de carregamento r\u00e1pido, significando que imagens mal otimizadas podem prejudicar suas classifica\u00e7\u00f5es.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">T\u00e9cnicas de Otimiza\u00e7\u00e3o<\/span><\/h4>\n<h4><span style=\"font-weight: 400;\">Compress\u00e3o<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Existem dois tipos principais:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Com Perdas:<\/b><span style=\"font-weight: 400;\">  Sacrifica alguns dados de imagem para alcan\u00e7ar tamanhos de arquivo menores. Utilize com cuidado para evitar degrada\u00e7\u00e3o de qualidade percept\u00edvel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sem Perdas:<\/b><span style=\"font-weight: 400;\"> Reduz o tamanho do arquivo sem alterar os dados da imagem, perfeito para cen\u00e1rios onde a qualidade \u00e9 primordial.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Redimensionamento de Imagem<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Assegure que as dimens\u00f5es de sua imagem correspondam \u00e0 forma como ser\u00e3o exibidas em seu website para evitar o carregamento desnecess\u00e1rio de imagens superdimensionadas.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Ferramentas de Otimiza\u00e7\u00e3o de Imagens<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">Muitas ferramentas e plugins podem ajud\u00e1-lo a otimizar imagens:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Otimizador de Imagem do Elementor:<\/b><span style=\"font-weight: 400;\"> Se voc\u00ea est\u00e1 utilizando o construtor de websites Elementor, esta ferramenta integrada simplifica a otimiza\u00e7\u00e3o de imagens para seu site WordPress.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Software de Edi\u00e7\u00e3o de Imagem:<\/b><span style=\"font-weight: 400;\"> Photoshop, GIMP e outros oferecem controles de otimiza\u00e7\u00e3o avan\u00e7ados.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Estiliza\u00e7\u00e3o e Responsividade de Imagem<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Definindo Dimens\u00f5es de Imagem<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Controle a largura e a altura de suas imagens para uma apar\u00eancia refinada. Voc\u00ea pode fazer isso diretamente no HTML usando os atributos  <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">  ou com <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"29820\">CSS<\/a> para uma estiliza\u00e7\u00e3o mais flex\u00edvel. Eis um exemplo:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6331a8e elementor-widget elementor-widget-code-highlight\" data-id=\"6331a8e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img fetchpriority=\"high\" decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful sunset\" width=\"400\" height=\"300\"> \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c3d912 elementor-widget elementor-widget-text-editor\" data-id=\"8c3d912\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Sempre especifique as dimens\u00f5es da imagem. Isso ajuda o navegador a alocar o espa\u00e7o correto \u00e0 medida que a p\u00e1gina carrega, prevenindo deslocamentos de conte\u00fado e melhorando a experi\u00eancia do usu\u00e1rio.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Estiliza\u00e7\u00e3o CSS B\u00e1sica<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">V\u00e1 al\u00e9m do b\u00e1sico com CSS para adicionar estiliza\u00e7\u00e3o mais elaborada \u00e0s suas imagens:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f799293 elementor-widget elementor-widget-code-highlight\" data-id=\"f799293\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n    border: 2px solid black; \/* Adds a border *\/\r\n    border-radius: 10px; \/* Creates rounded corners *\/\r\n    box-shadow: 5px 5px 10px gray; \/* Adds a shadow effect *\/\r\n    opacity: 0.8; \/* Makes the image slightly transparent *\/\r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b22230 elementor-widget elementor-widget-text-editor\" data-id=\"9b22230\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Imagens Responsivas<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">No mundo multi-dispositivo de hoje, tornar suas imagens responsivas \u00e9 essencial. Imagens responsivas adaptam fluidamente seu tamanho a diferentes tamanhos de tela, garantindo uma experi\u00eancia de visualiza\u00e7\u00e3o perfeita para todos. Aqui est\u00e3o algumas t\u00e9cnicas comuns:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">max-width: 100%<\/span><b>:<\/b><span style=\"font-weight: 400;\"> Esta simples regra CSS assegura que as imagens nunca exceder\u00e3o a largura de seu cont\u00eainer, reduzindo proporcionalmente em telas menores.<\/span><\/li>\n<\/ul>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b6c31e elementor-widget elementor-widget-code-highlight\" data-id=\"3b6c31e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n    max-width: 100%; \r\n    height: auto; \/* Maintain aspect ratio *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f43780 elementor-widget elementor-widget-text-editor\" data-id=\"8f43780\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">srcset<\/span><b> Atributo:<\/b><span style=\"font-weight: 400;\"> Este atributo fornece ao navegador m\u00faltiplas op\u00e7\u00f5es de arquivo de imagem em diferentes tamanhos, permitindo que ele escolha o mais apropriado com base no dispositivo do usu\u00e1rio.<\/span><\/li>\n<\/ul>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9447ac elementor-widget elementor-widget-code-highlight\" data-id=\"c9447ac\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" srcset=\"my-image-small.jpg 480w, \r\n             my-image-medium.jpg 800w, \r\n             my-image-large.jpg 1200w\"\r\n     src=\"my-image-medium.jpg\" \r\n     alt=\"A responsive landscape photo\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44f68c9 elementor-widget elementor-widget-text-editor\" data-id=\"44f68c9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Alinhando Imagens<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Controle como suas imagens interagem com o texto e elementos circundantes usando CSS ou o HTML <\/span><span style=\"font-weight: 400;\">float<\/span><span style=\"font-weight: 400;\"> . Aqui est\u00e1 como alinhar imagens \u00e0 esquerda, direita e centro:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Alinhamento \u00e0 Esquerda:<\/b> <span style=\"font-weight: 400;\">float: left;<\/span><span style=\"font-weight: 400;\"> ou <\/span><span style=\"font-weight: 400;\">text-align: left;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Alinhamento \u00e0 Direita:<\/b> <span style=\"font-weight: 400;\">float: right;<\/span><span style=\"font-weight: 400;\"> ou <\/span><span style=\"font-weight: 400;\">text-align: right;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Alinhamento Central:<\/b> <span style=\"font-weight: 400;\">display: block; margin-left: auto; margin-right: auto;<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">T\u00e9cnicas Avan\u00e7adas de Imagem<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Criando Links de Imagem<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Transforme qualquer imagem em um link clic\u00e1vel que leve os usu\u00e1rios a outra p\u00e1gina em seu website, um website diferente, ou at\u00e9 mesmo uma se\u00e7\u00e3o espec\u00edfica na p\u00e1gina atual. Aqui est\u00e1 como faz\u00ea-lo usando a tag  <\/span><span style=\"font-weight: 400;\">&lt;a&gt;<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f1102d1 elementor-widget elementor-widget-code-highlight\" data-id=\"f1102d1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<a href=\"https:\/\/www.example.com\">\r\n  <img decoding=\"async\" src=\"banner-image.jpg\" alt=\"Click here to learn more\">\r\n<\/a>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a07792 elementor-widget elementor-widget-text-editor\" data-id=\"1a07792\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Dicas para Links de Imagem<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Forne\u00e7a Contexto:<\/b><span style=\"font-weight: 400;\"> Seja no texto alternativo da imagem ou no texto circundante, informe aos usu\u00e1rios para onde o link os levar\u00e1.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Indica\u00e7\u00f5es Visuais:<\/b><span style=\"font-weight: 400;\"> altera\u00e7\u00f5es de estilo ao passar o mouse, como uma leve borda ou mudan\u00e7a de cor, podem indicar que uma imagem \u00e9 clic\u00e1vel.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Imagens de Fundo com CSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Adicione um toque visual ao seu website utilizando imagens como planos de fundo para elementos como se\u00e7\u00f5es, cabe\u00e7alhos e outros. Eis o CSS b\u00e1sico:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6317770 elementor-widget elementor-widget-code-highlight\" data-id=\"6317770\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.my-section {\r\n  background-image: url(\"background-pattern.jpg\");\r\n  background-size: cover; \/* Scale to cover the entire element *\/\r\n  background-repeat: no-repeat; \/* Prevent the image from repeating *\/\r\n  background-position: center; \/* Center the background image *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-479956c elementor-widget elementor-widget-text-editor\" data-id=\"479956c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Propriedades para Controlar Imagens de Fundo<\/span><\/h4>\n<h5><span style=\"font-weight: 400;\">Background-size<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">As op\u00e7\u00f5es incluem:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">cover<\/span><span style=\"font-weight: 400;\">: Redimensiona a imagem para cobrir todo o elemento, potencialmente recortando algumas partes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\">: Redimensiona a imagem para caber dentro do elemento, potencialmente deixando espa\u00e7o.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">length<\/span><span style=\"font-weight: 400;\">: Especifica uma largura e\/ou altura fixa.<\/span><\/li>\n<\/ul>\n<h5><span style=\"font-weight: 400;\">Background-repeat<\/span><\/h5>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">repeat<\/span><span style=\"font-weight: 400;\">: A imagem \u00e9 repetida horizontal e verticalmente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">repeat-x<\/span><span style=\"font-weight: 400;\">: A imagem \u00e9 repetida apenas horizontalmente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">repeat-y<\/span><span style=\"font-weight: 400;\">: A imagem \u00e9 repetida apenas verticalmente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">no-repeat<\/span><span style=\"font-weight: 400;\">: A imagem \u00e9 exibida apenas uma vez.<\/span><\/li>\n<\/ul>\n<h5><span style=\"font-weight: 400;\">Background-position<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">Ajuste o posicionamento da imagem com valores como <\/span><span style=\"font-weight: 400;\">left<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">right<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">center<\/span><span style=\"font-weight: 400;\">, ou porcentagens.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Mapas de Imagem<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Mapas de imagem permitem definir regi\u00f5es clic\u00e1veis espec\u00edficas dentro de uma \u00fanica imagem, ideais para diagramas interativos, infogr\u00e1ficos ou navega\u00e7\u00e3o complexa. Veja como eles funcionam:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">&lt;map&gt;<\/span><b> Tag<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Define o mapa de imagem com um nome \u00fanico.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb2e880 elementor-widget elementor-widget-code-highlight\" data-id=\"bb2e880\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<map name=\"planet-map\"> <\/map>\r\n\r\n<area> Tag\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-afd3e76 elementor-widget elementor-widget-text-editor\" data-id=\"afd3e76\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Define cada regi\u00e3o clic\u00e1vel utilizando:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">shape<\/span><span style=\"font-weight: 400;\">: Pode ser <\/span><span style=\"font-weight: 400;\">rect<\/span><span style=\"font-weight: 400;\"> (ret\u00e2ngulo), <\/span><span style=\"font-weight: 400;\">circle<\/span><span style=\"font-weight: 400;\">, ou <\/span><span style=\"font-weight: 400;\">poly<\/span><span style=\"font-weight: 400;\"> (pol\u00edgono)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">coords<\/span><span style=\"font-weight: 400;\">: Coordenadas para definir os limites da forma<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">href<\/span><span style=\"font-weight: 400;\">: O destino do link para aquela \u00e1rea espec\u00edfica<\/span><\/li>\n<\/ul>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55edcd5 elementor-widget elementor-widget-code-highlight\" data-id=\"55edcd5\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<area shape=\"circle\" coords=\"100, 100, 50\" href=\"https:\/\/www.example.com\/mars\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57d5a78 elementor-widget elementor-widget-text-editor\" data-id=\"57d5a78\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Vincular a Imagem<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Utilize o atributo <\/span><span style=\"font-weight: 400;\">usemap<\/span><span style=\"font-weight: 400;\"> dentro da tag <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\"> para conectar a imagem ao mapa.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89144a9 elementor-widget elementor-widget-code-highlight\" data-id=\"89144a9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"planets.jpg\" alt=\"Planets\" usemap=\"#planet-map\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d31c2d9 elementor-widget elementor-widget-text-editor\" data-id=\"d31c2d9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Carregamento Pregui\u00e7oso<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Otimize o desempenho do seu website adiando o carregamento de imagens que n\u00e3o est\u00e3o imediatamente vis\u00edveis para o usu\u00e1rio. O carregamento pregui\u00e7oso faz com que o carregamento inicial da p\u00e1gina pare\u00e7a significativamente mais r\u00e1pido.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Como funciona<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Imagens abaixo da dobra (n\u00e3o inicialmente na viewport) recebem imagens de espa\u00e7o reservado ou n\u00e3o carregam at\u00e9 que o usu\u00e1rio role para baixo.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Benef\u00edcios<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tempos de carregamento inicial de p\u00e1gina mais r\u00e1pidos<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Redu\u00e7\u00e3o do uso de largura de banda<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Melhoria nas pontua\u00e7\u00f5es de SEO<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Aprimorando Seu Fluxo de Trabalho com o Elementor<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Gerenciamento de Imagens Simplificado<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O Elementor facilita o manuseio de imagens com sua interface intuitiva e recursos poderosos:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Biblioteca de M\u00eddia com Arrastar e Soltar<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Fa\u00e7a upload, organize e acesse facilmente suas imagens a partir de um local centralizado. Pesquise, classifique e filtre para encontrar rapidamente o que voc\u00ea precisa.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">O Widget de Imagem<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Adicione imagens sem esfor\u00e7o \u00e0s suas p\u00e1ginas e postagens com o widget de Imagem dedicado. Personalize o seguinte diretamente dentro do Editor Elementor:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Fonte da imagem (upload ou sele\u00e7\u00e3o da biblioteca de m\u00eddia)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Texto alternativo<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Legenda<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Estiliza\u00e7\u00e3o (largura, altura, bordas, sombras, etc.)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Alinhamento<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vincula\u00e7\u00e3o<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Comportamento responsivo<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Edi\u00e7\u00e3o em Tempo Real<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">O editor visual do Elementor permite que voc\u00ea veja exatamente como suas imagens ficar\u00e3o dentro do seu conte\u00fado e fa\u00e7a ajustes em tempo real.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Otimiza\u00e7\u00e3o de Imagem do Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Se o construtor de websites Elementor incluir um recurso de otimiza\u00e7\u00e3o de imagem integrado, isso \u00e9 uma vantagem significativa:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Otimiza\u00e7\u00e3o Autom\u00e1tica:<\/b><span style=\"font-weight: 400;\"> Simplifique seu fluxo de trabalho tendo o Elementor otimizando automaticamente as imagens conforme voc\u00ea as carrega, garantindo o melhor equil\u00edbrio entre qualidade visual e tamanho de arquivo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Personaliza\u00e7\u00e3o:<\/b><span style=\"font-weight: 400;\"> Alguns recursos de otimiza\u00e7\u00e3o permitem que voc\u00ea controle o n\u00edvel de compress\u00e3o ou exclua imagens espec\u00edficas da otimiza\u00e7\u00e3o.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Conclus\u00e3o<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As imagens s\u00e3o a pedra angular de websites visualmente atraentes e envolventes. Desde a compreens\u00e3o b\u00e1sica da  <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\"> tag at\u00e9 o emprego de t\u00e9cnicas avan\u00e7adas como mapas de imagem e carregamento pregui\u00e7oso, h\u00e1 muito envolvido no dom\u00ednio do uso de imagens em HTML.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lembre-se, escolher os formatos de imagem apropriados e empregar estrat\u00e9gias de otimiza\u00e7\u00e3o s\u00e3o essenciais para manter um website de carregamento r\u00e1pido. Isto \u00e9 vital para proporcionar uma experi\u00eancia do usu\u00e1rio impec\u00e1vel e manter-se nas boas gra\u00e7as dos mecanismos de busca.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se o senhor \u00e9 um usu\u00e1rio do WordPress e utiliza o construtor de websites Elementor, o senhor tem acesso a um fluxo de trabalho otimizado para o gerenciamento de imagens. As funcionalidades intuitivas do Elementor e a potencial integra\u00e7\u00e3o de ferramentas de otimiza\u00e7\u00e3o de imagens tornam sua tarefa consideravelmente mais simples. Adicionalmente, o Elementor Hosting fornece uma base robusta com sua velocidade, alcance global e seguran\u00e7a aprimorada &#8211; tudo adaptado para proporcionar \u00e0 sua website WordPress rica em imagens a melhor plataforma poss\u00edvel.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ao seguir os princ\u00edpios e t\u00e9cnicas delineados neste guia, o senhor estar\u00e1 bem encaminhado para adicionar imagens ao seu website que n\u00e3o apenas impressionar\u00e3o seus visitantes, mas tamb\u00e9m ter\u00e3o um desempenho excepcionalmente bom!<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, fragmentam blocos de texto, aprimoram a narrativa e at\u00e9 influenciam a percep\u00e7\u00e3o dos visitantes sobre sua marca. Embora o texto seja essencial para transmitir informa\u00e7\u00f5es, os elementos visuais criam uma experi\u00eancia de usu\u00e1rio mais rica e podem at\u00e9 melhorar o posicionamento do seu site nos mecanismos de busca.<\/p>\n","protected":false},"author":2024234,"featured_media":113336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[517],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123678","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recursos-pt-br"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Adicionar Uma Imagem HTML<\/title>\n<meta name=\"description\" content=\"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, fragmentam blocos de texto, aprimoram a narrativa e at\u00e9 influenciam a percep\u00e7\u00e3o dos visitantes sobre sua marca. Embora o texto seja essencial para transmitir informa\u00e7\u00f5es, os elementos visuais criam uma experi\u00eancia de usu\u00e1rio mais rica e podem at\u00e9 melhorar o posicionamento do seu site nos mecanismos de busca.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Adicionar Uma Imagem HTML\" \/>\n<meta property=\"og:description\" content=\"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, fragmentam blocos de texto, aprimoram a narrativa e at\u00e9 influenciam a percep\u00e7\u00e3o dos visitantes sobre sua marca. Embora o texto seja essencial para transmitir informa\u00e7\u00f5es, os elementos visuais criam uma experi\u00eancia de usu\u00e1rio mais rica e podem at\u00e9 melhorar o posicionamento do seu site nos mecanismos de busca.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T07:19:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-17T13:03:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Como Adicionar Uma Imagem HTML\",\"datePublished\":\"2025-03-03T07:19:52+00:00\",\"dateModified\":\"2025-12-17T13:03:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/\"},\"wordCount\":2074,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Recursos\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/\",\"name\":\"Como Adicionar Uma Imagem HTML\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T07:19:52+00:00\",\"dateModified\":\"2025-12-17T13:03:10+00:00\",\"description\":\"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, fragmentam blocos de texto, aprimoram a narrativa e at\u00e9 influenciam a percep\u00e7\u00e3o dos visitantes sobre sua marca. Embora o texto seja essencial para transmitir informa\u00e7\u00f5es, os elementos visuais criam uma experi\u00eancia de usu\u00e1rio mais rica e podem at\u00e9 melhorar o posicionamento do seu site nos mecanismos de busca.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recursos\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/category\/recursos-pt-br\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Adicionar Uma Imagem HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como Adicionar Uma Imagem HTML","description":"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, fragmentam blocos de texto, aprimoram a narrativa e at\u00e9 influenciam a percep\u00e7\u00e3o dos visitantes sobre sua marca. Embora o texto seja essencial para transmitir informa\u00e7\u00f5es, os elementos visuais criam uma experi\u00eancia de usu\u00e1rio mais rica e podem at\u00e9 melhorar o posicionamento do seu site nos mecanismos de busca.","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:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Como Adicionar Uma Imagem HTML","og_description":"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, fragmentam blocos de texto, aprimoram a narrativa e at\u00e9 influenciam a percep\u00e7\u00e3o dos visitantes sobre sua marca. Embora o texto seja essencial para transmitir informa\u00e7\u00f5es, os elementos visuais criam uma experi\u00eancia de usu\u00e1rio mais rica e podem at\u00e9 melhorar o posicionamento do seu site nos mecanismos de busca.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T07:19:52+00:00","article_modified_time":"2025-12-17T13:03:10+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Itamar Haim","Est. tempo de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Como Adicionar Uma Imagem HTML","datePublished":"2025-03-03T07:19:52+00:00","dateModified":"2025-12-17T13:03:10+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/"},"wordCount":2074,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Recursos"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/","url":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/","name":"Como Adicionar Uma Imagem HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T07:19:52+00:00","dateModified":"2025-12-17T13:03:10+00:00","description":"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, fragmentam blocos de texto, aprimoram a narrativa e at\u00e9 influenciam a percep\u00e7\u00e3o dos visitantes sobre sua marca. Embora o texto seja essencial para transmitir informa\u00e7\u00f5es, os elementos visuais criam uma experi\u00eancia de usu\u00e1rio mais rica e podem at\u00e9 melhorar o posicionamento do seu site nos mecanismos de busca.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-adicionar-uma-imagem-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Recursos","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/recursos-pt-br\/"},{"@type":"ListItem","position":3,"name":"Como Adicionar Uma Imagem HTML"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/pt-br\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=123678"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123678\/revisions"}],"predecessor-version":[{"id":147882,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123678\/revisions\/147882"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/113336"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=123678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=123678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=123678"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=123678"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=123678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}