Imagens encolhem e ficam distorcidas em posts em destaque

Olá a todos!

Temos várias postagens em destaque, e as imagens parecem um tanto terríveis nelas:

Existe alguma maneira de redimensionar imagens sem perder qualidade?

Caso seja útil, aqui está o nosso fórum: https://community.elfsight.com/

Obrigado!

2 curtidas

Isso é do Componente de Cartões em Destaque? Se sim, talvez o @manuel possa ajudar?

4 curtidas

Sim, isso parece ser o componente. Embora seja baseado no componente Featured Tiles e eu acredite que, em relação ao redimensionamento de imagens, não alterei nenhum código. Eu também às vezes vejo prévias borradas com o componente Topic List Thumbnails. Talvez @david tenha conselhos sobre como otimizar imagens para que as prévias não fiquem borradas?

3 curtidas

Você precisa atualizar as definições de tamanho aqui:

E então faça os cálculos para atualizar a lista de resoluções necessárias aqui:

4 curtidas

Oh.. obrigado por apontar isso! Eu deixo os usuários ajustarem os tamanhos nas configurações:

Parece que terei que pensar um pouco se e como posso integrar essa flexibilidade com as definições existentes :robot:

3 curtidas

A abordagem mais fácil provavelmente é definir o componente com o maior tamanho razoável no código (talvez 500x500, mais as variantes 1,5x e 2x), e então deixar o navegador redimensioná-los para baixo ao exibir?

3 curtidas

Obrigado pela dica, David! Isso parece bem simples para o componente. De qualquer forma, parece que precisarei entender um pouco melhor o que os navegadores estão realmente fazendo, pegando uma miniatura redimensionada e redimensionando-a para o tamanho final do layout. Como mencionado, também vi imagens borradas com as miniaturas da lista de tópicos e os resultados são ligeiramente diferentes dependendo do navegador. E provavelmente é porque faço alguns ajustes de tamanho no código do meu tema.