--- title: "Suporte a tela retina no WordPress em 5 passos essenciais" description: "O suporte a tela retina no WordPress entrega imagens nítidas em displays de alta densidade, onde cada pixel CSS ocupa dois ou mais pixels físicos." url: https://full.services/suporte-tela-retina-wordpress/ date: 2026-06-27 author: "Clayton Margiotti" --- # Suporte a tela retina no WordPress em 5 passos essenciais O **suporte a tela retina no WordPress** nasce do atributo srcset, que entrega a imagem certa para cada densidade de pixel. Segundo a [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) (2026), o descritor 2x serve a imagem quando a densidade é o dobro da padrão de 72 a 96 DPI. O ganho de nitidez exige arquivos com o dobro de pixels. Comece pelo logo e pelas imagens do conteudo. O suporte a tela retina no WordPress entrega imagens nítidas em displays de alta densidade, onde cada pixel CSS ocupa dois ou mais pixels físicos. Nesses monitores, uma imagem feita para 96 DPI aparece borrada porque o navegador estica os pixels para preencher a tela. A solução é servir uma versão com o dobro de resolução quando o aparelho pede. Desde a versão 4.4, o próprio WordPress já faz parte desse trabalho com o atributo srcset nas imagens do conteúdo, mas o logo, os ícones e os fundos de tema ainda dependem de ajuste manual. Este guia mostra onde o automático cobre, onde ele falha e como fechar a lacuna no seu [tema WordPress](https://full.services/temas-wordpress/). --- ## Como o WordPress trata a tela retina de forma nativa O suporte a tela retina no WordPress começa com o atributo srcset, presente nativamente desde a versão 4.4, lançada em . Quando você sobe uma imagem, o WordPress gera versões em vários tamanhos e lista todas no srcset; o navegador escolhe a mais adequada pela largura da tela e pela densidade de pixel. O problema é que nem todo elemento visual passa por esse fluxo automático. A tabela abaixo separa o que o WordPress cobre sozinho do que exige trabalho manual. O logo via custom_logo do Customizer ganhou srcset próprio na versão 4.5; já o logo colocado por CSS background-image fica de fora e precisa de media query com image-set para ficar nítido.
Tela retina no WordPress: o que é automático e o que é manual
Elemento visual Cobertura nativa Acao necessaria
Imagem no conteudo srcset automático desde 4.4 Subir arquivo grande (1600px+)
Logo do Customizer srcset desde a versão 4.5 Enviar logo com o dobro de pixels
Logo via CSS de tema Sem cobertura nativa Media query com image-set @2x
Ícones e ilustracoes Parcial (depende do tema) Migrar para SVG quando possível
--- ## Passo a passo: Ative o suporte a tela retina no WordPress Ativar o suporte a tela retina no WordPress segue cinco etapas que vão do diagnóstico ao teste final. Em , a maior parte dos sites que chegaram ao suporte da FULL com queixa de imagem borrada tinha o srcset nativo intacto, mas usava arquivos pequenos demais. O fluxo abaixo corrige a raiz e nenhum passo exige editar código do núcleo. ### Passo 1: Confirme a densidade de pixel da tela alvo Identifique o devicePixelRatio dos aparelhos do seu publico antes de gerar arquivos pesados. Um MacBook Pro reporta densidade 2, e celulares modernos chegam a 3, segundo a referência da [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). Abra o console do navegador e digite window.devicePixelRatio: o valor 1 indica tela comum, e 2 ou mais indica tela retina. Esse número define o multiplicador dos seus arquivos: densidade 2 pede o dobro de pixels, densidade 3 pede o triplo. ### Passo 2: Suba imagens com o dobro de pixels Envie cada imagem do conteudo com pelo menos o dobro da largura de exibição para alimentar o srcset. Se o seu container tem 800px de largura, o arquivo precisa de 1600px para cobrir densidade 2. O WordPress recorta os tamanhos intermediarios sozinho, mas não inventa pixels que o original não tem. Por isso uma imagem subida em 800px sempre sai borrada na tela retina, mesmo com srcset ativo. A regra prática é simples: largura de exibição vezes dois, no mínimo, antes de subir. ### Passo 3: Gere a versão @2x do logo Exporte o logo em duas resoluções e deixe o WordPress ou o tema escolher a certa por densidade. Se você usa o logo do Customizer, basta enviar o arquivo com o dobro de pixels e limitar a largura de exibição no CSS; o srcset cuida do resto desde a versão 4.5. Para logos colocados via CSS, use a regra image-set com os arquivos logo.png e logo@2x.png. Para logos vetoriais, a melhor saída é o SVG, que é nítido em qualquer densidade sem arquivo extra. ### Passo 4: Valide o srcset no código-fonte Inspecione o HTML gerado para confirmar que o atributo srcset está presente nas imagens. Clique com o botao direito sobre a imagem, escolha "Inspecionar" e procure por srcset no elemento img: você deve ver varios arquivos com descritores de largura, como 800w e 1600w. Se o srcset sumiu, um plugin de otimização agressivo pode ter removido o atributo. O WordPress não adiciona nem modifica srcset quando o HTML ja traz a tag pronta, entao temas e page builders que escrevem o img na mao precisam de atencao redobrada. ### Passo 5: Teste em uma tela retina real Abra o site em um aparelho de alta densidade e compare a nitidez com a tela comum. Emuladores do navegador ajudam, mas só o display físico revela o aliasing que escapa no monitor de 96 DPI. Use o modo responsivo do DevTools com o DPR forcado em 2 para uma checagem rápida e, depois, confirme no celular. Esse teste final pega o erro mais comum: o logo via background-image, que parece certo no desktop comum e borra na tela retina do visitante. --- ## Plugins de tela retina: Quando o automático não basta Plugins de tela retina como o WP Retina 2x existem para cobrir o que o srcset nativo deixa de fora, principalmente imagens servidas por temas antigos que escrevem a tag img sem o atributo. Ele gera as versões @2x da biblioteca e as entrega por srcset ou por JavaScript, conforme o navegador detecta densidade 2 ou 3. O WP Retina 2x faz sentido em sites legados, com temas que omitem o srcset, ou em galerias que escapam do fluxo padrão do WordPress. Em temas modernos como Astra ou no Elementor PRO, boa parte do trabalho ja vem pronta, e o plugin vira redundante. A regra que usamos no suporte da FULL é direta: se o srcset nativo aparece no código-fonte e as imagens ja sobem com 1600px ou mais, um plugin de retina adiciona peso sem ganho real de nitidez. Antes de instalar, confirme se o tema ja resolve o problema sozinho. --- ## Logo nitido na tela retina sem pesar a página O logo é o ponto que mais borra na tela retina porque costuma ser fixo no header e fora do fluxo de srcset. A correção mais leve é migrar o logo para SVG: o formato vetorial fica nítido em qualquer densidade e pesa poucos KB, sem precisar de versão @2x. Quando o SVG não é viável, por exemplo num logo com fotografia, gere a versão @2x e sirva por image-set no CSS, limitando a largura de exibição para o navegador escolher o arquivo certo. Evite trocar o logo por um PNG de 4000px e deixar o CSS encolher: isso obriga todo visitante a baixar megabytes desnecessários e derruba o [desempenho nos Core Web Vitals](https://full.services/core-web-vitals-wordpress/). O equilíbrio certo entre nitidez e peso passa por escolher o [tema WordPress](https://full.services/glossario/tema-wordpress/) e o formato de arquivo com cuidado, não por empilhar pixels. --- ## Peso, performance e o limite do suporte retina Servir imagens @2x dobra o número de pixels e pode quadruplicar o peso do arquivo quando a compressão é descuidada. Uma imagem de 800px que pesava 80 KB chega a 320 KB na versão 1600px sem otimização, e isso atrasa o LCP em conexões móveis abaixo de 4G. A saída é combinar resolução alta com formato eficiente: o [WebP](https://full.services/glossario/webp/) reduz o peso em torno de 25 a 35 por cento ante o JPEG na mesma qualidade, segundo a [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types). Ative também o [lazy loading](https://full.services/glossario/lazy-loading/) nativo, que adia o carregamento de imagens fora da tela, e considere uma [CDN](https://full.services/glossario/cdn/) para distribuir os arquivos pesados sem sobrecarregar o servidor. Em sites com muitas fotos, comprimir antes de subir é o passo que mais protege o LCP. O suporte a tela retina no WordPress só compensa quando a nitidez não custa o tempo de carregamento que o visitante percebe na primeira visita. --- ## Por que escolher a plataforma certa para gerenciar imagens retina Manter logo nítido, srcset intacto e WebP ativo em dezenas de sites vira um trabalho repetitivo que a gente vê consumir horas das agências no suporte da FULL. Centralizar essa rotina num só painel é o que reduz o esforço por site quando o número passa de 5 ou 6 instalações. A plataforma FULL reúne os plugins que cobrem esse fluxo, como Perfmatters para controle de scripts e WP-Optimize para compressão de imagem, dentro do plano PRO por R$849 por ano. Diluído entre os 10 sites que o plano permite, o custo cai para R$85 por site, com licenças oficiais e ativação em um clique. Em vez de comprar e renovar cada licença avulsa, você centraliza otimização de imagem, cache e segurança no mesmo lugar. Conheça os [planos da FULL](https://full.services/planos) e veja qual cobre a sua operação. --- ## Comparativo de métodos para imagens retina nitidas A escolha do método de suporte a tela retina no WordPress depende do tipo de imagem e do estado do tema. Para o conteúdo, o srcset nativo resolve sem custo; para o logo, o SVG vence em quase todos os casos; para sites legados, um plugin dedicado fecha a lacuna. Em , a maior parte dos temas premium já entrega srcset por padrão, frente ao cenário de , quando o ajuste manual era a regra. Essa virada de 6 anos mudou o conselho padrão: hoje se começa pelo nativo e só se recorre a plugin quando o código-fonte prova que o srcset não saiu. A árvore abaixo resume a decisão. ## Perguntas frequentes sobre tela retina no WordPress
Por que o logo fica borrado em telas Retina mesmo com o site otimizado?

