{"id":123647,"date":"2025-03-03T08:20:27","date_gmt":"2025-03-03T06:20:27","guid":{"rendered":"https:\/\/elementor.com\/blog\/como-redimensionar-uma-imagem-em-css-e-html\/"},"modified":"2025-11-19T01:33:02","modified_gmt":"2025-11-18T23:33:02","slug":"como-redimensionar-uma-imagem-em-css-e-html","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/","title":{"rendered":"Como Redimensionar uma Imagem em CSS e HTML"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\u00c9 a\u00ed que entra o redimensionamento de imagens com CSS. Com CSS<\/a> (Cascading Style Sheets), voc\u00ea disp\u00f5e de ferramentas poderosas para controlar como as imagens aparecem em seu website, garantindo que elas tenham a melhor apar\u00eancia poss\u00edvel sem comprometer os tempos de carregamento da p\u00e1gina.<\/span><\/p>\n

Este guia ir\u00e1 equip\u00e1-lo com tudo o que voc\u00ea precisa para dominar o redimensionamento de imagens em CSS como um profissional. Quer voc\u00ea esteja construindo um blog pessoal, uma loja online elegante ou uma aplica\u00e7\u00e3o web complexa, voc\u00ea aprender\u00e1 como fazer suas imagens brilharem. <\/span><\/p>\n

Compreendendo os Fundamentos do Redimensionamento de Imagens <\/span><\/h2>\n

Dimens\u00f5es e Resolu\u00e7\u00e3o de Imagens<\/span><\/h3>\n

Antes de explorarmos as t\u00e9cnicas de CSS, vamos come\u00e7ar por entender os conceitos fundamentais de dimens\u00f5es e resolu\u00e7\u00e3o de imagens.<\/span><\/p>\n

    \n
  • Pixels:<\/b> As imagens na web s\u00e3o compostas por pequenos quadrados denominados pixels. Cada pixel cont\u00e9m informa\u00e7\u00f5es de cor. Quanto mais pixels uma imagem possuir, maior ser\u00e1 sua resolu\u00e7\u00e3o e mais detalhes ela poder\u00e1 exibir.<\/span><\/li>\n
  • Dimens\u00f5es da Imagem:<\/b> As dimens\u00f5es da imagem s\u00e3o expressas em largura e altura, medidas em pixels (por exemplo, 1200px x 800px). Essas dimens\u00f5es determinam o espa\u00e7o f\u00edsico que uma imagem ocupa em uma p\u00e1gina web.<\/span><\/li>\n
  • Propor\u00e7\u00e3o:<\/b> A propor\u00e7\u00e3o da imagem \u00e9 a rela\u00e7\u00e3o proporcional entre a largura e a altura de uma imagem (por exemplo, 16:9, 4:3). Manter a propor\u00e7\u00e3o da imagem \u00e9 crucial ao redimensionar imagens para evitar distor\u00e7\u00f5es.<\/span><\/li>\n<\/ul>\n

    Formatos de Arquivo de Imagem<\/span><\/h3>\n

    A web suporta diversos formatos de arquivo de imagem, cada um com suas for\u00e7as e casos de uso ideais. Vamos explorar brevemente os mais comuns que voc\u00ea encontrar\u00e1:<\/span><\/p>\n

      \n
    1. JPEG (JPG):<\/b> Este formato \u00e9 mais adequado para fotografias e imagens com cores complexas e gradientes. Ele suporta compress\u00e3o ajust\u00e1vel para equilibrar qualidade e tamanho do arquivo.<\/span><\/li>\n
    2. PNG: <\/b>\u00c9 ideal para logotipos, gr\u00e1ficos e imagens onde a transpar\u00eancia \u00e9 necess\u00e1ria. Suporta compress\u00e3o sem perdas (sem perda de qualidade).<\/span><\/li>\n
    3. GIF:<\/b> Utilizado principalmente para anima\u00e7\u00f5es simples e gr\u00e1ficos. Paleta de cores limitada.<\/span><\/li>\n
    4. SVG: <\/b>\u00c9 um formato baseado em vetores perfeito para logotipos, \u00edcones e ilustra\u00e7\u00f5es. \u00c9 infinitamente escal\u00e1vel sem perda de qualidade.<\/span><\/li>\n<\/ol>\n

      Compreender esses formatos de arquivo \u00e9 importante porque escolher o correto pode impactar significativamente o tamanho de suas imagens web e seus tempos de carregamento. E lembre-se, o GenericProductName suporta perfeitamente todos esses tipos de arquivo, permitindo que voc\u00ea utilize a imagem perfeita para cada situa\u00e7\u00e3o em seu website.<\/span><\/p>\n

      Impacto no Desempenho Web<\/span><\/h3>\n

      Por que toda essa discuss\u00e3o sobre pixels, formatos de imagem e redimensionamento \u00e9 importante? Tudo se resume ao desempenho web. Imagens grandes e n\u00e3o otimizadas s\u00e3o um dos principais culpados por websites lentos. Aqui est\u00e1 o porqu\u00ea:<\/span><\/p>\n

        \n
      • Consumo de Largura de Banda:<\/b> Arquivos de imagem grandes requerem mais dados a serem transferidos do servidor para o navegador do visitante, consumindo largura de banda valiosa.<\/span><\/li>\n
      • Aumento dos Tempos de Carregamento:<\/b> O navegador precisa de tempo para baixar e processar arquivos de imagem grandes, atrasando a exibi\u00e7\u00e3o de toda a p\u00e1gina e levando a uma experi\u00eancia frustrante para o usu\u00e1rio.<\/span><\/li>\n
      • Impacto Negativo no SEO:<\/b> Motores de busca como o Google consideram a velocidade do site um fator de classifica\u00e7\u00e3o. Websites lentos podem ser penalizados nos resultados de busca.<\/span><\/li>\n
      • Experi\u00eancia do Usu\u00e1rio (UX) Insatisfat\u00f3ria:<\/b> Imagens n\u00e3o otimizadas, especialmente em dispositivos m\u00f3veis com conex\u00f5es mais lentas, podem arruinar a experi\u00eancia do usu\u00e1rio e fazer com que os visitantes abandonem seu website antes que ele carregue completamente.<\/span><\/li>\n<\/ul>\n

        \u00c9 por isso que o redimensionamento de imagens, juntamente com outras t\u00e9cnicas de otimiza\u00e7\u00e3o, \u00e9 fundamental para a constru\u00e7\u00e3o de websites r\u00e1pidos e envolventes \u2014 especialmente se voc\u00ea planeja oferecer uma experi\u00eancia visualmente rica!<\/span><\/p>\n

        T\u00e9cnicas CSS para Redimensionamento de Imagens<\/span><\/h2>\n

        Propriedades width e height<\/span><\/h3>\n

        A maneira mais fundamental de redimensionar imagens em CSS \u00e9 usando as propriedades <\/span>width<\/span> e <\/span>height<\/span> . Voc\u00ea pode controlar diretamente o tamanho exibido de uma imagem definindo essas propriedades com diversos valores:<\/span><\/p>\n

          \n
        1. Pixels (px):<\/b> Esta unidade proporciona o controle mais preciso sobre as dimens\u00f5es da imagem (por exemplo, largura: 300px; altura: 200px).<\/span><\/li>\n
        2. Porcentagens (%):<\/b> Esta unidade torna as imagens responsivas, permitindo que elas se redimensionem em rela\u00e7\u00e3o ao seu cont\u00eainer pai (por exemplo, largura: 50%; altura: auto, para fazer uma imagem ocupar metade da largura de seu cont\u00eainer).<\/span><\/li>\n<\/ol>\n

          Exemplo de C\u00f3digo<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t
          \n\t\t\t
          \n\t\t\t\t\n\t\t\t\t\tHTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"width: 400px; height: 300px;\">\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-23408f6 elementor-widget elementor-widget-text-editor\" data-id=\"23408f6\" 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><b>Nota Importante:<\/b><span style=\"font-weight: 400;\"> Sempre considere o design responsivo ao utilizar <\/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;\">. Com o Elementor, voc\u00ea tem controles visuais intuitivos para ajustar os tamanhos das imagens em diferentes tamanhos de tela, garantindo que suas imagens fiquem perfeitas em qualquer dispositivo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Propriedades max-width e max-height<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Enquanto <\/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;\"> definem dimens\u00f5es expl\u00edcitas, as propriedades <\/span><span style=\"font-weight: 400;\">max-width<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">max-height<\/span><span style=\"font-weight: 400;\"> s\u00e3o incrivelmente \u00fateis para estabelecer limites de tamanho enquanto mant\u00eam a responsividade.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Veja como eles funcionam:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>max-width:<\/b><span style=\"font-weight: 400;\"> Impede que uma imagem exceda uma largura especificada, permitindo que ela encolha se necess\u00e1rio (por exemplo, <\/span><span style=\"font-weight: 400;\">max-width: 100%;<\/span><span style=\"font-weight: 400;\"> garante que a imagem nunca ocupe mais do que 100% da largura de seu cont\u00eainer).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>max-height:<\/b><span style=\"font-weight: 400;\"> Funciona de maneira semelhante, estabelecendo um limite na altura de uma imagem (por exemplo, <\/span><span style=\"font-weight: 400;\">max-height: 400px;<\/span><span style=\"font-weight: 400;\"> impediria que a imagem crescesse al\u00e9m de 400 pixels de altura).<\/span><\/li>\n<\/ul>\n<p><b>Por que utilizar estas propriedades?<\/b><span style=\"font-weight: 400;\"> Elas s\u00e3o uma ferramenta essencial para evitar que as imagens ultrapassem seus cont\u00eaineres e perturbem o layout, especialmente em designs responsivos.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemplo de C\u00f3digo<\/span><\/h4>\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-13b72f0 elementor-widget elementor-widget-code-highlight\" data-id=\"13b72f0\" 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 beautiful landscape\" style=\"max-width: 100%; height: auto;\"> \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-dd04060 elementor-widget elementor-widget-text-editor\" data-id=\"dd04060\" 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><b>Dica Profissional:<\/b><span style=\"font-weight: 400;\"> Frequentemente, definir <\/span><span style=\"font-weight: 400;\">max-width: 100%;<\/span><span style=\"font-weight: 400;\"> com <\/span><span style=\"font-weight: 400;\">height: auto;<\/span><span style=\"font-weight: 400;\"> \u00e9 a melhor op\u00e7\u00e3o para o redimensionamento responsivo de imagens, mas exploraremos os motivos na pr\u00f3xima subse\u00e7\u00e3o!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Preservando a Propor\u00e7\u00e3o de Aspecto com &#8216;auto&#8217;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Recorda-se das propor\u00e7\u00f5es de aspecto que discutimos anteriormente? Mant\u00ea-las durante o redimensionamento \u00e9 crucial para evitar que suas imagens pare\u00e7am comprimidas, esticadas ou distorcidas. \u00c9 aqui que o valor  <\/span><span style=\"font-weight: 400;\">auto<\/span><span style=\"font-weight: 400;\"> vem ao resgate:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Definindo Uma Dimens\u00e3o, a Outra &#8216;auto&#8217;:<\/b><span style=\"font-weight: 400;\"> Quando voc\u00ea define <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\"> ou <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\"> com um valor espec\u00edfico (pixels ou porcentagem) e a dimens\u00e3o oposta como <\/span><span style=\"font-weight: 400;\">auto<\/span><span style=\"font-weight: 400;\">, o navegador calcula automaticamente a dimens\u00e3o ausente para preservar a propor\u00e7\u00e3o de aspecto.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Por Que Isso \u00e9 Importante<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Integridade Visual:<\/b><span style=\"font-weight: 400;\"> Garante que suas imagens aparentem o melhor poss\u00edvel e conforme pretendido.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Harmonia do Layout:<\/b><span style=\"font-weight: 400;\"> Previne que as imagens perturbem o design do seu website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Profissionalismo:<\/b><span style=\"font-weight: 400;\"> Imagens distorcidas podem transmitir uma impress\u00e3o n\u00e3o profissional.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Exemplo de C\u00f3digo<\/span><\/h4>\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-c9a0b08 elementor-widget elementor-widget-code-highlight\" data-id=\"c9a0b08\" 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 beautiful landscape\" style=\"width: 100%; height: auto;\">\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-1e1ee92 elementor-widget elementor-widget-text-editor\" data-id=\"1e1ee92\" 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><b>Dica do Elementor:<\/b><span style=\"font-weight: 400;\"> O editor visual do Elementor torna incrivelmente f\u00e1cil redimensionar imagens enquanto mant\u00e9m automaticamente as propor\u00e7\u00f5es de aspecto, proporcionando um equil\u00edbrio perfeito entre controle e conveni\u00eancia.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Imagens de Fundo e background-size<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Em vez de utilizar a tag <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\"> o CSS permite definir imagens como planos de fundo de v\u00e1rios elementos. Isso desbloqueia possibilidades criativas de design e t\u00e9cnicas poderosas de redimensionamento usando a propriedade  <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Aqui est\u00e3o os principais valores para <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain:<\/b><span style=\"font-weight: 400;\"> A imagem \u00e9 escalada para caber inteiramente dentro do cont\u00eainer enquanto mant\u00e9m sua propor\u00e7\u00e3o de aspecto. Algumas \u00e1reas do plano de fundo podem ficar vazias se a propor\u00e7\u00e3o de aspecto da imagem n\u00e3o corresponder \u00e0 do cont\u00eainer.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover:<\/b><span style=\"font-weight: 400;\"> A imagem \u00e9 escalada para cobrir completamente o cont\u00eainer enquanto mant\u00e9m sua propor\u00e7\u00e3o de aspecto. Isso pode resultar em partes da imagem sendo cortadas se as propor\u00e7\u00f5es de aspecto n\u00e3o se alinharem.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>100% 100%:<\/b><span style=\"font-weight: 400;\"> For\u00e7a a imagem a se esticar para preencher toda a largura e altura do cont\u00eainer, potencialmente distorcendo a propor\u00e7\u00e3o de aspecto.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Valores Personalizados:<\/b><span style=\"font-weight: 400;\"> Voc\u00ea tamb\u00e9m pode definir valores espec\u00edficos em pixels ou porcentagens para o <\/span><span style=\"font-weight: 400;\">background size (por exemplo, background-size: 500px 300px)<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemplo de C\u00f3digo<\/span><\/h4>\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-90bf6ea elementor-widget elementor-widget-code-highlight\" data-id=\"90bf6ea\" 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-element {\r\n  background-image: url(\"my-image.jpg\");\r\n  background-size: cover; \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-a9b8899 elementor-widget elementor-widget-text-editor\" data-id=\"a9b8899\" 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;\">Casos de Uso<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Se\u00e7\u00f5es Hero:<\/b><span style=\"font-weight: 400;\"> Crie \u00e1reas hero visualmente impactantes com imagens de fundo grandes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sobreposi\u00e7\u00f5es de Texto:<\/b><span style=\"font-weight: 400;\"> Combine imagens de fundo com texto para efeitos envolventes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Padr\u00f5es:<\/b><span style=\"font-weight: 400;\"> Utilize imagens pequenas e repetitivas para criar padr\u00f5es de fundo interessantes.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Propriedade object-fit<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\">  propriedade oferece um controle minucioso sobre como uma imagem (ou v\u00eddeo) se ajusta dentro de sua caixa de conte\u00fado. Considere-a como a contrapartida CSS dos conceitos <\/span><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">cover<\/span><span style=\"font-weight: 400;\"> que exploramos com <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">, por\u00e9m com ainda mais op\u00e7\u00f5es:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fill:<\/b><span style=\"font-weight: 400;\"> A imagem se estende (potencialmente distorcendo-se) para preencher toda a caixa de conte\u00fado.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain:<\/b><span style=\"font-weight: 400;\"> A imagem \u00e9 dimensionada para caber inteiramente dentro da caixa de conte\u00fado, mantendo sua propor\u00e7\u00e3o (semelhante a <\/span><span style=\"font-weight: 400;\">background-size: contain<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover:<\/b><span style=\"font-weight: 400;\"> A imagem \u00e9 dimensionada para cobrir toda a caixa de conte\u00fado preservando a propor\u00e7\u00e3o, potencialmente recortando partes da imagem (semelhante a <\/span><span style=\"font-weight: 400;\">background-size: cover<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>none:<\/b><span style=\"font-weight: 400;\"> A imagem \u00e9 exibida em seu tamanho original, sem redimensionamento.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scale-down:<\/b><span style=\"font-weight: 400;\"> A imagem escolhe entre <\/span><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">none<\/span><span style=\"font-weight: 400;\"> com base no tamanho da imagem ser menor ou maior que a caixa de conte\u00fado.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemplo de C\u00f3digo<\/span><\/h4>\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-8f13963 elementor-widget elementor-widget-code-highlight\" data-id=\"8f13963\" 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  width: 100%;  \r\n  height: 300px; \r\n  object-fit: cover; \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-fc3e025 elementor-widget elementor-widget-text-editor\" data-id=\"fc3e025\" 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><b>Compara\u00e7\u00f5es Visuais:<\/b><span style=\"font-weight: 400;\"> Frequentemente, \u00e9 mais eficaz visualizar os diferentes valores de <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\">  em a\u00e7\u00e3o para compreender plenamente suas diferen\u00e7as. Considere incluir um conjunto de exemplos de imagens demonstrando cada valor dentro desta se\u00e7\u00e3o do artigo.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Quando Utilizar object-fit<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Imagens de Produtos:<\/b><span style=\"font-weight: 400;\"> Assegure a exibi\u00e7\u00e3o consistente de fotos de produtos dentro de cont\u00eaineres de tamanho fixo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Miniaturas:<\/b><span style=\"font-weight: 400;\"> Crie galerias de miniaturas uniformes onde as propor\u00e7\u00f5es podem variar.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Conte\u00fado Carregado pelo Usu\u00e1rio:<\/b><span style=\"font-weight: 400;\"> Controle como tamanhos de imagens potencialmente imprevis\u00edveis s\u00e3o exibidos.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Redimensionamento Responsivo de Imagens <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Consultas de M\u00eddia<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As media queries s\u00e3o a pedra angular do design responsivo para web. Elas permitem que voc\u00ea aplique diferentes estilos CSS baseados em condi\u00e7\u00f5es espec\u00edficas, como o tamanho da tela ou a orienta\u00e7\u00e3o do dispositivo do navegador do visitante.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Sintaxe B\u00e1sica de Media Query<\/span><\/h4>\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-dd8e6a6 elementor-widget elementor-widget-code-highlight\" data-id=\"dd8e6a6\" 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\n\n@media (min-width: 768px) {\n\n\u00a0\u00a0\/* CSS styles for screens 768px or wider *\/\n\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-c89ad42 elementor-widget elementor-widget-text-editor\" data-id=\"c89ad42\" 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><b>Pontos de Quebra:<\/b><span style=\"font-weight: 400;\"> Os <\/span><span style=\"font-weight: 400;\">min-width<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">max-width<\/span><span style=\"font-weight: 400;\">, etc., dentro das media queries, definem pontos de quebra onde seu design se altera. Pontos de quebra comuns visam tablets, telefones celulares e desktops maiores.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Media Queries para Imagens<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Voc\u00ea pode utilizar media queries para redimensionar imagens de maneira diferente em diversos tamanhos de tela:<\/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-c475496 elementor-widget elementor-widget-code-highlight\" data-id=\"c475496\" 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  width: 100%;  \r\n  height: 300px; \r\n  object-fit: cover; \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-560d7f7 elementor-widget elementor-widget-text-editor\" data-id=\"560d7f7\" 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><b>Explica\u00e7\u00e3o:<\/b><span style=\"font-weight: 400;\"> Neste exemplo, as imagens ocupar\u00e3o toda a largura do cont\u00eainer em telas menores e, em seguida, encolher\u00e3o para 50% da largura do cont\u00eainer em telas mais largas que 768px.<\/span><\/p>\n<p><b>Dica Importante:<\/b><span style=\"font-weight: 400;\">  Sempre pense primeiro no mobile! Comece projetando para telas menores e, em seguida, utilize media queries para aprimorar progressivamente o layout para displays maiores.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">T\u00e9cnicas de Redimensionamento Fluido<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Embora as media queries ofere\u00e7am muito controle, \u00e0s vezes voc\u00ea deseja que as imagens se ajustem suavemente e proporcionalmente em todos os tamanhos de tela, n\u00e3o apenas em pontos de quebra espec\u00edficos. Aqui est\u00e3o algumas maneiras de alcan\u00e7ar isso:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Max-width: 100% e Height: auto (Revisitado):<\/b><span style=\"font-weight: 400;\">  Se voc\u00ea se lembra, introduzimos esta t\u00e9cnica anteriormente. Seu verdadeiro poder reside em sua responsividade autom\u00e1tica \u2013 as imagens nunca exceder\u00e3o a largura de seu cont\u00eainer, e sua altura se ajustar\u00e1 proporcionalmente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Combinando Porcentagens com Media Queries:<\/b><span style=\"font-weight: 400;\">  Voc\u00ea pode utilizar porcentagens para largura dentro de media queries para criar layouts fluidos com ajustes direcionados. Por exemplo:<\/span><\/li>\n<\/ol>\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-478ee4c elementor-widget elementor-widget-code-highlight\" data-id=\"478ee4c\" 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  width: 100%; \r\n  height: auto;  \r\n}\r\n@media (min-width: 768px) {\r\n  img {\r\n    width: 50%;  \/* Images occupy 50% of their container on larger screens *\/\r\n  }\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-fc19d3d elementor-widget elementor-widget-text-editor\" data-id=\"fc19d3d\" 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;\">O redimensionamento fluido nem sempre \u00e9 a solu\u00e7\u00e3o perfeita. \u00c0s vezes, imagens com dimens\u00f5es fixas funcionam melhor dentro de elementos de design espec\u00edficos. \u00c9 essencial escolher as t\u00e9cnicas de redimensionamento adequadas estrategicamente com base em seu layout geral.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">O Atributo &#8216;srcset&#8217;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O atributo <\/span><span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\">, utilizado com a tag <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\"> , proporciona uma maneira de oferecer ao navegador m\u00faltiplas vers\u00f5es da mesma imagem em diferentes resolu\u00e7\u00f5es. Isso capacita o navegador a selecionar a imagem mais apropriada com base no dispositivo e tamanho de tela do usu\u00e1rio.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Sintaxe B\u00e1sica<\/span><\/h4>\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-2825604 elementor-widget elementor-widget-code-highlight\" data-id=\"2825604\" 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 beautiful landscape\"\r\n     srcset=\"my-image-small.jpg 480w, \r\n             my-image-medium.jpg 800w, \r\n             my-image-large.jpg 1200w\">\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-44082ef elementor-widget elementor-widget-text-editor\" data-id=\"44082ef\" 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><b>O Descritor &#8216;w&#8217;:<\/b><span style=\"font-weight: 400;\"> Informa ao navegador a largura de cada vers\u00e3o da imagem.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Benef\u00edcios<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Aprimorou-se o desempenho evitando downloads de imagens desnecessariamente grandes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Otimizou-se a exibi\u00e7\u00e3o para telas de alta resolu\u00e7\u00e3o.<\/span><\/li>\n<\/ol>\n<p><b>Nota:<\/b> <span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\"> \u00e9 uma ferramenta poderosa para otimiza\u00e7\u00e3o avan\u00e7ada de imagens responsivas, frequentemente utilizada em combina\u00e7\u00e3o com outras t\u00e9cnicas que discutimos.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Otimiza\u00e7\u00e3o e Melhores Pr\u00e1ticas <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Ferramentas de Otimiza\u00e7\u00e3o de Imagens<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Embora seja poss\u00edvel redimensionar imagens manualmente com software de edi\u00e7\u00e3o de imagens, ferramentas de otimiza\u00e7\u00e3o dedicadas agilizam o processo e desbloqueiam ganhos adicionais de desempenho:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Otimizador de Imagens do Elementor: <\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Esta poderosa ferramenta est\u00e1 perfeitamente integrada \u00e0 experi\u00eancia do Elementor e simplifica a otimiza\u00e7\u00e3o de imagens dentro do seu fluxo de trabalho do WordPress.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Considera\u00e7\u00f5es Principais<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Compress\u00e3o com Perda vs. Sem Perda:<\/b><span style=\"font-weight: 400;\"> A compress\u00e3o com perda oferece maior redu\u00e7\u00e3o no tamanho do arquivo, mas com alguma perda de qualidade da imagem. A compress\u00e3o sem perda preserva a qualidade total \u00e0 custa de arquivos ligeiramente maiores. Escolha sabiamente com base no tipo de imagem.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Formato de Imagem (Revisitado):<\/b><span style=\"font-weight: 400;\"> Lembre-se, JPEGs geralmente s\u00e3o melhores para fotos, enquanto PNGs se destacam para gr\u00e1ficos. Escolher o formato correto antes da otimiza\u00e7\u00e3o \u00e9 fundamental!<\/span><\/li>\n<\/ol>\n<p><b>Dica Profissional:<\/b><span style=\"font-weight: 400;\"> Frequentemente, utilizar uma combina\u00e7\u00e3o do Otimizador de Imagens do Elementor para o manuseio principal de imagens e um servi\u00e7o externo especializado para necessidades espec\u00edficas proporciona maior flexibilidade e os melhores resultados.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Propriedade image-rendering<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A <\/span><span style=\"font-weight: 400;\">image-rendering<\/span><span style=\"font-weight: 400;\">  propriedade fornece dicas ao navegador sobre como deve priorizar a renderiza\u00e7\u00e3o quando uma imagem \u00e9 ampliada ou reduzida. Eis os valores comuns:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>auto:<\/b><span style=\"font-weight: 400;\">  O padr\u00e3o do navegador. Geralmente tenta equilibrar velocidade e qualidade.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>pixelated:<\/b><span style=\"font-weight: 400;\"> Mant\u00e9m uma apar\u00eancia n\u00edtida e pixelada, ideal para gr\u00e1ficos de estilo retr\u00f4 ou quando se deseja intencionalmente preservar bordas duras de pixels ao ampliar.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>smooth:<\/b><span style=\"font-weight: 400;\"> Prioriza uma apar\u00eancia mais suave e menos pixelada (isso pode introduzir desfoque ao ampliar imagens).<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\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-16d5c62 elementor-widget elementor-widget-code-highlight\" data-id=\"16d5c62\" 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  image-rendering: pixelated; \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-78f3c46 elementor-widget elementor-widget-text-editor\" data-id=\"78f3c46\" 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;\">Quando Utilizar<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Arte Pixel:<\/b> <span style=\"font-weight: 400;\">pixelated<\/span><span style=\"font-weight: 400;\"> \u00e9 essencial para arte pixel manter sua est\u00e9tica pretendida.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Considera\u00e7\u00f5es de Desempenho:<\/b><span style=\"font-weight: 400;\"> Em alguns casos, escolher <\/span><span style=\"font-weight: 400;\">pixelated<\/span><span style=\"font-weight: 400;\"> pode oferecer pequenas melhorias na velocidade de renderiza\u00e7\u00e3o para imagens ampliadas.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Os navegadores modernos s\u00e3o bastante eficientes na renderiza\u00e7\u00e3o autom\u00e1tica de imagens. Utilize <\/span><span style=\"font-weight: 400;\">image rendering<\/span><span style=\"font-weight: 400;\"> estrategicamente, pois substituir os padr\u00f5es pode, \u00e0s vezes, ter consequ\u00eancias n\u00e3o intencionais.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Considera\u00e7\u00f5es de Redimensionamento para Tipos Espec\u00edficos de Imagens<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Vamos detalhar os principais aspectos a serem considerados ao redimensionar alguns dos tipos de imagens mais comuns que voc\u00ea encontrar\u00e1 em sites:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Imagens Hero<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Imagens grandes e chamativas precisam parecer impressionantes em todos os tamanhos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A otimiza\u00e7\u00e3o do tamanho do arquivo \u00e9 crucial (considere formatos como WebP, se suportados).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Utilize media queries ou <\/span><span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\"> para garantir a resolu\u00e7\u00e3o ideal para diferentes tamanhos de tela.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Galerias de Imagens<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use miniaturas que carreguem rapidamente, vinculando-as a vers\u00f5es otimizadas em tamanho completo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implemente t\u00e9cnicas como carregamento pregui\u00e7oso para experi\u00eancias suaves de carregamento de imagens.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Propor\u00e7\u00f5es consistentes entre as imagens da galeria criam uma apar\u00eancia polida.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Imagens de Produtos (Com\u00e9rcio Eletr\u00f4nico)<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Imagens de alta qualidade s\u00e3o essenciais para impulsionar convers\u00f5es.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Funcionalidade de zoom pode ser necess\u00e1ria, exigindo tamanhos de imagem maiores.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Redimensionamento consistente e espa\u00e7o em branco criam um cat\u00e1logo de produtos limpo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Considere usar uma <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/cdn\/\"   title=\"What Is A CDN (Content Delivery Network)?\u00a02025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20364\">CDN<\/a> (como Cloudflare Enterprise inclu\u00edda no Elementor Hosting) para entrega r\u00e1pida de imagens em todo o mundo.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Conte\u00fado Enviado pelo Usu\u00e1rio<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implemente verifica\u00e7\u00f5es de integridade no lado do servidor para limitar as dimens\u00f5es e tamanhos dos arquivos de imagem.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Otimiza\u00e7\u00e3o autom\u00e1tica para evitar uploads de imagens massivas e n\u00e3o otimizadas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Exiba diretrizes claras aos usu\u00e1rios sobre formatos de imagem aceitos e restri\u00e7\u00f5es de tamanho.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Compatibilidade com Navegadores<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Embora os navegadores modernos ofere\u00e7am excelente support para a maioria das t\u00e9cnicas de redimensionamento de imagens CSS, \u00e9 essencial estar ciente de poss\u00edveis inconsist\u00eancias e como abord\u00e1-las.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Navegadores Antigos<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pode <\/b><span style=\"font-weight: 400;\">n\u00e3o support recursos mais recentes como <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\"> ou comportamento avan\u00e7ado de <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Polyfills<\/b><span style=\"font-weight: 400;\"> ou fallbacks podem ser necess\u00e1rios para fornecer uma experi\u00eancia consistente em navegadores mais antigos (se suport\u00e1-los for um requisito).<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Prefixos de Fornecedores<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ocasionalmente<\/b><span style=\"font-weight: 400;\">, recursos experimentais de CSS requerem prefixos de fornecedor (e.g., <\/span><span style=\"font-weight: 400;\">-webkit-<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">-moz-<\/span><span style=\"font-weight: 400;\">) para a mais ampla compatibilidade at\u00e9 que se tornem completamente padronizados.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Testando<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Minuciosamente<\/b><span style=\"font-weight: 400;\"> teste a exibi\u00e7\u00e3o de imagens do seu website em diferentes navegadores e dispositivos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ferramentas<\/b><span style=\"font-weight: 400;\"> como BrowserStack facilitam o teste em diversos navegadores.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Aprimoramento Progressivo<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Inicie<\/b><span style=\"font-weight: 400;\"> com uma experi\u00eancia b\u00e1sica s\u00f3lida que funcione em todos os lugares.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Utilize <\/b><span style=\"font-weight: 400;\">t\u00e9cnicas como detec\u00e7\u00e3o de recursos para adicionar funcionalidades avan\u00e7adas de redimensionamento de imagens para navegadores que support as mesmas.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Com o Elementor, muitas dessas dificuldades de compatibilidade s\u00e3o tratadas para voc\u00ea, assegurando uma exibi\u00e7\u00e3o de imagem responsiva e compat\u00edvel com diversos navegadores sem a necessidade de investigar cada pequena peculiaridade.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">T\u00e9cnicas Avan\u00e7adas de Redimensionamento <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Unidades de Viewport (vh, vw)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As unidades de viewport oferecem uma maneira de dimensionar elementos em rela\u00e7\u00e3o ao viewport (a \u00e1rea vis\u00edvel do navegador). Eis como elas se relacionam com o redimensionamento de imagens:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>vh:<\/b><span style=\"font-weight: 400;\"> 1vh equivale a 1% da altura do viewport.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>vw:<\/b><span style=\"font-weight: 400;\"> 1vw equivale a 1% da largura do viewport.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\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-575ca47 elementor-widget elementor-widget-code-highlight\" data-id=\"575ca47\" 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-height: 80vh;  \/* Image height will never exceed 80% of the viewport height *\/\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-cb67780 elementor-widget elementor-widget-text-editor\" data-id=\"cb67780\" 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;\">Casos de Uso com Imagens<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Defini\u00e7\u00e3o de Tamanhos Flex\u00edveis:<\/b><span style=\"font-weight: 400;\"> Combine porcentagens e unidades fixas para criar elementos que redimensionam mas mant\u00eam deslocamentos espec\u00edficos (e.g., uma barra lateral que ocupa 30% da largura menos uma margem fixa de 20px).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>C\u00e1lculos Complexos:<\/b><span style=\"font-weight: 400;\"> Crie regras de redimensionamento intrincadas que levem em conta m\u00faltiplos fatores.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ajustes Responsivos:<\/b><span style=\"font-weight: 400;\"> Utilize <\/span><span style=\"font-weight: 400;\">calc()<\/span><span style=\"font-weight: 400;\"> dentro de media queries para ajustar com precis\u00e3o o redimensionamento de imagens em pontos de interrup\u00e7\u00e3o espec\u00edficos.<\/span><\/li>\n<\/ul>\n<p><b>Nota:<\/b><span style=\"font-weight: 400;\"> A support do navegador para <\/span><span style=\"font-weight: 400;\">calc()<\/span><span style=\"font-weight: 400;\"> \u00e9 excelente, mas a compatibilidade deve sempre ser considerada.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\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-c38189b elementor-widget elementor-widget-code-highlight\" data-id=\"c38189b\" 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; \r\n}\r\n@media (min-width: 900px) {\r\n  img {\r\n    width: calc(50% - 30px); \/* Image takes up 50% of its container minus 30px on larger screens *\/\r\n  }\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-d0a618b elementor-widget elementor-widget-text-editor\" data-id=\"d0a618b\" 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;\">Filtros e Transforma\u00e7\u00f5es CSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Os filtros e transforma\u00e7\u00f5es CSS fornecem maneiras de manipular imagens visualmente, abrindo possibilidades criativas que v\u00e3o al\u00e9m do redimensionamento b\u00e1sico.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Filtros<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>grayscale:<\/b><span style=\"font-weight: 400;\"> Converte uma imagem para escala de cinza.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>sepia:<\/b><span style=\"font-weight: 400;\"> Aplica um tom s\u00e9pia de estilo vintage.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>blur:<\/b><span style=\"font-weight: 400;\"> Desfoca uma imagem.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>brightness, contrast, saturation:<\/b><span style=\"font-weight: 400;\"> Ajusta essas propriedades visuais.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>E mais!<\/b><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Transforma\u00e7\u00f5es<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scale:<\/b><span style=\"font-weight: 400;\"> Redimensiona uma imagem para cima ou para baixo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>rotate:<\/b><span style=\"font-weight: 400;\"> Rotaciona uma imagem.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>skew, translate:<\/b><span style=\"font-weight: 400;\"> Aplica efeitos de inclina\u00e7\u00e3o ou reposiciona uma imagem.<\/span><\/li>\n<\/ul>\n<h5><span style=\"font-weight: 400;\">Exemplo<\/span><\/h5>\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-cc42968 elementor-widget elementor-widget-code-highlight\" data-id=\"cc42968\" 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:hover {\r\n  filter: grayscale(100%); \r\n  transform: scale(1.1); \/* Image scales up slightly on hover *\/\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-eae8283 elementor-widget elementor-widget-text-editor\" data-id=\"eae8283\" 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><b>Nota sobre Desempenho:<\/b><span style=\"font-weight: 400;\"> O uso excessivo de filtros e transforma\u00e7\u00f5es pode potencialmente impactar as velocidades de carregamento da p\u00e1gina, especialmente em dispositivos mais antigos. Utilize-os estrategicamente para efeitos direcionados.<\/span><\/p>\n<p><b>Integra\u00e7\u00e3o com Elementor:<\/b><span style=\"font-weight: 400;\"> O Elementor fornece controles visuais intuitivos para aplicar muitos desses efeitos, permitindo que voc\u00ea experimente transforma\u00e7\u00f5es de imagem sem a necessidade de escrever c\u00f3digo manualmente.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclus\u00e3o <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Ao longo deste guia, voc\u00ea aprendeu que o redimensionamento de imagens n\u00e3o se trata apenas de fazer as imagens se ajustarem. \u00c9 um aspecto crucial do desempenho web, da experi\u00eancia do usu\u00e1rio e da manuten\u00e7\u00e3o de uma presen\u00e7a online profissional.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ao compreender como as propriedades CSS como <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">object fit<\/span><span style=\"font-weight: 400;\">, e <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">  funcionam, voc\u00ea adquiriu ferramentas poderosas para controlar a exibi\u00e7\u00e3o de imagens. Exploramos t\u00e9cnicas de imagens responsivas e melhores pr\u00e1ticas de otimiza\u00e7\u00e3o, e at\u00e9 abordamos possibilidades avan\u00e7adas de redimensionamento.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se voc\u00ea \u00e9 um usu\u00e1rio WordPress, o Elementor simplifica todo o processo. Desde controles intuitivos de redimensionamento de imagens e seu Otimizador de Imagens integrado at\u00e9 a integra\u00e7\u00e3o perfeita com uma solu\u00e7\u00e3o de hospedagem focada em desempenho como o Elementor Hosting, voc\u00ea tem tudo para entregar visuais impressionantes sem sacrificar a velocidade.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lembre-se:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Otimize suas imagens <\/span><i><span style=\"font-weight: 400;\">antes<\/span><\/i><span style=\"font-weight: 400;\"> de carreg\u00e1-las.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sempre considere o prop\u00f3sito e o contexto da imagem ao escolher t\u00e9cnicas de redimensionamento.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Teste a exibi\u00e7\u00e3o visual do seu website em diferentes dispositivos para garantir uma experi\u00eancia perfeita para todos os visitantes.<\/span><\/li>\n<\/ol>\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, transmitem emo\u00e7\u00f5es e estabelecem o tom para toda a sua presen\u00e7a online. Contudo, visuais deslumbrantes v\u00eam com uma advert\u00eancia: imagens n\u00e3o otimizadas podem prejudicar seriamente a velocidade do seu website. Websites lentos frustram os visitantes, prejudicam suas classifica\u00e7\u00f5es nos mecanismos de busca e, em \u00faltima an\u00e1lise, minam toda a sua estrat\u00e9gia online.<\/p>\n","protected":false},"author":2024234,"featured_media":123648,"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-123647","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 Redimensionar uma Imagem em CSS e HTML<\/title>\n<meta name=\"description\" content=\"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, transmitem emo\u00e7\u00f5es e estabelecem o tom para toda a sua presen\u00e7a online. Contudo, visuais deslumbrantes v\u00eam com uma advert\u00eancia: imagens n\u00e3o otimizadas podem prejudicar seriamente a velocidade do seu website. Websites lentos frustram os visitantes, prejudicam suas classifica\u00e7\u00f5es nos mecanismos de busca e, em \u00faltima an\u00e1lise, minam toda a sua estrat\u00e9gia online.\" \/>\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-redimensionar-uma-imagem-em-css-e-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Redimensionar uma Imagem em CSS e HTML\" \/>\n<meta property=\"og:description\" content=\"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, transmitem emo\u00e7\u00f5es e estabelecem o tom para toda a sua presen\u00e7a online. Contudo, visuais deslumbrantes v\u00eam com uma advert\u00eancia: imagens n\u00e3o otimizadas podem prejudicar seriamente a velocidade do seu website. Websites lentos frustram os visitantes, prejudicam suas classifica\u00e7\u00f5es nos mecanismos de busca e, em \u00faltima an\u00e1lise, minam toda a sua estrat\u00e9gia online.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-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-03T06:20:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-18T23:33:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\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=\"17 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-redimensionar-uma-imagem-em-css-e-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Como Redimensionar uma Imagem em CSS e HTML\",\"datePublished\":\"2025-03-03T06:20:27+00:00\",\"dateModified\":\"2025-11-18T23:33:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/\"},\"wordCount\":3274,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"articleSection\":[\"Recursos\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/\",\"name\":\"Como Redimensionar uma Imagem em CSS e HTML\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"datePublished\":\"2025-03-03T06:20:27+00:00\",\"dateModified\":\"2025-11-18T23:33:02+00:00\",\"description\":\"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, transmitem emo\u00e7\u00f5es e estabelecem o tom para toda a sua presen\u00e7a online. Contudo, visuais deslumbrantes v\u00eam com uma advert\u00eancia: imagens n\u00e3o otimizadas podem prejudicar seriamente a velocidade do seu website. Websites lentos frustram os visitantes, prejudicam suas classifica\u00e7\u00f5es nos mecanismos de busca e, em \u00faltima an\u00e1lise, minam toda a sua estrat\u00e9gia online.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-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 Redimensionar uma Imagem em CSS e 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 Redimensionar uma Imagem em CSS e HTML","description":"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, transmitem emo\u00e7\u00f5es e estabelecem o tom para toda a sua presen\u00e7a online. Contudo, visuais deslumbrantes v\u00eam com uma advert\u00eancia: imagens n\u00e3o otimizadas podem prejudicar seriamente a velocidade do seu website. Websites lentos frustram os visitantes, prejudicam suas classifica\u00e7\u00f5es nos mecanismos de busca e, em \u00faltima an\u00e1lise, minam toda a sua estrat\u00e9gia online.","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-redimensionar-uma-imagem-em-css-e-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Como Redimensionar uma Imagem em CSS e HTML","og_description":"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, transmitem emo\u00e7\u00f5es e estabelecem o tom para toda a sua presen\u00e7a online. Contudo, visuais deslumbrantes v\u00eam com uma advert\u00eancia: imagens n\u00e3o otimizadas podem prejudicar seriamente a velocidade do seu website. Websites lentos frustram os visitantes, prejudicam suas classifica\u00e7\u00f5es nos mecanismos de busca e, em \u00faltima an\u00e1lise, minam toda a sua estrat\u00e9gia online.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:20:27+00:00","article_modified_time":"2025-11-18T23:33:02+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.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":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Como Redimensionar uma Imagem em CSS e HTML","datePublished":"2025-03-03T06:20:27+00:00","dateModified":"2025-11-18T23:33:02+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/"},"wordCount":3274,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","articleSection":["Recursos"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/","url":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/","name":"Como Redimensionar uma Imagem em CSS e HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","datePublished":"2025-03-03T06:20:27+00:00","dateModified":"2025-11-18T23:33:02+00:00","description":"As imagens s\u00e3o a ess\u00eancia vital dos websites modernos. Elas capturam a aten\u00e7\u00e3o, transmitem emo\u00e7\u00f5es e estabelecem o tom para toda a sua presen\u00e7a online. Contudo, visuais deslumbrantes v\u00eam com uma advert\u00eancia: imagens n\u00e3o otimizadas podem prejudicar seriamente a velocidade do seu website. Websites lentos frustram os visitantes, prejudicam suas classifica\u00e7\u00f5es nos mecanismos de busca e, em \u00faltima an\u00e1lise, minam toda a sua estrat\u00e9gia online.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-html\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-redimensionar-uma-imagem-em-css-e-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 Redimensionar uma Imagem em CSS e 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\/123647","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=123647"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123647\/revisions"}],"predecessor-version":[{"id":143951,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123647\/revisions\/143951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/123648"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=123647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=123647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=123647"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=123647"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=123647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}