tamanhos de imagem Divi para seu site

Divi oferece muitas maneiras de adicionar imagens aos designs de seu site. Divi também tem muitas larguras de coluna para escolher ao projetar seus layouts. Isso pode dificultar o conhecimento dos melhores tamanhos de imagem para seus designs. Cada site é diferente, mas existem algumas diretrizes que podemos seguir. Neste artigo, veremos os melhores tamanhos de imagem Divi para ajudá-lo a criar as melhores imagens para o seu site Divi.

Relações de aspecto da Divi

A compreensão das relações de aspecto ajuda a projetar layouts, usando imagens em vários layouts e movendo imagens de um layout para outro. Por exemplo, ajuda a definir imagens em destaque que funcionam bem tanto na postagem do blog quanto nos módulos do blog para qualquer layout ou tamanho de tela. Isso também ajuda a manter os tamanhos uniformes.

O que é proporção de aspecto?

Uma proporção de aspecto são as proporções da largura e altura de uma imagem ou tela. É expresso pelas proporções da largura e as mesmas proporções da altura separadas por dois pontos, como x: y ou 2: 3. Se 2 representasse 100 pixels, 3 representaria 150 pixels. 100 × 150 tem uma proporção de 2: 3.As relações de aspecto precisam ser escolhidas para a mídia em que são exibidas. Por exemplo, uma imagem projetada para uma tela ampla será diferente de uma imagem projetada para uma tela alta e estreita.

Proporções populares

O exemplo mais popular é 16: 9. Isso expressa 16 de uma unidade de medida vezes 9 da mesma medida. Esta é a proporção da TV de alta definição padrão atual ou monitor de computador e é expressa em pixels. Muitas telas 16 × 9 exibem 1920 × 1080 pixels.

Proporções e tamanhos de Divi

Saber as melhores proporções e tamanhos de imagem para Divi nos ajuda a projetar os melhores layouts possíveis. Divi foi projetado com várias proporções de aspecto em mente, incluindo 16: 9, 4: 3 e 3: 4. Essas são proporções comuns para imagens.

Para Divi, as imagens precisam ser tão largas quanto a coluna em que são colocadas. Além disso, certifique-se de incluir espaço para preenchimento se você planeja ter espaço entre as imagens. Existem várias maneiras de medir o espaço necessário. Por exemplo, você pode adicionar uma imagem de espaço reservado e, em seguida, verificar o tamanho da imagem nas ferramentas do Google Chrome ou usando uma ferramenta de medição.

As ferramentas de medição, como uma extensão do Chrome chamada Page Ruler , permitem medir áreas da tela. Isso é útil para medir a largura dos módulos.

Colunas Divi e tamanhos

16: 9 é a proporção padrão para monitores. É ótimo para cabeçalhos e imagens de largura total.

Aqui estão os tamanhos gerais de imagem para as larguras das colunas principais:

• 1 coluna: 1080 x 608 px
• ¾ coluna: 795 x 447
• ⅔ coluna: 700 x 394
• ½ coluna: 510 x 287
• ⅓ coluna: 320 x 181
• ¼ coluna: 225 x 128

4: 3 é ligeiramente mais largo do que alto. Essa era a proporção padrão para monitores mais antigos e é uma boa proporção para a maioria das imagens.

Aqui estão os tamanhos gerais de imagem para as larguras das colunas principais:

• 1 coluna: 1080 x 810 px
• ¾ coluna: 795 x 597
• ⅔ coluna: 700 x 526
• ½ coluna: 510 x 384
• ⅓ coluna: 320 x 241
• ¼ coluna: 225 x 170

3: 4 é um pouco mais alto do que largo e é uma ótima opção para exibir retratos.

Aqui estão os tamanhos gerais de imagem para as larguras das colunas principais:

• 1 coluna: 810 x 1080px
• ¾ coluna: 597 x 795
• ⅔ coluna: 526 x 700
• ½ coluna: 384 x 510
• ⅓ coluna: 241 x 320
• ¼ coluna: 170 x 225

1280px de largura e 1920px de largura podem ser usados ​​para imagens em tela inteira.

Essas dimensões são apenas diretrizes. Embora Divi possa acomodar imagens de qualquer tamanho, essas proporções funcionam melhor em layouts Divi. Seus tamanhos reais variam de acordo com o conteúdo e as necessidades, mas eles o ajudarão a ter uma ideia do que funciona melhor e onde. Para ajudá-lo a determinar os tamanhos de imagem para essas proporções, dê uma olhada em uma ferramenta online chamada Calculadora de Proporções .

Otimizando Suas Imagens para Reduzir o Carregamento da Página

Quanto maior o tamanho do arquivo de suas imagens, mais tempo a página levará para carregar. É importante otimizar suas imagens para que suas páginas carreguem o mais rápido possível. Imagens que demoram muito para carregar aumentarão sua taxa de rejeição e reduzirão seu SEO. Mantenha suas imagens entre 60 e 200kb para o melhor desempenho e boa qualidade.

Redimensionar imagens

