o Melhor Tamanhos de Imagem e Como Salvar Imagens Para a Web e Flothemes

Economia de imagens para a web tem sido sempre pouco de mistério para muitos. O upload de imagens que são pesadas (dimensionamento da imagem original a 5000px largura, imagens não otimizadas) não só irá criar problemas com a experiência do usuário em seu site, mas também irá afetar a sua estratégia de SEO (velocidade de carregamento, taxa de salto, ranking, etc).,

Este artigo é dividido em várias partes cobrindo tudo o que você precisa saber sobre como preparar suas imagens para a web. Na primeira parte do post vamos listar os tamanhos de imagem recomendados para o seu site Flothemes. Em seguida, o artigo irá cobrir como inspecionar as várias seções em seu site para identificar os tamanhos corretos para suas imagens antes de enviá-las para a web. Nós também explicaremos como exportar / salvar as imagens corretamente, para que elas sejam otimizadas para a velocidade.,

finalmente, iremos fornecer algumas dicas de SEO de imagem sobre como classificar as suas imagens correctamente ao gravá-las e porque é que a utilização de alt tags irá melhorar o seu SEO. Para as imagens já carregadas para o seu site, vamos mostrar-lhe como identificar as imagens que são muito grandes e estão atrasando o seu site. Vamos começar!por que as dimensões das imagens e o desempenho do local são importantes?

imagens não otimizadas atrasam os sites. Sites lentos = má experiência do Usuário, menores chances de classificação em pesquisas do Google e, em última análise, menos perguntas e clientes.,
Salvar suas imagens com dimensões adequadas e otimização de imagens para a web pode ajudar com algumas coisas:

• Velocidade – de acordo com uma pesquisa feita pelo Google, se uma página web é carregada em mais de 5 segundos, a probabilidade de que um usuário móvel vai deixar essa página aumenta em 90%. Ao redimensionar e reduzir o tamanho das imagens, você torna as páginas do seu site mais rápidas.
• experiência do utilizador-imagens de boa qualidade e impactantes ajudam os visitantes a ter uma experiência mais envolvente enquanto navegam no seu website., Mantendo essas imagens otimizadas e carregando rápido-você está garantindo uma experiência sem falhas e suave para os seus visitantes, o que os motiva a passar mais tempo em seu site e explorar o seu conteúdo.
• SEO ranking – site speed is a ranking factor. Quanto mais rápido é o seu site, melhor você pode potencialmente classificar. Páginas Web com imagens otimizadas irão carregar muito mais rápido tanto em desktop e dispositivos móveis.vendas-tempos de carregamento mais rápidos e melhores SEO podem ajudar a trazer mais usuários para o seu site, o que aumenta suas chances de ser pesquisado e reservado.,

nota: quando falamos do tamanho da imagem, referimo-nos à dimensão da imagem em pixels.

quais são as melhores imagens de tamanho para a web e Flothemes?

ao enviar imagens para a web há uma série de coisas a ter em consideração, tais como o que é a imagem a ser usada, quão grande deve ser o arquivo, e que tipo de imagem deve ser usado para diferentes áreas em seu site.,

uso e tipo de imagem

Existem vários casos em que você vai querer usar diferentes tamanhos de imagem para diferentes áreas do seu site, abaixo i irá cobrir as áreas mais comuns e as opções de dimensionamento que você pode usar para cada. Note que estes são recomendados, retina friendly, Opções de dimensionamento considerando que a maioria dos usuários ver o site em um dispositivo que é móvel ou 13-15 polegadas tamanho médio. No entanto, se você está procurando fazer o site olhar grande para o seu monitor 27 polegada (que tem uma resolução realmente alta), note que pode não ser o que seus clientes potenciais usar.,

Se você quiser ser mais preciso como o seu blog ver o seu site e sua carteira, você pode verificar os dispositivos utilizados para acessar seu site através do Google Analytics (vá para o Público – Tecnologia – Browser & OS – resolução de Tela), e ajustar o tamanho recomendado para coincidir com a necessária proporção da média do seu usuário.

imagens de largura total

2400x1600px, jpeg, gravadas para a web, e optimizadas