Porque o logo costuma ficar fora do fluxo de srcset do WordPress. Imagens do conteudo ganham srcset automático desde a versão 4.4, mas um logo colocado por CSS background-image ou hardcoded no header.php não recebe esse tratamento. O navegador entao estica o arquivo 1x para preencher os pixels da tela retina, gerando o aspecto borrado. A correção é usar SVG ou servir uma versão @2x por image-set.

E possível ter suporte a tela retina no WordPress sem instalar plugin?

Sim, na maioria dos casos. O WordPress ja entrega srcset nativo nas imagens do conteudo desde a versão 4.4, e basta subir arquivos com o dobro da largura de exibição para que telas retina recebam a versão nitida. O logo do Customizer também ganha srcset desde a versão 4.5. Plugins só entram em cena com temas antigos que escrevem a tag img sem srcset ou em galerias que fogem do fluxo padrão.

Qual a diferenca entre o srcset nativo e o plugin WP Retina 2x?

O srcset nativo do WordPress lista varios tamanhos da mesma imagem e deixa o navegador escolher pela densidade da tela, sem dependencia externa. O WP Retina 2x gera versões @2x dedicadas e as entrega por srcset ou JavaScript, útil quando o tema não produz srcset sozinho. Para temas modernos como Astra, o nativo basta; para temas legados, o plugin cobre a lacuna. Usar os dois ao mesmo tempo adiciona peso sem ganho.

