Como garantir o melhor tamanho de imagem para a velocidade do site para celular

Você está no seu telefone, pronto para comprar o produto que está de olho, e o site apenas…. Carregos. De repente, você está tocando impacientemente, imaginando se sua internet está quebrada ou o site é amaldiçoado. E sejamos honestos, você provavelmente apenas salte. Você não está sozinho.

Você sabia que 53% dos usuários móveis abandonarão uma página se levar mais de 3 segundos para carregar? Agora pense nisso sobre seu site. É uma grande parte dos clientes em potencial que desaparecem, para nunca mais voltar. Os tempos de carregamento lento não são apenas frustrantes para os visitantes; Eles machucaram seu resultado final. Eles afetam o ranking de seus mecanismos de pesquisa (SERPs) e tornam mais difícil para as pessoas encontrá -lo em primeiro lugar. Nesta postagem, mostraremos como controlar essas páginas pesadas de imagem e garantir o melhor tamanho da imagem para a velocidade do site para celular. Também apresentaremos algumas boas ferramentas, como o Divi, que ajudam a mostrar suas imagens de forma responsável.

Por que a velocidade móvel é importante?

O impacto de um site lento é mais do que ser irritante. Isso pode afetar a experiência do usuário (UX), o Otimização do mecanismo de pesquisa (SEO) e o seu resultado final.

Imagine que você está navegando para um novo vestido de verão ou para os novos fones de ouvido mais quentes. Você toca em um site e parece que está assistindo a tinta seca. A frustração se instala, e você provavelmente vai encontrar outro varejista com um site mais rápido. Isso é chamado de salto, e são más notícias para empresas on -line. De acordo com o Databox, a taxa média de salto é de cerca de 44%. Qualquer coisa mais alta do que isso pode levar a receita perdida e falta de engajamento, matando um negócio on -line.

Não vamos esquecer o SEO móvel. O Google trata de fornecer a melhor experiência possível do usuário, incluindo priorizar sites móveis de carregamento rápido. Eles usam a indexação móvel primeiro, o que significa que eles examinam principalmente a versão móvel do seu site ao determinar suas classificações de pesquisa.

No entanto, o impacto da baixa velocidade móvel vai além de usuários frustrados e classificações mais baixas. Pode e vai atingir seu resultado final. Imagine um site de comércio eletrônico de carregamento lento criado com o WordPress. Esses segundos extras (mais de 1-2 são muito longos) podem custar vendas. Manter seu site funcionando rapidamente em dispositivos móveis é imperativo para a receita, portanto, garantir que você não perca os clientes porque seu site está demorando muito para carregar é crucial.

Existem muitas maneiras de acelerar o seu site, mas a fruta baixa está determinando o melhor tamanho de imagem para a velocidade do site para celular.

Otimização de imagens básicas para WordPress

As imagens são cruciais para fazer seu site parecer bom e manter os usuários envolvidos. Imagens muito grandes podem realmente diminuir seu site. Como aprendemos, estudos mostram que a maioria das pessoas não vai esperar para sempre. Então, como você pode manter as imagens parecendo ótimas sem sacrificar a velocidade? Vamos explorar alguns princípios básicos para manter seu site funcionando rápido e sem problemas.

1. Escolha o formato de imagem certo

Você pode usar vários tipos de imagem no site do WordPress, incluindo JPG, PNG e Webp. Qual é o melhor para usar? Vamos nos aprofundar em cada tipo de imagem e quais situações são melhores para usá -las.

• JPG: Estas são como suas fotos diárias. Eles são ótimos para imagens com ampla variação de cores e transições suaves, como paisagens ou retratos. Eles são bons para a maioria das situações, como antecedentes de heróis, fotos de equipe, postagem de blog em destaques, etc. Dito isso, os JPGs podem ser dimensionados de maneira inadequada, aumentando -os em tamanho de arquivo.
• PNG: os PNGs são perfeitos para imagens com bordas nítidas, como logotipos ou gráficos com texto. Eles também são ótimos para imagens com imagens grandes de cor sólida porque mantêm as cores nítidas e limpas. No entanto, os PNGs tendem a ter um tamanho de arquivo maior; portanto, use arquivos PNG para áreas menores do seu design para reduzir o tamanho deles.
• Webp: A ideia, o WebP do Google, geralmente oferece as melhores compressões, resultando em um tamanho de arquivo muito menor, mesmo ao usar imagens grandes (exemplo: 1920px x 1080px). A qualidade da imagem não é tão boa quanto o JPG, mas a diferença de tamanho entre os dois é significativa.