em todo o site poderá ter secções onde terá de usar imagens de largura total que cubram todo o seu ecrã da esquerda para a direita., Estas áreas podem ser imagens de heróis, slideshows de tela cheia, imagens de banner. Para garantir que as suas imagens de largura total parecem boas em qualquer dispositivo grande ou pequeno, o tamanho recomendado é 2400x1600px. Note que os dispositivos têm uma proporção diferente da que você dispara e é possível que suas imagens serão cortadas quando vistas na web. Como uma recomendação tentar atirar fotos mais amplas do que o habitual para o seu conteúdo web, para evitar recortar de conteúdo de imagem importante.,

Dentro de Imagens de Conteúdo

Horizontal máximo largura 1500px, jpeg, salvo para web, e otimizado
Vertical – max 1000px de largura, jpeg, salvo para web, e otimizado

Sobre as páginas de seu site, haverá seções, que consiste em imagens, áreas de texto, chamada para botões de ação, etc. Basicamente, estas são as seções onde as imagens são parte do conteúdo interior (leia—se como “não de largura completa”)., Nestes casos, a menos que o dimensionamento recomendado seja especificado como alguns dos nossos blocos de Flothemes fazem, você pode seguir as recomendações acima para imagens horizontais e verticais. Com base na sua proporção, a altura irá ajustar-se de acordo quando gravar as suas imagens.,galerias de apresentação: certifique-se de que eles são todos a mesma altura recomendada 1500px, independentemente se eles são horizontal ou vertical

Postagem no Blog Imagens

• se você está se preparando imagens para carregar dentro de uma postagem no blog, certifique-se de que eles são todos a mesma largura, recomendado 1500px, independentemente se eles são horizontal ou vertical

Imagens em Destaque

Existem 3 tipos de imagens em destaque: retrato, paisagem e herói de imagens., O tamanho de imagem de retrato e paisagem segue a mesma recomendação que as imagens de conteúdo interior, enquanto o tamanho recomendado para imagens de herói é coberto sob imagens de largura completa. A chave para ter boas imagens é consistência. Se você quiser usar todos os retratos certifique-se de que eles são do mesmo tamanho, o mesmo vale para a paisagem e imagens de heróis. Se usar uma grade de alvenaria, o dimensionamento acima não é tão relevante, apenas certifique-se de que as imagens são pelo menos 1000px em largura.,

Se tiver algum problema com o dimensionamento da imagem, certifique-se de dar uma vista de olhos nas opções de dimensionamento da imagem nas suas configurações de Flothes para se certificar de que estão configuradas correctamente.

formas de descobrir tamanhos de imagem correctos para a sua web

pode ser possível que os tamanhos recomendados acima não correspondam às suas necessidades devido a uma disposição específica. Se você não tem certeza sobre a dimensão certa da imagem, felizmente, existem algumas maneiras que podem ajudá-lo a inspecionar facilmente as imagens do seu site, e identificar o dimensionamento correto necessário para cada elemento em seu site.,

uma coisa importante a lembrar é que para dispositivos retina, você precisa dobrar a densidade de pixels de imagem. O que isso significa é que você precisa de imagens com o dobro do tamanho para dispositivos retina para que eles fiquem bonitos e crocantes. Assim, uma vez que você tenha encontrado os tamanhos de imagem corretos para cada seção em seu site, você vai querer dobrar esses tamanhos, e só então exportar e carregá-los para o seu site.

A., Usando a extensão de informação de tamanho de imagem

o primeiro método para encontrar tamanhos de imagem para o seu site é usando a extensão de informação de tamanho de imagem para o Chrome (se você não usar o Chrome no seu computador, nós recomendamos muito usá-lo ao criar o seu site). Uma vez que você instalou a extensão, esta ferramenta irá então permitir que você descubra os tamanhos de imagem de cada elemento de imagem em seu site.

Confira as imagens no seu site, faça notas e, em seguida, com este conhecimento, você será capaz de adaptar suas fotografias exatamente para caber os espaços como eles são destinados no design tema., Basta lembrar, com telas retina você exige que suas imagens sejam duas vezes maiores do que o espaço pretendido. Então, se você tem um espaço de imagem de 750x500px, para retina deve ser 1500x1000px quando o upload para WordPress (ou qualquer outra plataforma).