Quanto pesa a mais uma imagem @2x no carregamento da página?

Uma imagem @2x tem quatro vezes mais pixels que a versão 1x, o que pode quadruplicar o peso sem otimização. Um arquivo de 80 KB em 800px chega fácil a 320 KB em 1600px. Por isso vale combinar resolução alta com WebP, que corta entre 25 e 35 por cento do peso ante o JPEG, e com lazy loading. Assim a nitidez na tela retina não custa o tempo de carregamento da página.

O que é densidade de pixel e como ela afeta a nitidez no WordPress?

Densidade de pixel, ou devicePixelRatio, e a razão entre pixels físicos e pixels CSS de uma tela. Um display comum tem densidade 1, e telas retina tem 2 ou 3, ou seja, dois a tres pixels físicos para cada pixel CSS. Quando a imagem não tem pixels suficientes para essa densidade, o navegador a estica e ela perde nitidez. O suporte a tela retina no WordPress existe para servir a versão com pixels bastante para cada densidade.

--- ## Próximos passos para deixar suas imagens nitidas Imagens nitidas em tela retina dependem menos de plugin e mais de processo: subir arquivos grandes, manter o srcset intacto e tratar logo e ícones com SVG sempre que possível. Comece auditando o código-fonte de uma página sua para ver se o srcset aparece, depois cuide do logo, que e o ponto que mais borra. Para aprofundar a parte de arquivos, vale conferir o guia de [redimensionar imagens sem perder qualidade](https://full.services/redimensionar-aumentar-imagens-sem-perder-qualidade/) e o material sobre [qual formato de imagem usar no WordPress](https://full.services/qual-tipo-de-arquivo-de-imagem-usar-para-wordpress/). Quem trabalha com page builder encontra ajustes finos no [guia para dominar o Elementor](https://full.services/guias/domine-o-elementor), e o tema da velocidade aparece em [como diminuir o tempo de carregamento da página](https://full.services/diminuir-o-tempo-de-carregamento-da-pagina-wordpress/). Para continuar aprendendo WordPress, o FULL Academy reune tutoriais, guias e reviews em um só lugar.