2. Redimensione as imagens

O tamanho da imagem é importante. Para manter o tamanho baixo, carregue imagens que são tão grandes quanto necessário em seu site. Não há necessidade de fazer upload de uma imagem gigante e depois encolher. Ele cria trabalho extra para você e desacelerará seu site.

É importante lembrar que um tamanho não se encaixa em todas as imagens. Um visitante em um smartphone precisa de uma imagem enorme projetada para uma tela de desktop maior? Eles não. Use imagens responsivas, quando possível, para fornecer uma imagem de tamanho perfeita para cada tamanho de tela. Vamos repassar isso mais tarde, mas uma das melhores maneiras de garantir que suas imagens respondam pelo WordPress é usando um tema WordPress, como o Divi, que permite fazer upload de imagens para cada ponto de interrupção do navegador, mantendo o tamanho do arquivo.

3. Aperte o desnecessário

Quando se trata de tamanho da imagem, menor é melhor. Ao usar imagens no WordPress, queremos tornar as imagens o menor possível sem sacrificar a qualidade. Você pode usar ferramentas de compactação, como plugins de otimização de imagens para fazer o levantamento pesado para você. Ferramentas como o EWWW Image Optimizer são boas, mas vamos nos aprofundar em ferramentas mais tarde nesta postagem.

Muitos plugins do WordPress e ferramentas de redimensionamento de imagens on -line usam compressão com perdas ou sem perdas para reduzir o tamanho das imagens. A compactação sem perdas é como dobrar cuidadosamente um pedaço de papel - você pode desdobrá -lo perfeitamente e obter as costas originais, se necessário. É ótimo para imagens com bordas nítidas, mas nem sempre pode resultar na maior redução do tamanho do arquivo.

Por outro lado, a compressão sem perdas é um pouco mais agressiva. É como amassando o mesmo pedaço de papel. Você pode perder um pouco de detalhe, mas terá um tamanho de arquivo muito menor.

4. Carregue imagens quando estiverem prontos para serem vistos

Outra etapa que você pode dar é a preguiçoso carregar imagens no WordPress. Imagine rolar para baixo em uma longa página. Você realmente precisa carregar todas as fotos de uma só vez? Provavelmente não. O carregamento preguiçoso carrega apenas imagens que você precisa visualizar a página, colocando as mais adiante na página esperando para carregar quando chegar até elas. Os plugins, como o WP Rocket, podem facilmente adicionar carregamento preguiçoso ao seu site do WordPress. Ele acelerará os tempos iniciais de carregamento da página, o que é imperativo para manter seus visitantes felizes e o tamanho da sua página.

Práticas recomendadas da dimensão da imagem

Quando se trata de dimensões da imagem, existem algumas práticas importantes a serem lembradas para garantir que o seu site seja carregado rapidamente e fique ótimo em todos os dispositivos:

Use tamanhos de imagem responsiva

Diferentes dispositivos têm tamanhos e resoluções de tela diferentes; portanto, uma abordagem de tamanho único não funcionará. Por exemplo, uma área de trabalho pode precisar de uma imagem do tamanho de 1920px, enquanto um dispositivo móvel requer apenas 600px de largura. Você pode servir o tamanho certo para cada dispositivo usando imagens responsivas. Ferramentas como o atributo secreto no HTML ou um tema WordPress responsivo podem manter as imagens contidas no DIV para fornecer o tamanho da imagem apropriado com base no dispositivo do usuário.

Aspecto de aspecto é importante

Manter um traidor de aspecto consistente em suas imagens pode ajudar a evitar distorções ou corte estranho. Por exemplo, se a sua imagem de desktop tiver uma proporção de 16: 9, a versão móvel deve manter a mesma proporção, mesmo que seja uma imagem menor. Isso garante que suas imagens pareçam proporcionais e profissionais em todos os tamanhos de tela.

Evite o tamanho excessivo