Redimensione as imagens para que caibam no espaço que você deseja usar. Não use uma imagem ampla de 1920 px em um espaço que só precisa de uma imagem de 225 px. Redimensionar a imagem reduz drasticamente o tamanho do arquivo e parece o mesmo que uma imagem maior em um espaço pequeno. Se você planeja usar as mesmas imagens em vários lugares, é melhor criar uma nova imagem com tamanho específico para cada local.

Comprimir imagens

Uma vez que as imagens são redimensionadas, o tamanho do arquivo pode ser reduzido ainda mais comprimindo-as. As ferramentas de compactação reduzem o número de cores e removem metadados desnecessários. Os arquivos podem ser reduzidos em até 70% ou mais sem uma diferença perceptível na qualidade. As imagens podem ser compactadas com aplicativos de edição de imagem ou com ferramentas online (mais sobre ferramentas mais tarde).

Tipos e tamanhos de arquivo

Os tipos de arquivo mais comuns para a web são JPEGs e PNGs. Ambos são altamente compatíveis com navegadores em várias plataformas. Ambos têm suas vantagens e usam compactação para reduzir o tamanho dos arquivos. GIFs também são populares para imagens animadas.

Os tamanhos dos arquivos variam de acordo com o número de cores e detalhes da imagem.

JPEGs são excelentes para fotos com muitas cores. Eles são boas opções para imagens de fundo e imagens em destaque. Comprimem bem sem perder muita qualidade. Eles não são recomendados para ícones porque não pode ser garantido que eles terão bordas limpas. Eles tendem a ser arquivos maiores do que PNGs e não podem ter fundos transparentes.

PNGs são ótimos para imagens pequenas com muitos detalhes, o que os torna ótimos para capturas de tela. Eles têm bordas limpas e suportam fundos transparentes. Isso os torna ideais para botões, ícones e logotipos. Eles são bem compactados, mas os arquivos podem ficar grandes se tiverem muitas cores.

GIFs são ótimos para animações curtas com algumas cores e baixa resolução. Eles são ideais para mostrar como um recurso funciona, o que acontece quando um botão é clicado, etc. Eles podem se tornar arquivos grandes realmente rápido se a animação continuar por mais do que alguns quadros.

Ferramentas de compressão de imagem

Existem muitas ferramentas gratuitas e premium de boa qualidade disponíveis para compactar suas imagens, mantendo a excelente qualidade. Aqui está uma olhada em algumas opções.

Aplicativos de compressão offline

ImageOptim – é um aplicativo gratuito e de código aberto para Mac que combina as melhores ferramentas de otimização para reduzir imagens para uso na web.

Squash – um aplicativo premium para Mac que permite ajustar o nível de compactação para obter a qualidade preferida para a proporção do tamanho do arquivo. Ele também pode converter tipos de arquivo.

Cesium Image Compressor – é uma ferramenta de compressão gratuita e de código aberto para Windows, Mac e Linux que pode comprimir imagens em até 90% sem perda perceptível de qualidade. Possui pré-visualização e processamento de várias imagens.

Editores de imagens offline

Photoshop – há muitos anos o editor de imagens padrão da indústria. Está disponível para Windows e Mac. É o mais caro e complexo, mas também tem mais recursos.

Gimp – é um editor gráfico gratuito, de código aberto e de qualidade profissional para Mac, Windows e Linux. É uma excelente alternativa ao Photoshop.

Paint.NET – é um editor de imagens gratuito para Windows. É mais simples do que a maioria dos editores, mas ainda tem recursos como camadas. É uma excelente opção de aplicativo gratuito e simples de usar.

Paintshop Pro – é um editor gráfico profissional para Windows que oferece muitos recursos de edição de imagem a um custo relativamente baixo.

Affinity Photo – é um editor de imagens premium para Mac que fornece ferramentas de fotografia de nível profissional a um custo relativamente baixo.

Ferramentas online

Bulk Resize – uma ferramenta online que redimensiona as imagens no seu computador para que você não precise carregá-las.

TinyPNG – compacta PNGs e JPEGs usando uma compactação inteligente com perda que reduz o número de cores, mas é quase não detectável.

Compactar JPEG – parte de uma série de sites que compactam e convertem arquivos JPG, PNG e PDF. Também possui um modo manual se você quiser mais controle sobre a compressão.

Plugins WordPress

Smush – redimensiona e compacta qualquer imagem em qualquer diretório usando compactação sem perdas. Ele redimensionará as imagens, compactará em massa, compactará no upload, adicionará um carregador lento e muito mais.

WP-Optimize – usa compactação com perdas para compactar e converter tipos de arquivo JPG, PNG, GIF, BMP e TIF. Ele também limpará seu banco de dados e armazenará em cache seu site. Ele será compactado em massa, compactado no upload e terá um recurso de restauração.

EWWW Image Optimizer – possui compactação com perdas para arquivos JPG, PNG e PDF com conversão inteligente para que você sempre tenha o tipo de arquivo correto para o trabalho, incluindo JPG, PNG ou GIF. Seu objetivo é aumentar a velocidade da página sem sacrificar a qualidade.

Reflexões finais

Esta é a nossa visão dos melhores tamanhos de imagem Divi para o seu site. Cada site é diferente, mas compreender as relações de aspecto e os melhores tamanhos de imagem para Divi ajudará você a criar as melhores imagens para seu site Divi.