Criando imagens responsivas através de um CMS

Oi Bruno, tudo bem?

Então, seria legal vc tratar isso no front usando CSS.

Daria para vc colocar uma classe na imagem e ajustar seu tamanho. Para mobile ficaria assim por exemplo:

.image {
    max-width: 100%;
}

Dai a imagem ocuparia no máximo 100% da tela, se ajustando ao tamanho certinho.

No backend daria para vc cropar imagens e enviar imagens de diferentes resoluções mesmo, mas pra vc ajustar o tamanho das imagens na tela ( que depende do dispositivo ) o melhor é vc usar CSS.

Dependendo de como for vc vai ter que usar media queries tbm. Vou te dar um código mas só de exemplo mesmo.

@media(max-width: 480px) {
    .image {
        max-width: 100%;
    }
}

.image {
    max-width: 80%;
}

Abração, espero ter ajudado!

Olá Yuri, obrigado pelo retorno.

Resumidamente então eu poderia fazer o upload da imagem em alta(2x) e via código backend gerar mais duas imagens(uma para desktop e outra para mobile) totalizando 3 imagens certo?

No curso eu vi que foi falado que existe a técnica de fazer apenas uma imagem e servir para todas as resoluções, mas para mim nao ficou claro isso, pois se vou servir em outras resoluções, no mobile eu vou querer diminuir a qualidade da imagem, logo é uma imagem nova certo?

Bruno, mil desculpas pela demora, sabe como é essa época do ano!

Então, a ideia nessa aula do curso é que no final das contas o melhor a se fazer é ter uma imagem com resolução boa mas também otimizada. O ideal seria ter uma imagem só mas n ficar tendo que trocar dependendo do dispositivo ( isso pode ser trabalhoso e encher de linhas de código a mais ).

Como vc falou, até poderia pegar uma imagem e gerar outras de resoluções diferentes, mas melhor que isso seria pegar uma imagem só com boa qualidade e otimizá-la, dai vc fornece ela para todos os dispositivos (:

Enfim, respondendo sua pergunta, servir uma imagem é realmente o ideal, não precisa diminuir a qualidade da imagem, vc pode usar ferrmentas de otimização de imagens que tornam as imagens PESADAS de alta resolução em imagens LEVES de alta resolução, ou seja, fica perfeito (:

Bom, espero ter respondido, desculpa a demora de novo!

Abraços e feliz natal !

Olá Yuri, cara tranquilo não precisa se desculpar não :) Final de ano é corrido mesmo.

Bom referente a sua resposta, no caso eu tendo a imagem em alta resolução com qualidade leve, basta apenas colocar max-width no tamanho da imagem no css, que ao redimensionar a página já vou ter os tamanhos certinhos ne?

É isso aí, dependendo de como for vc pode usar media queries também.

No mobile normalmente a gente coloca max-width:100% pra que a imagem ocupe 100% da largura ( no mobille normalmente a gente quer aproveitar o máximo da tela, já que ela é pequena ).

Para desktop vc pode fazer uma media query para ocupar um pouco menos, assim a imagem não fica gigante em telas grandes (: