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-bodyimg {
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 */
.thumbnailimg {
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:2px2px5px rgba(0,0,0,0.1);/* Adiciona sombra leve */
transition: transform0.3s ease;/* Adiciona um efeito de hover */
}
/* Efeito de zoom ao passar o mouse */
.thumbnailimg:hover {
transform: scale(1.05);/* Aumenta ligeiramente o tamanho da imagem */
}
/* Estilo para imagens destacadas (se aplicável) */
.featured-imageimg {
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:04px8px rgba(0,0,0,0.2);/* Sombra para destaque */
}
Como Aplicar no Blogger
1.Acesse o painel do Blogger.
2.Vá paraTema > 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!