O upload de imagens maiores do que o necessário é um erro comum que pode desacelerar seu site. Por exemplo, se a área de conteúdo do seu site tiver apenas 1080px de largura, o upload de uma imagem de 2000px de largura for desnecessário. Imagens de grandes dimensões consomem largura de banda e armazenamento, levando a tempos de carregamento de página mais lentos. Sempre redimensione as imagens para corresponder às dimensões máximas exibidas no seu site.

Teste entre dispositivos

Mesmo com as dimensões certas, as imagens podem se comportar de maneira diferente em vários dispositivos e navegadores. Sempre teste suas imagens em vários dispositivos - desktops, tablets e smartphones - para garantir que eles pareçam nítidos e carregados rapidamente. Ferramentas como o teste amigável para dispositivos móveis do Google ou as ferramentas de desenvolvedor do seu navegador podem ajudá-lo a encontrar e corrigir problemas de imagem para todos os tamanhos de tela.

Considere a compressão da imagem

Mesmo com as dimensões corretas, as imagens ainda podem ser muito grandes. As ferramentas de compactação podem reduzir os tamanhos de arquivo sem sacrificar a qualidade. Por exemplo, uma imagem JPG ou Webp de alta qualidade pode ser compactada para carregar mais rápido enquanto ainda está ótima. A combinação de dimensões adequadas com a compactação garante que suas imagens pareçam boas e mantenha o tamanho da sua página mínimo.

Quais são as melhores ferramentas para dimensionar imagens no WordPress?

Existem algumas maneiras de redimensionar facilmente imagens para o WordPress: com um plug-in, recursos internos de um tema premium como o Divi ou com o Divi AI. Vamos explorar isso mais para que você entenda melhor o que eles fazem.

1. Plugins do WordPress

O uso de um plug -in de otimização de imagem é uma das melhores maneiras de redimensionar imagens. Eles normalmente permitem que você execute ações como otimização em massa de imagens ou imagens redimensionadas à medida que são carregadas na galeria de mídia do WordPress. Muitos também oferecem recursos avançados, como conversão WebP, carregamento preguiçoso e vários níveis de compressão de imagem.

• Otimizador de imagem ewww: uma opção robusta com recursos como otimização em massa, otimização de fundo e conversão para formato WebP. O EWWW Image Optimizer oferece um plano gratuito com uso limitado e planos pagos a partir de US $ 8 por mês.
• Shortpixel: conhecido por seus excelentes algoritmos de compressão e capacidade de reduzir significativamente os tamanhos dos arquivos de imagem, mantendo a qualidade. O Shortpixel oferece um plano gratuito com uso limitado e planos mensais a partir de US $ 9,99 mensalmente.
• Optimole: enfatiza a velocidade e o desempenho. Usa um sistema baseado em nuvem para otimização e entrega de imagem. O Optimole oferece um plano gratuito com uso limitado e planos pagos a partir de US $ 22,99 mensalmente.
• WP Smush : uma opção popular e altamente classificada. A Smush oferece planos gratuitos e pagos (a partir de US $ 3 por mês) com recursos como otimização automática, compressão com perdas/sem perdas, carregamento preguiçoso e conversão WebP.
• Imagify: um plug-in movido a IA que se concentra na compressão de alta qualidade com perda mínima. A Imagify fornece um plano gratuito com uso limitado e planos pagos a partir de US $ 11,99 por mês.

2. Divi (tema WordPress e construtor de páginas)

O Divi é mais do que apenas um tema do WordPress - é uma estrutura completa para a criação de sites responsivos. Ele fornece um construtor visual de front-end robusto com controles responsivos que permitem usar o melhor tamanho de imagem para a velocidade do site para celular.

A Divi lida com tamanhos de imagem móvel através de seu sistema de edição responsivo e configurações de design. Quando você adiciona imagens no Divi, você pode definir imagens diferentes para visualizações de desktop, tablet e celular. Isso faz parte dos recursos de design responsivo da Divi, permitindo otimizar as imagens para cada tipo de dispositivo. Você pode ajustar as configurações como tamanho, posição, deslocamento horizontal e muito mais, especificamente para dispositivos móveis, garantindo que suas imagens pareçam perfeitas em todos os tamanhos de tela.

Alterando imagens para telas menores

