Aqui está um código CSS que você pode usar no Blogger para reduzir o tamanho das imagens e garantir que sejam otimizadas de acordo com os ...
Aqui está um código CSS que você pode usar no Blogger para reduzir o tamanho das imagens e garantir que sejam otimizadas de acordo com os padrões de SEO. Este código ajusta automaticamente o tamanho das imagens, mantendo a proporção e garantindo a responsividade:
Código CSS para Reduzir e Otimizar Imagens no Blogger
/* Tornar as imagens responsivas e ajustar o tamanho */
.post-body img {
max-width: 100%; /* Garante que a imagem não ultrapasse o tamanho do contêiner */
height: auto; /* Mantém a proporção da imagem */
display: block; /* Remove espaços extras ao redor da imagem */
margin: 10px auto; /* Centraliza a imagem com um espaçamento */
border-radius: 5px; /* Adiciona cantos arredondados, opcional */
}
/* Imagens em miniatura no índice do blog */
.thumbnail img {
width: 300px; /* Define o tamanho máximo para miniaturas */
height: auto; /* Ajusta a altura proporcionalmente */
object-fit: cover; /* Mantém uma boa aparência mesmo em recortes */
border: 1px solid #ddd; /* Adiciona uma borda leve */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Adiciona sombra leve */
transition: transform 0.3s ease; /* Adiciona um efeito de hover */
}
/* Efeito de zoom ao passar o mouse */
.thumbnail img:hover {
transform: scale(1.05); /* Aumenta ligeiramente o tamanho da imagem */
}
/* Estilo para imagens destacadas (se aplicável) */
.featured-image img {
max-width: 100%; /* Garante que imagens destacadas sejam responsivas */
height: auto;
border: 2px solid #007bff; /* Adiciona uma borda personalizada */
border-radius: 8px; /* Bordas arredondadas para destaque */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para destaque */
}
Como Aplicar no Blogger
1. Acesse o painel do Blogger.
2. Vá para Tema > Editar HTML.
3. Procure a tag <style> ou crie uma, se não existir, no cabeçalho do HTML.
4. Cole o código CSS acima entre as tags <style> e </style>.
5. Salve as alterações.
Por que Isso Ajuda no SEO?
• Redução de Tamanho: Ajustar as imagens para dimensões responsivas evita carregamento desnecessário de imagens grandes.
• Responsividade: As imagens se adaptam ao tamanho da tela, melhorando a experiência móvel.
• Desempenho: Evitar imagens fora do contêiner ou carregamento de dimensões excessivas melhora a velocidade do site, um fator importante para o SEO.
• Experiência do Usuário (UX): Um layout limpo e imagens centralizadas e otimizadas aumentam a retenção dos usuários.
Se precisar de ajuda para personalizar ainda mais o código, é só pedir!
