{"id":227213,"date":"2022-09-14T11:23:00","date_gmt":"2022-09-14T08:23:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227213"},"modified":"2022-11-08T19:34:42","modified_gmt":"2022-11-08T16:34:42","slug":"como-servir-imagens-em-escala-no-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-servir-imagens-em-escala-no-wordpress\/","title":{"rendered":"Como servir imagens em escala no WordPress"},"content":{"rendered":"\n

\u00c9 \u00f3bvio que as fotos s\u00e3o parte integrante de nossas vidas. Consequentemente, dificilmente podemos imaginar um site sem fotos. As imagens atraem<\/strong> a vis\u00e3o dos visitantes e ajudam a organizar o conte\u00fado do site. As imagens tornam uma p\u00e1gina interessante, rica em informa\u00e7\u00f5es e melhoram a experi\u00eancia do usu\u00e1rio.<\/p>\n

Imagens superdimensionadas t\u00eam um efeito negativo no desempenho de um site<\/strong> e as imagens devem ser dimensionadas de acordo com o tema ativo. S\u00e3o elementos importantes em um site e merecem ser mostrados da melhor forma poss\u00edvel. \u00c9 muito importante veicular imagens em escala em um site WordPress.<\/p>\n

Os tamanhos das imagens dimensionadas se ajustam ao tamanho certo de acordo com os definidos em HTML e CSS. No entanto, poucos webmasters prestam aten\u00e7\u00e3o a esse importante detalhe de design. Veja o exemplo de uma imagem com 500 x 500 pixels para uma miniatura de 50 x 50. O navegador da web precisa baixar a imagem e reduzi-la para que possa ser exibida ao visitante. Claramente, isso \u00e9 ineficiente e tornar\u00e1 o site mais lento<\/strong>.<\/p>\n

A diferen\u00e7a de resolu\u00e7\u00e3o n\u00e3o \u00e9 vis\u00edvel e, portanto, o peso que as imagens grandes trazem muitas vezes passa despercebido. A maioria das pessoas nem sabe que esse exagero de resolu\u00e7\u00e3o est\u00e1 causando problemas e o problema n\u00e3o \u00e9 corrigido. Eles deixam o problema para o navegador lidar.<\/p>\n

Por que servir imagens em escala em um site WordPress<\/h2>\n

\"Como<\/a><\/p>\n

O principal motivo para veicular imagens em escala \u00e9 que as imagens completas de alta resolu\u00e7\u00e3o tornam o site mais lento<\/strong> e aumentam o tempo de carregamento<\/strong>. Uma p\u00e1gina lenta leva a uma experi\u00eancia ruim do usu\u00e1rio<\/strong> e, em vez de ficar e retornar, eles saem e ficam longe. As estat\u00edsticas da Kissmetrics mostram que as p\u00e1ginas que levam mais de tr\u00eas segundos para carregar ter\u00e3o uma taxa de rejei\u00e7\u00e3o mais alta<\/strong>.<\/p>\n

Com os tamanhos de imagem otimizados em um site, os tempos de carregamento ser\u00e3o menores<\/strong>. \u00c9 mais prov\u00e1vel que as pessoas fiquem mais tempo<\/strong> no site e retornem<\/strong> mais tarde. Isso melhora o SEO<\/strong> e o ranking do site vai subir<\/strong>.<\/p>\n

Imagens grandes causam problemas diferentes<\/h3>\n
    \n
  1. Aumenta o estresse no desempenho do navegador<\/strong>. O navegador ter\u00e1 que realizar solicita\u00e7\u00f5es extras ao servidor. Ele n\u00e3o pode mostrar a imagem rapidamente, mas levar\u00e1 tempo e recursos para redimensionar a imagem. Sites com imagens pesadas demoram mais para carregar.<\/li>\n
  2. Se imagens grandes de alta resolu\u00e7\u00e3o forem exibidas pequenas em um site, elas desperdi\u00e7ar\u00e3o tempo e baixar\u00e3o dados<\/strong>. \u00c9 o caso, por exemplo, quando uma selfie de um celular \u00e9 usada sem processamento para um min\u00fasculo Gravatar.<\/li>\n<\/ol>\n

    Como dimensionar imagens em sites WordPress<\/h2>\n

    Manualmente<\/h3>\n

    \"Como<\/a><\/p>\n

    Para come\u00e7ar, analise as imagens<\/strong> do site usando uma ferramenta como GTMetrix. GTMetrix \u00e9 uma ferramenta de an\u00e1lise de desempenho, projetada por GT.net. Esta empresa \u00e9 famosa por monitoramento e otimiza\u00e7\u00e3o de velocidade e Pingdom. Depois que a GTMetrics analisa o site, ela gera um relat\u00f3rio. Isso mostra quais problemas<\/strong> foram encontrados e quais melhorias<\/strong> s\u00e3o recomendadas.<\/p>\n

    Ao revisar o relat\u00f3rio, preste aten\u00e7\u00e3o especial \u00e0 guia Estrutura<\/strong>. Nesta guia, clique em Imagens de tamanho adequado. Ele mostrar\u00e1 uma lista de imagens que n\u00e3o est\u00e3o dimensionadas corretamente.<\/p>\n

    O WordPress n\u00e3o reduz automaticamente as imagens quando poss\u00edvel, mas as adiciona ao site sem processamento. Para resolver este problema existem duas op\u00e7\u00f5es.<\/p>\n

    Mesmo que o uso de plugins n\u00e3o seja a forma desejada, existem outras op\u00e7\u00f5es. A primeira maneira de dimensionar imagens \u00e9 ajustar manualmente o tamanho de cada uma usando um editor de fotos, como o Photoshop<\/strong>. Pode parecer que este m\u00e9todo \u00e9 ineficiente, mas na realidade, n\u00e3o \u00e9.<\/p>\n

    \"Como<\/a><\/p>\n

    No Photoshop h\u00e1 mais op\u00e7\u00f5es al\u00e9m de ajustar a altura e a largura<\/strong> da imagem. Outra coisa a verificar aqui \u00e9 a resolu\u00e7\u00e3o<\/strong> da imagem. Na maioria das vezes, para aplicativos da web, 72 PPI \u00e9 suficiente para uma boa experi\u00eancia de visualiza\u00e7\u00e3o.<\/p>\n

    A segunda \u00e9 usar um plugin<\/strong> para dimensionar imagens. Esta op\u00e7\u00e3o \u00e9 f\u00e1cil e r\u00e1pida. O WordPress tem seu pr\u00f3prio recurso para fazer isso, srcset<\/strong>. Essa ferramenta pode converter gr\u00e1ficos, como imagens, em arquivos responsivos<\/strong>. As imagens responsivas s\u00e3o ajustadas automaticamente para diferentes dispositivos e tamanhos de tela. Abaixo est\u00e3o alguns outros plugins que fazem um \u00f3timo trabalho ao reduzir o tamanho das imagens.<\/p>\n

    Optimole<\/h3>\n

    \"Como<\/a><\/p>\n

    Uma excelente ferramenta para servir imagens em escala \u00e9 o Optimole<\/strong>. \u00c9 um plugin do WordPress que \u00e9 capaz de redimensionar imagens para diferentes dispositivos. Ele \u00e9 redimensionado automaticamente para o tamanho ideal de uma imagem, com base nos diferentes tipos de dispositivos. Os resultados s\u00e3o imagens em escala de alta qualidade<\/strong>.<\/p>\n

    Estas s\u00e3o algumas das caracter\u00edsticas que fazem do Optimole uma escolha interessante:<\/p>\n