Em qualquer módulo de design que contenha uma imagem, os controles responsivos da Divi permitem exibir uma imagem de fundo para uma área de trabalho, enquanto uma diferente é mostrada para tablets e dispositivos móveis. Por exemplo, ao editar uma seção de heróis em um site da DIVI, você pode adicionar uma imagem de fundo que mede 1920px x 1080px , que é do tamanho perfeito para telas grandes. Visualizar a mesma imagem em um dispositivo móvel pode não parecer tão bom, dependendo da imagem usada. Portanto, o Divi inclui configurações, permitindo que você adicione uma imagem de fundo menor (ou uma imagem completamente diferente) para telas menores.

Posicionamento de fundo

O Divi também permite controlar como as imagens de fundo estão posicionadas em diferentes tamanhos de tela. Cada módulo, coluna, linha e seção possui esses controles, facilitando a garantia de uma imagem ótima, independentemente do que os visitantes do dispositivo estão usando.

Por exemplo, você pode definir uma imagem de fundo centrada em uma área de trabalho, mas reposicioná -la na parte superior ou inferior em dispositivos móveis. Isso garante que a parte mais importante da imagem seja sempre visível, independentemente do tamanho da tela. Esta é uma ótima maneira de utilizar uma imagem e manter o tamanho da página no mínimo.

Divi tem carregamento preguiçoso embutido

Quando você adiciona imagens ou fundos usando o Divi, o tema cuida do levantamento pesado aplicando automaticamente o carregamento preguiçoso. As imagens não serão carregadas até que o usuário role para essa seção, mantendo sua página rápida e responsiva. O Divi aproveita os atributos HTML suportados pelos navegadores modernos, garantindo que as imagens sejam adiadas com o mínimo de processamento. O resultado são velocidades de página mais rápidas e uma experiência mais suave do usuário. Ao reduzir o número de imagens carregadas antecipadamente, o Divi ajuda a melhorar as principais métricas, como a maior tinta conteúdo (LCP) e aumenta o desempenho do seu principal desempenho na web.

Para saber mais sobre o uso de imagens no Divi, consulte nosso Guia Ultimate para usar imagens no Divi.

Obtenha divi

3. Divi ai

Outra maneira de usar o Divi para garantir que o melhor tamanho da imagem para a velocidade do site do celular seja usando o Divi AI para gerar imagens de tamanho perfeita. O Divi AI é como um assistente de design pessoal para seus sites. Um prompt de texto pode gerar texto, código, páginas da Web, sites completos e fotos perfeitas de pixels.

Por exemplo, você precisa de uma imagem para uma majestosa cordilheira coberta de neve para um negócio de aluguel de snowboard. Você vasculhou sites de imagens de estoque sem royalties, mas não consegue encontrar o que deseja. O Divi AI pode gerar essa imagem para você com o tamanho que você especificar.

E, graças aos controles responsivos da Divi, você também pode usar o Divi AI para gerar imagens para telas menores.

Divi Ai não apenas cria belas imagens. Cria imagens inteligentes . Você pode dizer ao Divi AI exatamente qual o tamanho que você precisa e ele entrega.

Obtenha divi ai

Divi faz de imagens redimensionadas para sites móveis uma brisa

Encontrar o melhor tamanho de imagem para a velocidade do site para celular não precisa ser um desafio. Se você optar por criar sites com o Divi, estará bem equipado para enfrentar imagens de carregamento lento. Os recursos de otimização de imagem internos da Divi, incluindo redimensionamento responsivo e carregamento preguiçoso, trabalhe nos bastidores para garantir que as imagens sejam exibidas perfeitamente para qualquer tamanho de tela. Mas os benefícios do divi não param por aí. Com o Divi AI, você pode gerar imagens de alta qualidade nas dimensões exatas necessárias, eliminando páginas da Web volumosas e de carregamento lento.

Para ainda mais controle, aproveite a potência de plugins como o EWWW Image Optimizer para compactar ainda mais as imagens e ajustar a velocidade do seu site. A combinação dos pontos fortes da Divi com ferramentas poderosas permite criar um site que pareça incrível e carrega rápido, mantendo seus visitantes felizes e seus negócios prosperando.

Você quer aprender mais sobre acelerar seu site? Confira estas postagens do nosso blog:

• Como aumentar o Google PageSpeed ​​Insights Score para WordPress
• 12 melhores plugins de otimização de velocidade do WordPress (classificados)
• Divi Speed ​​Optimization: The Ultimate Guide
• 5 Empresas de hospedagem mais rápidas do WordPress (testado)