Por exemplo: quando inspecionamos uma imagem com esta extensão, está sendo apresentada no 780x520px, mas que tamanho real é 1560x1040px. Isto é porque estamos usando uma tela retina ao inspecionar a imagem. Neste caso, você pode usar os tamanhos de dimensões para escolher o seu tamanho de imagem.,

num dispositivo não retina, as dimensões indicadas e as dimensões serão as mesmas. Neste caso, dobre os números e faça upload de imagens desse tamanho.

A principal limitação desta ferramenta, é que ela não pode inspecionar imagens de fundo para dimensionamento. Em muitos temas, imagens de fundo são usadas em vez de elementos de Imagem HTML, como eles são mais flexíveis ao exibir imagens. Se você é incapaz de inspecionar as imagens porque são imagens de fundo, você pode usar o próximo método para rever os tamanhos de imagem em seu site.

B., Usando a ferramenta Inspector

com o Chrome e o Safari, também pode usar a ferramenta Inspector de programadores para encontrar tamanhos de imagem no site. O princípio será o mesmo de antes, inspecionar os vários elementos no site, e anotar os tamanhos. Dobrar os tamanhos de imagem para dispositivos retina e, em seguida, carregá-los para WordPress, uma vez que eles foram otimizados para web e intitulado corretamente para SEO.

As limitações deste método serão que, se o site estiver usando alguns elementos sensíveis definidos em valores REM, as imagens podem ser encolhidas ao usar o inspetor na mesma janela., Se o site também está usando elementos sensíveis, eles serão maiores em telas maiores, e menores em outros. É melhor usar uma tela maior sempre que possível ao verificar o site, para que você possa obter a imagem mais precisa dimensionamento. Em qualquer caso, usando este método lhe dará uma boa indicação de tamanhos para o seu site e permitirá que você se aproxime adicionando imagens para o seu site com mais cuidado.

Chrome

Chrome tem construído em ferramentas de desenvolvimento, e é por isso que é o navegador mais popular na web para desenvolvedores e designers., O vídeo a seguir explica como você pode inspecionar as imagens no seu site para descobrir o tamanho:

Firefox

Com o Firefox, muito parecido com o chrome, eles têm construído em um inspetor ferramenta que permite que você verifique as imagens do seu site.

Safari

Se estiver a utilizar Safari, pode usar a Ferramenta do inspector para ver as dimensões das imagens. Verifique o seguinte guia sobre como activar as ferramentas de desenvolvimento.,

Agora você pode ir para diferentes seções em seu site e preparar as dimensões da imagem.

para as galerias você vai querer olhar para a altura das imagens, como elas são geralmente restringidas pela altura (então a largura pode ser configurada para auto).

para publicações no blog, você irá querer notar a largura das suas imagens, uma vez que estas são limitadas pela largura (a altura pode ser automática).,

para o resto dos elementos em seu site, você deve usar o método descrito acima para obter as dimensões corretas, e carregá-los em dimensões ideais para o seu site.

Agora que você sabe que Dimensões você precisa para todos os elementos em seu site, vamos explicar como otimizar todas as suas imagens para o tamanho, isso é em termos de dimensionamento de dados. O tamanho do arquivo de suas imagens também é muito importante para a web. O Uploading bloated e imagens pesadas em seu site irá forçar seus recursos do servidor, abrandar o seu site, e na verdade criar uma experiência negativa do Usuário.,

otimizar e salvar imagens para web

há uma série de coisas a considerar ao otimizar e salvar imagens para a web. Você deve considerar o tipo de arquivo a usar, JPG, PNG ou GIF, dependendo da finalidade. Você irá querer rotular as suas imagens correctamente para fins de SEO e irá querer gravá-las no formato de cores certas (sRGB para web).

dependendo da finalidade, você precisa salvar imagens em um dos seguintes formatos .jpg .Gif, or .Forum. JPG será o formato mais comum ao salvar imagens para o seu site portfólio, eles também serão o mais leve em tamanho.,

