Sistema de crop


(Soulless) #1

Bom dia pessoal, alguém sabe como esse esquema de cropar imagem é feito? Ou pelo menos como chama a técnica pra eu pesquisar?

https://img.ibxk.com.br/2017/11/10/10153504790364.jpg
https://img.ibxk.com.br/2017/11/10/10153504790364.jpg?w=557&h=176&mode=crop

Se eu usar essa técnica com o código abaixo me dá alguma vantagem de velocidade de carregamento ou alguma outra coisa?

<picture>
    <source media="(min-width: 1024px)" srcset="https://img.ibxk.com.br/2017/11/10/10100421722216.jpg?w=290&h=176&mode=crop">
    <img srcset="https://img.ibxk.com.br/2017/11/10/10100421722216.jpg?w=557&h=176&mode=crop">
</picture>

Obrigado


(Luan Maik) #2

O termo seria Crop mesmo.

Sobre performance, deve levar em conta a manutenção.

Ex: se seu site muda bastante de layout, mudando o tamanho da imagem a ser apresentada ao usuario, compensa mais utilizar uma api dentro do atributo src da imagem, porque não precisará redimensionar as imagens todas as vezes que mudar de layout, mudará apenas o SRC da imagem;

Se vc não pretende mudar de layout, é melhor fazer o crop no upload da imagem, pois ao carregar a página a imagem será carregada diretamente, diferente da opção anterior, que será necessário que um código backend manipule a imagem de acordo com os parâmetros passados.