você não tem certeza por que seu site não está bem classificado no Google ou por que os consumidores não estão se envolvendo com ele? Tamanhos de imagem para sites e velocidade do site e problemas de SEO são frequentemente vistos afetando as taxas de rejeição e classificações.
para muitas pessoas, salvar imagens para a web sempre foi um mistério. Imagens pesadas (tamanhos de imagem originais com largura de 5000px, imagens não otimizadas) não apenas degradarão a experiência do usuário em seu site, mas também terão um impacto negativo em sua estratégia de SEO (velocidade de carregamento, taxa de rejeição, classificação, etc.).
vamos dividir a lista de Diretrizes de tamanho de imagem do site.
por que os tamanhos de imagem e o desempenho do site são importantes?
os sites demoram mais para carregar quando os gráficos não são otimizados. Sites lentos resultam em uma experiência de usuário ruim, uma menor probabilidade de classificação nas pesquisas do Google e, como resultado, menos consultas e consumidores.
Website do tamanho da imagem orientações mencionar que verão as suas fotografias nas proporções certas e otimizando-os para a web pode ajudar com uma variedade de coisas, incluindo:
• Velocidade
de Acordo com o Google investigação, se uma página da web demora mais do que 5 segundos para carregar, a probabilidade de um móvel visitante abandonar a página aumenta em 90%. Você pode acelerar as páginas do seu site encolhendo e diminuindo os tamanhos das imagens.
• Experiência do Usuário
os visitantes terão uma experiência mais envolvente ao navegar no seu site se você usar imagens atraentes e de alta qualidade. Você está fornecendo uma experiência perfeita e suave para seus visitantes, mantendo essas fotos otimizadas e carregando rapidamente, o que os incentiva a gastar mais tempo em seu site e explorar seu conteúdo.
* SEO Ranking
quanto mais cedo o seu site carrega, maior você pode classificar. Tanto no desktop quanto nos dispositivos móveis, as páginas da web com gráficos otimizados carregam substancialmente mais rápido.
• vendas
velocidades de carregamento mais rápidas e SEO aprimorado podem ajudar a atrair mais visitantes para o seu site, aumentando suas chances de serem contatados e reservados.
quais são os tamanhos de imagem mais apropriados para sites?
surpreendentemente é construído para trabalhar com uma ampla gama de tamanhos de imagem para diferentes tamanhos de tela, seções, estilos e designs. No entanto, ocasionalmente é útil ter um conceito aproximado de quais dimensões carregar.
Aqui estão algumas diretrizes gerais de tamanho de imagem do site a seguir!
a imagem é tirada de forma impressionante
1. Imagens para o fundo
as fotos de pano de fundo da Strikingly são projetadas para caber em uma ampla gama de tamanhos de tela, do monitor ao tablet ao telefone. Para garantir que seu cenário pareça excelente em todas as telas, recomendamos um tamanho de 1600 pixels de largura por 900 pixels de altura. Inclua fotos sem fundo de pessoas, marcas e outras informações com cautela!
2. Configurações para o plano de fundo
para dimensionar / alinhar seu plano de fundo, você tem algumas alternativas.
Stretch/Cover default: esta opção estica sua imagem para preencher toda a tela, tanto em altura quanto em largura. Como a imagem funcionará como plano de fundo em qualquer tamanho de tela, essa geralmente é a melhor solução. No entanto, se sua imagem tiver conteúdo nas laterais (especialmente à esquerda e à direita), ela pode não estar visível em telefones celulares.
Contain: Contain exibirá a imagem completa, garantindo que nenhuma parte dela seja cortada. Em alguns dispositivos, no entanto, isso pode resultar em algum espaço em branco.
Centro: a imagem será mostrada no centro da seção e não será dimensionada se você escolher o centro. Por outro lado, o fundo mostrará espaço em branco ao redor das bordas da imagem é muito pequeno. Alguns elementos da imagem podem ser cortados se for muito grande, especialmente em telas menores.
Tile: Tile centralizará e repetirá uma imagem, o que é útil para criar padrões.
para iniciar as Diretrizes de tamanho da imagem do site, anote a largura da imagem exibida na página.
Imagem é tomada a partir Surpreendentemente
• imagens de Fundo
O tamanho ideal de imagens de plano de fundo são 1600x900px
• largura Total de imagens
Eles devem ser pelo menos 1400 pixels de largura para os melhores resultados. De acordo com as Diretrizes de tamanho de imagem do site
• imagens de meia largura
imagens de meia largura devem ter pelo menos 700px de largura para a melhor qualidade.
* width imagens de largura
as imagens devem ter pelo menos 480px de largura para obter as melhores imagens de 1/3 de largura de qualidade.
• ¼ Largura imagens
para a melhor qualidade 1/4 largura imagens, eles devem ter pelo menos 360 pixels de largura.
• pequenos ícones e logotipos
eles devem ter pelo menos 100 pixels de largura.
• imagens da galeria
qualquer tamanho é bom para imagens da galeria! As imagens na galeria serão abertas em uma caixa de luz na parte superior do seu site.
qual o tamanho da imagem necessária para o seu site?
as imagens devem ser tão grandes quanto necessário para caber seus “contêineres” para o desempenho máximo do site, dependendo do layout da sua página. As fotos da apresentação de slides, por exemplo, costumam ser maiores; as imagens do blog são de tamanho médio (com uma largura igual à largura da Página menos a barra lateral); as miniaturas são menores e assim por diante.
de acordo com as Diretrizes de tamanho de imagem do site, é fundamental primeiro verificar as dimensões da imagem para calcular a largura da área de conteúdo do seu site. Você pode usar um plug-in do navegador” page ruler “para ajudá-lo a tomar as medidas, ou você pode usar as ferramentas do desenvolvedor integradas ao seu navegador da web se tiver experiência: clique com o botão direito em qualquer elemento da página e selecione” inspecionar ” no menu suspenso.
Imagem é tomada a partir Surpreendentemente
em Seguida, na barra de ferramentas, use o elemento seletor de ferramenta para passar o mouse sobre a imagem ou seção conteúdo que você está interessado:
Imagem é tomada a partir de Contundentemente
Imagem é tomada a partir Surpreendentemente
neste caso, a coluna acima requer uma imagem com uma largura de, pelo menos, 525 pixels.
dizemos ” pelo menos “porque as imagens em smartphones mais novos com telas de” retina ” de alta densidade precisam ser maiores do que isso para parecerem o mais nítidas possível.
considere os seguintes cenários:
A. Slideshow de largura total Tamanho da imagem da Web
as Diretrizes de tamanho da imagem do site recomendam 2560 pixels de largura para apresentações de slides de largura total (que se estendem automaticamente ao tamanho total do navegador). Esta é a largura de resolução usual para monitores de 27″ e 30″.
as imagens podem ser tão altas quanto você deseja que sejam para atingir a proporção que você escolher. Apresentações de slides de página inteira, por exemplo, que são comuns em sites de fotografia de casamento, mantêm a proporção original das fotografias. Outros sites usam uma apresentação de slides que abrange toda a largura da página, mas tem menos altura (levando a uma proporção de cerca de 3:1).
a seguir está um exemplo de apresentações de slides” panorâmicas ” de sites fotográficos:
Imagem é tomada a partir Surpreendentemente usre do site
as Imagens devem ser 2560 (arredonde para 2500px) pixels de largura e em qualquer altura que você escolher para imagens que se estendem por toda a largura do navegador (dependendo se você deseja preservar suas imagens’ proporção nativa ou ir para um mais panorâmica de corte).
este não é um caso em que precisamos dobrar o tamanho da imagem para telas retina, porque isso resultaria em imagens massivas de 5000px (para não adicionar os perigos do roubo de imagens, com grandes tamanhos de arquivo).
Ajuste o tamanho da imagem necessária para slideshows menores que não ocupam toda a largura da página, mas apenas uma parte dela (talvez 2000px, ou 1800px, etc.)
Imagem é tomada a partir Surpreendentemente usre do site
B. Tamanhos de Imagem em Galerias (e Miniaturas que Aumentar em um Lightbox)
Miniatura galerias são únicas situações em que o tamanho do seu miniaturas é ignorada em favor de assegurar que as fotos são grandes o suficiente quando ampliada.
Uma grade de miniaturas de fotos que, quando clicado, abrirá em uma tela cheia de apresentação de slides (normalmente com um semi-transparente sobreposição de baixo), é referido como um “lightbox”:
Porque essas fotos vai abrir em modo de tela cheia, o site do tamanho da imagem de diretrizes recomendam, tornando-os, pelo menos, 1500 pixels de largura (na borda mais longa) para torná-los olhar bem nos desktops e tablets.
você pode até ir até 2000 pixels se quiser adicionar algum “fator wow” extra, embora isso geralmente não seja o caso.
as imagens são ajustadas pelo navegador em dispositivos móveis de qualquer maneira, e 1500px é grande o suficiente para parecer nítido em smartphones com telas “retina” de alto PPI.
imagens verticais/retrato com uma altura máxima de 1200 pixels (como 800×1200 pixels para uma imagem vertical 2:3 ou 900×1200 pixels para uma imagem vertical 3:4) podem ser ainda menores.
Se a apresentação de slides permite a navegação entre as fotos, usando o lado flechas, balas, passando móveis, ou as setas do teclado na área de trabalho, limitando-se a imagem de dimensões como este irá manter o tamanho do arquivo razoável curto, resultando em imagens mais rápido carrega:
C. Recomendado Tamanhos de Imagem para Posts de blogs e Outras Imagens Estáticas em Layouts de Página
Se o seu blog fotos não necessitam de um clique-para-ampliar (ou “lightbox”), recurso, eles devem ser dimensionados de acordo com a coluna ou área de conteúdo de largura.
tome o seguinte exemplo de uma única postagem no blog:
Imagem é tomada a partir Surpreendentemente usre do site
Você pode verificar o real largura da área de conteúdo através da medição de qualquer parágrafo do texto utilizando os métodos descritos acima, por exemplo:
Imagem é tomada a partir Surpreendentemente usre do site
como Alternativa, se você já tem imagens, você pode ver o tamanho que o navegador é o redimensionamento eles.
para adquirir as mesmas informações, você pode usar um plugin de navegador como exibir informações de imagem (propriedades).
com essas informações (825 pixels, por exemplo), agora você pode dobrar o tamanho para contabilizar telas retina (portanto, 1650 pixels de largura).
Dependendo do seu site o tema e sua tolerância ao risco para a imagem de roubo, você pode reduzir essa quantidade a mais sensata 1200 pixels na borda mais longa (de forma horizontal, as imagens devem ser 1200px ampla e imagens verticais devem ser 1200px de altura, mantendo o seu aspecto original).
fotos menores usadas como miniaturas (que não precisam ser expandidas) estão sujeitas ao mesmo processo de tomada de decisão.
Conclusão
website do tamanho da imagem orientações não se aplicam a foto de arquivamento de serviços como o PhotoShelter ou SmugMug (que tem built-in de medidas de segurança e gerar baixo-res miniaturas a partir de original em alta resolução arquivos do site), ou quando você vender essas imagens como downloads ou estampas, como mencionado no início.
seguir estas práticas de Diretrizes de tamanho de imagem do site é uma obrigação se você tiver um site auto-hospedado e só precisa apresentar suas fotografias na web.Escolher as imagens adequadas é um aspecto importante da criação de um site visualmente atraente e de carregamento rápido. Há, sem dúvida, uma curva de aprendizado. No entanto, existem outras vantagens a serem obtidas, e tudo faz parte da emoção de criar e manter um site!