para nomes de ficheiros, certifique-se de que são apropriados para cada imagem ou post do blog em particular. Use apenas letras, números, subconjuntos e hífens. Tente usar apenas letras inglesas. Caracteres de outras línguas, pontos de interrogação, espaços, sinais percentuais podem enviar incorretamente ou causar um comportamento inesperado em suas galerias ou postagens no blog.por exemplo, se você acabou de fazer um casamento boho no Biltmore Santa Barbara, rotular as imagens, boho-wedding-biltmore-santa-barbara_01.jpg este será muito mais amigável SEO, e poderia fornecer melhor classificação para o seu site.,

otimizando imagens no Lightroom

vamos enfrentá-lo, há muitas configurações diferentes para escolher e infinitas combinações de números para entrada. No entanto, se você já conhece o formato de imagem e as dimensões necessárias de imagem de arquivo, é muito mais fácil.

no Lightroom, poderá chegar à janela de exportação de 3 formas:

realçar e exportar

pode simplesmente realçar / seleccionar qualquer fotografia da sua biblioteca Lightroom e carregar com o botão direito na fotografia. No menu de contexto, seleccione a opção Exportar.,

Arquivo e Exportar

A segunda maneira é ir para o Arquivo> Exportar

Usando o atalho de teclado

A terceira, e a maneira mais rápida é usar um atalho de teclado:

shift + command + E (Shift+⌘+E)

não importa como você a chegar lá. Qualquer um destes vai funcionar, então escolha o mais fácil para você se lembrar.,

janela de exportação do Lightroom

Agora que sabe como exportar as imagens para a web, iremos cobrir as 4 secções e as várias opções a escolher na janela de exportação do Lightroom para lhe permitir exportar imagens optimizadas para a web.

1. A nomenclatura de ficheiros

cada exportação pode apresentar a sua própria configuração de mudança de nome. Se você ficar com a opção padrão, suas imagens terão o mesmo nome que os arquivos originais, e salvos como uma imagem JPEG., No entanto, recomendamos que você marque a opção “Mudar o nome para” e escolha um dos muitos modelos de mudança de nome que o Lightroom oferece para personalizar as imagens exportadas. No nome do arquivo, nós renomeamos os nomes dos arquivos de imagem para” sequência de nomes personalizados”, onde o texto personalizado está intimamente ligado ao nosso título de post do blog ou palavras – chave de post do blog.

2. Na configuração do ficheiro

certifique-se que o seu formato de imagem está definido para JPEG. Esta é a opção mais amigável para a web. A sua qualidade não deve ser inferior a 65., Normalmente ajustamos para 75. O seu espaço de cores tem de ser sRGB. Este é o espaço de cores usado pela web para que ele irá renderizar o melhor. Não assinale a opção ” Limitar o tamanho do ficheiro a:”. A verificação dessa caixa diminuiria significativamente a qualidade do arquivo.

para resumir, ao gravar as suas imagens use estas configurações:

• 75% qualidade
• .formato jpeg (.png para logotipos e ícones)
• cores sRGB

3. Dimensionamento da imagem

assinale a opção Dimensionar para caber e seleccionar largura & Altura., No campo W: H: indique W (Largura em pixels) para o valor necessário (1500px para publicações no blog, e 2880 para apresentações em slideshows). Deixando o valor em H (altura) em branco, ele será configurado para auto dimensionamento.

para galerias, você pode deixar W em branco, e definir H (altura) para 1500px, isso deve ser ideal para a maioria dos temas.

os tamanhos acima já estão otimizados para dispositivos retina.4. Afiar o resultado

assinale a opção ao lado de”afiar para “e seleccione a quantidade para”alta”.

pode agora exportar as imagens e seguir este processo sempre que estiver a exportar imagens.,

configuração da qualidade da imagem

No mundo dos sonhos de um fotógrafo, exportaríamos sempre imagens com a máxima qualidade. Na realidade, descobrimos que não são necessárias exportações de máxima qualidade. Em tamanhos de web, as diferenças de qualidade são muitas vezes difíceis de perceber, e isso significa que podemos reduzir a qualidade ligeiramente, reduzindo significativamente o tamanho do arquivo.desde que as imagens não sejam macias, os seus clientes não saberão a diferença entre a imagem que tirou e a imagem que é mostrada no seu site.