Legenda: a versão @2x do logo elimina o aspecto borrado que aparece em displays de alta densidade.

--- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/suporte-tela-retina-wordpress/#article", "headline": "Suporte a tela retina no WordPress em 5 passos essenciais", "description": "O suporte a tela retina no WordPress entrega imagens nítidas em displays de alta densidade, onde cada pixel CSS ocupa dois ou mais pixels físicos.", "url": "https://full.services/suporte-tela-retina-wordpress/", "datePublished": "2026-06-27T09:00:00-03:00", "dateModified": "2026-06-27T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Temas WordPress", "keywords": [ "suporte a tela retina no wordpress", "WordPress Themes", "Web Design", "WordPress Templates" ], "author": { "@id": "https://full.services/#person-clayton" }, "publisher": { "@id": "https://full.services/#org" }, "about": [ { "@type": "Thing", "name": "WordPress Themes" }, { "@type": "Thing", "name": "Web Design" }, { "@type": "Thing", "name": "WordPress Templates" } ], "mentions": [ { "@type": "Organization", "name": "WordPress", "url": "https://wordpress.org/", "@id": "https://www.wikidata.org/wiki/Q13166", "sameAs": "https://www.wikidata.org/wiki/Q13166" } ], "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/suporte-tela-retina-wordpress/" }, "wordCount": 2564, "citation": [ { "@type": "CreativeWork", "name": "Mozilla Observatory", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img", "publisher": { "@type": "Organization", "name": "Mozilla Observatory" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/suporte-tela-retina-wordpress/#faq", "isPartOf": { "@id": "https://full.services/suporte-tela-retina-wordpress/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/suporte-tela-retina-wordpress/#faq-q1", "name": "Por que o logo fica borrado em telas Retina mesmo com o site otimizado?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Porque o logo costuma ficar fora do fluxo de srcset do WordPress. Imagens do conteudo ganham srcset automático desde a versão 4.4, mas um logo colocado por CSS background-image ou hardcoded no header.php não recebe esse tratamento. O navegador entao estica o arquivo 1x para preencher os pixels da tela retina, gerando o aspecto borrado. A correção é usar SVG ou servir uma versão @2x por image-set.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/suporte-tela-retina-wordpress/#faq-q2", "name": "E possível ter suporte a tela retina no WordPress sem instalar plugin?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim, na maioria dos casos. O WordPress ja entrega srcset nativo nas imagens do conteudo desde a versão 4.4, e basta subir arquivos com o dobro da largura de exibição para que telas retina recebam a versão nitida. O logo do Customizer também ganha srcset desde a versão 4.5. Plugins só entram em cena com temas antigos que escrevem a tag img sem srcset ou em galerias que fogem do fluxo padrão.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/suporte-tela-retina-wordpress/#faq-q3", "name": "Qual a diferenca entre o srcset nativo e o plugin WP Retina 2x?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "O srcset nativo do WordPress lista varios tamanhos da mesma imagem e deixa o navegador escolher pela densidade da tela, sem dependencia externa. O WP Retina 2x gera versões @2x dedicadas e as entrega por srcset ou JavaScript, útil quando o tema não produz srcset sozinho. Para temas modernos como Astra, o nativo basta; para temas legados, o plugin cobre a lacuna. Usar os dois ao mesmo tempo adiciona peso sem ganho.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/suporte-tela-retina-wordpress/#faq-q4", "name": "Quanto pesa a mais uma imagem @2x no carregamento da página?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Uma imagem @2x tem quatro vezes mais pixels que a versão 1x, o que pode quadruplicar o peso sem otimização. Um arquivo de 80 KB em 800px chega fácil a 320 KB em 1600px. Por isso vale combinar resolução alta com WebP, que corta entre 25 e 35 por cento do peso ante o JPEG, e com lazy loading. Assim a nitidez na tela retina não custa o tempo de carregamento da página.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/suporte-tela-retina-wordpress/#faq-q5", "name": "O que é densidade de pixel e como ela afeta a nitidez no WordPress?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Densidade de pixel, ou devicePixelRatio, e a razão entre pixels físicos e pixels CSS de uma tela. Um display comum tem densidade 1, e telas retina tem 2 ou 3, ou seja, dois a tres pixels físicos para cada pixel CSS. Quando a imagem não tem pixels suficientes para essa densidade, o navegador a estica e ela perde nitidez. O suporte a tela retina no WordPress existe para servir a versão com pixels bastante para cada densidade.", "author": { "@id": "https://full.services/#org" } } } ] }, { "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://full.services/" }, { "@type": "ListItem", "position": 2, "name": "Temas WordPress", "item": "https://full.services/temas-wordpress/" }, { "@type": "ListItem", "position": 3, "name": "Suporte a tela retina no WordPress em 5 passos essenciais", "item": "https://full.services/suporte-tela-retina-wordpress/" } ] }, { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services", "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023 (https://thewpweekly.com/awards-2023/)", "Gold Medal - The WP Weekly Awards 2024 (https://thewpweekly.com/awards-2024/)" ], "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Certificação válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "Person", "@id": "https://full.services/#person-clayton", "name": "Clayton Margiotti", "givenName": "Clayton", "familyName": "Margiotti", "jobTitle": "Fundador e CEO da FULL Services", "description": "Fundador e CEO da FULL Services, plataforma WordPress SaaS com 50 mil clientes e 150 mil sites conectados, e anchor do ecossistema Elevor Global. Em 2024 conduziu a FULL a se tornar a primeira e unica empresa brasileira aprovada como CVE Numbering Authority sob a CISA (DHS/EUA). Mais de 20 anos construindo empresas digitais, com 13+ reconhecimentos internacionais (Facebook, GPTW, ONU, RD Summit).", "url": "https://full.services/sobre-nos/", "image": "https://full.services/wp-content/uploads/2026/05/clayton-margiotti.jpg", "sameAs": [ "https://www.linkedin.com/in/cmargiotti/" ], "knowsAbout": [ "Artificial Intelligence", "Cybersecurity", "CVE Program", "WordPress Enterprise", "SaaS Platforms", "Digital Infrastructure", "Technology Entrepreneurship", "Company Building", "Business Leadership", "Digital Growth" ], "hasOccupation": { "@type": "Occupation", "name": "Fundador e CEO", "occupationalCategory": "11-1011.00" }, "knowsLanguage": [ { "@type": "Language", "name": "Portuguese", "alternateName": "pt-BR" }, { "@type": "Language", "name": "English", "alternateName": "en" } ], "memberOf": { "@type": "Organization", "name": "CVE Numbering Authorities", "url": "https://www.cve.org/", "sameAs": "https://www.cve.org/" }, "alumniOf": [ { "@type": "EducationalOrganization", "name": "Global Scaling Academy (Blitzscaling Program)", "url": "https://www.blitzscalingacademy.com" }, { "@type": "EducationalOrganization", "name": "Esade", "url": "https://www.esade.edu" }, { "@type": "EducationalOrganization", "name": "Business School Sao Paulo (BSP)", "url": "https://bsp.edu.br/" }, { "@type": "EducationalOrganization", "name": "Tera", "url": "https://somostera.com" }, { "@type": "EducationalOrganization", "name": "Le Wagon", "url": "https://www.lewagon.com" }, { "@type": "EducationalOrganization", "name": "FIAP", "url": "https://www.fiap.com.br" }, { "@type": "EducationalOrganization", "name": "PUCRS", "url": "https://online.pucrs.br/" } ], "award": [ "Digital Disruptor – Engaging Experiences Master (Globant, 2021)", "Maior ROI do e-commerce brasileiro – Letrissimas (Facebook, 2019)", "1º lugar – Melhores Empresas para Trabalhar no Brasil – Eleva Digital (Great Place to Work, 2018)", "Case global de educacao no Facebook – Metodo SUPERA (Facebook, 2017)", "Maquina de Geracao de Leads, Agencia do Ano (RD Summit / RD Station, 2015)", "Monthly Recurring Revenue, top performance (RD Summit / RD Station, 2015)", "Quality/Efficiency – Entrepreneurship Training (UNCTAD / PNUD-ONU, 2010)" ], "subjectOf": [ { "@type": "NewsArticle", "url": "https://www.globant.com/news/globant-reveals-inaugural-digital-disruptors-award-winners", "publisher": { "@type": "Organization", "name": "Globant" } }, { "@type": "NewsArticle", "url": "https://www.prnewswire.com/news-releases/letrissimas-com-e-destaque-do-e-commerce-brasileiro-com-maior-roi-de-2018-877517801.html", "publisher": { "@type": "Organization", "name": "PR Newswire" } }, { "@type": "NewsArticle", "url": "https://www.segs.com.br/seguros/102599-gestao-de-pessoas-garante-mais-lucro-as-empresas", "publisher": { "@type": "Organization", "name": "Segs" } }, { "@type": "NewsArticle", "url": "https://franquiaeducacional.com/negocios-inovadores-facebook-elege-supera-case-mundial-de-educacao", "publisher": { "@type": "Organization", "name": "Franquia Educacional" } }, { "@type": "NewsArticle", "url": "https://acontecendoaqui.com.br/marketing/resultados-digitais-divulga-vencedores-do-premio-agencias-de-resultados-2015-durante-o-rd", "publisher": { "@type": "Organization", "name": "Acontecendo Aqui" } } ], "worksFor": { "@type": "Organization", "@id": "https://full.services/#org" } }, { "@type": "HowTo", "@id": "https://full.services/suporte-tela-retina-wordpress/#howto", "isPartOf": { "@id": "https://full.services/suporte-tela-retina-wordpress/#article" }, "name": "Passo a passo: suporte a tela retina no wordpress", "description": "Guia passo a passo sobre suporte a tela retina no wordpress para WordPress.", "url": "https://full.services/suporte-tela-retina-wordpress/", "totalTime": "PT30M", "author": { "@type": "Organization", "@id": "https://full.services/#org" }, "step": [ { "@type": "HowToStep", "position": 1, "name": "Passo 1: Confirme a densidade de pixel da tela alvo", "text": "Identifique o devicePixelRatio dos aparelhos do seu publico antes de gerar arquivos pesados. Um MacBook Pro reporta densidade 2, e celulares modernos chegam a 3, segundo a referência da MDN Web Docs. Abra o console do navegador e digite window.devicePixelRatio: o valor 1 indica tela comum, e 2 ou mais indica tela retina. Esse número define o multiplicador dos seus arquivos: densidade 2 pede o dobro de pixels, densidade 3 pede o triplo." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Suba imagens com o dobro de pixels", "text": "Envie cada imagem do conteudo com pelo menos o dobro da largura de exibição para alimentar o srcset. Se o seu container tem 800px de largura, o arquivo precisa de 1600px para cobrir densidade 2. O WordPress recorta os tamanhos intermediarios sozinho, mas não inventa pixels que o original não tem. Por isso uma imagem subida em 800px sempre sai borrada na tela retina, mesmo com srcset ativo. A regra prática é simples: largura de exibição vezes dois, no mínimo, antes de subir." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Gere a versão @2x do logo", "text": "Exporte o logo em duas resoluções e deixe o WordPress ou o tema escolher a certa por densidade. Se você usa o logo do Customizer, basta enviar o arquivo com o dobro de pixels e limitar a largura de exibição no CSS; o srcset cuida do resto desde a versão 4.5. Para logos colocados via CSS, use a regra image-set com os arquivos logo.png e logo@2x.png. Para logos vetoriais, a melhor saída é o SVG, que é nítido em qualquer densidade sem arquivo extra." }, { "@type": "HowToStep", "position": 4, "name": "Passo 4: Valide o srcset no código-fonte", "text": "Inspecione o HTML gerado para confirmar que o atributo srcset está presente nas imagens. Clique com o botao direito sobre a imagem, escolha "Inspecionar" e procure por srcset no elemento img: você deve ver varios arquivos com descritores de largura, como 800w e 1600w. Se o srcset sumiu, um plugin de otimização agressivo pode ter removido o atributo. O WordPress não adiciona nem modifica srcset quando o HTML ja traz a tag pronta, entao temas e page builders que escrevem o img na mao precisam de atencao redobrada." }, { "@type": "HowToStep", "position": 5, "name": "Passo 5: Teste em uma tela retina real", "text": "Abra o site em um aparelho de alta densidade e compare a nitidez com a tela comum. Emuladores do navegador ajudam, mas só o display físico revela o aliasing que escapa no monitor de 96 DPI. Use o modo responsivo do DevTools com o DPR forcado em 2 para uma checagem rápida e, depois, confirme no celular. Esse teste final pega o erro mais comum: o logo via background-image, que parece certo no desktop comum e borra na tela retina do visitante. --- Plugins de tela retina como o WP Retina 2x existem para cobrir o que o srcset nativo deixa de fora, principalmente imagens servidas por temas antigos que escrevem a tag img sem o atributo. Ele gera as versões @2x da biblioteca e as entrega por srcset ou por JavaScript, conforme o navegador detecta densidade 2 ou 3. O WP Retina 2x faz sentido em sites legados, com temas que omitem o srcset, ou em galerias que escapam do fluxo padrão do WordPress. Em temas modernos como Astra ou no Elementor PRO, boa parte do trabalho ja vem pronta, e o plugin vira redundante. A regra que usamos no suporte da FULL é direta: se o srcset nativo aparece no código-fonte e as imagens ja sobem com 1600px ou mais, um plugin de retina adiciona peso sem ganho real de" } ] } ] } ```