isto também se aplica às cores das imagens., A tela de todos é calibrada de forma diferente, por isso preocupar-se com pequenas variações de cores entre uma imagem em um navegador e em sua ferramenta de edição de escolha é uma perda de tempo, a menos que arruíne a qualidade da imagem.

na extremidade superior da escala de qualidade, há retornos decrescentes. A diferença na qualidade percebida entre uma configuração de qualidade de 75% e 100% é difícil de ver, mas aumenta significativamente o tamanho do arquivo.

Dado os resultados acima, selecionando a exportação de 65-75 qualidade., Ele atinge o equilíbrio correto de qualidade e tamanho ideal de arquivo de imagem.

Agora é a sua vez de mudar o nome dos seus arquivos, exportá-los para a web, guardá-los para a web e você terá algumas imagens realmente bem otimizadas para a web.

passo de bónus: optimizar as imagens antes de As enviar para o seu site

existe um passo final que pode ajudá – lo a remover drasticamente os dados em excesso das suas imagens e a reduzir o tamanho do ficheiro-estamos a falar de ferramentas como o JPEGmini ou o TinyJPG.estas ferramentas podem ajudá-lo a otimizar ainda mais as suas imagens., Escolha uma e execute as suas imagens através dela:

1. JPEGmini – esta aplicação permite-lhe comprimir as suas imagens e reduzir o seu tamanho de ficheiro sem qualquer efeito visível na qualidade da imagem. Se você tiver a versão Pro, há uma extensão para Lightroom que fará isso automaticamente na exportação – uma ferramenta altamente recomendada para qualquer fotógrafo.
2. TinyJPG ou TinyPNG-pode correr as suas imagens através de tinyJPG ou tinyPNG para comprimir as suas imagens mais à frente. No entanto, existem duas limitações., Com a versão livre desta ferramenta, você só pode comprimir 20 imagens de cada vez, e o tamanho do arquivo por imagens deve ser inferior a 5 MB.

Este será o passo final na criação de imagens rápidas otimizadas para manter a velocidade do seu site rápido, e as imagens estão ótimas!

Saiba mais ao ler este guia abrangente sobre como otimizar imagens para o seu site WordPress.

Image SEO

Agora que você tem suas imagens dimensionadas, otimizadas e carregadas para o seu site – agora você vai querer adicionar tags ALT! Este é o passo final na criação de imagens otimizadas para propósitos de SEO., A tag ALT é o que os motores de busca usam para ler imagens. Sem eles, suas imagens são praticamente inexistentes na web.

felizmente com o WordPress você pode ir para a sua biblioteca de mídia após o upload, e rotular cada imagem., Um ótimo plugin que vai deixar você fazer isso rapidamente é WP Meta de SEO, quando adicionado, você pode ir para o WP Meta de SEO > Informações da Imagem e adicionar Tags ALT para imagens onde ele não está presente, uma vez concluído o plugin pode ser desactivada:

Existem também vários plugins que irá adicionar as tags alt automaticamente. Rank Math é uma boa solução de plugin para isso, basta instalá-lo e ele irá automaticamente adicionar tags ALT ao enviar a partir da descrição da imagem, ou título.,

Leia este guia SEO da imagem para descobrir mais dicas e truques e certifique-se de tirar o máximo partido das suas imagens em resultados de pesquisa. então é isso pessoal. Os 3 passos para ter imagens otimizadas para o seu site.

comece por descobrir as dimensões da sua imagem, depois guarde-as correctamente para a web, adicione títulos adequados e optimize o seu tamanho. Finalmente, adicionar tags alt para melhorar o SEO via WordPress (deve ser possível adicionar tags ALT em todos os sistemas de gerenciamento de conteúdo, consultar a documentação para descobrir como, ou chegar ao suporte).,

encontrar imagens não optimizadas

Se já enviou imagens para o seu site e quiser saber como encontrar as que estão a atrasar a sua página, verifique o vídeo seguinte. Ferramentas como o GTMetrix ou Pingdom, ou usando a consola do navegador facilmente lhe permitirá encontrar imagens que são muito grandes para a web.

Se quiser saber mais sobre a optimização da velocidade do seu site, consulte este guia útil.

Flothemes
Empowering You