Estou considerando revisitar este exercício para saber as melhores formas de utilizar o gimp em conjunto com o tinydesk e especialmente, como redimensionar imagens de acordo com as suas proporções e melhor explorar a sua dpi para diferentes finalidades.
encontrei este artigo, mas acredito que precisamos de uma continuação para saber como reproduzir a imagem, de acordo com suas proporções originais, para diferentes devices. Não sei se posso dizer que essa é também uma questão de ux e acessibilidade quando fazemos o tratamento da imagem no gimp. Especialmente precisarei refinar o redimensionamento(scale) sob medida do original.
Eis abaixo o como não fazer
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagens</title>
</head>
<body>
<h1>Imagens</h1>
<hr>
<a href="https://cursos.alura.com.br/classpage/html-css-ambiente-estrutura-estilo/task/210600">Revisar: Manipulando e usando imagens no HTML</a>
<p>Caminho relativo: quando a imagem está na pasta.<br>
Caminho absoluto: quando eu a extraio de uma url onde esta imagem está armazenada na internet</p>
<h2>tipos de imagens</h2>
<ul>
<li>Jpeg</li>
<p>São imagens geralmente com alta qualidade e por isso também mais pesadas, não possuem fundo vazio, então devem ser bem pensadas quando utilizadas no site principalmente junto ao css da página</p>
<li>png</li>
<p>São imagens sem fundo que trabalham muito bem com o css e arrisco dizer que com o javascript além de sobrecarregar o site menos do jpeg</p>
<li>svg</li>
<p>são imagens vetorizads e mais leves, muitas vezes utilizadas como logo e favicon dos sites</p>
<li>webp</li>
<p>São mais leves e pensadas para trazer maior Performance reduzindo a latência do site</p>
</ul>
<h2>Desafios</h2>
<ul><li>Como explorar o melhor do backend e frontend para trazer a melhor experiência do usuário de acordo com o aparelho utilizado?</li>
<ul>
<li>Qualidade da imagem x Performance da página</li>
<li>Otimizar para que mostre somente a imagem com qualidade correspondente ao device do usuário</li>
<ul>
<li>1900 para computador full hd</li>
<li>720 para usuário de tablet</li>
<li>mostrar 480 para usuário de smartphone</li>
</ul>
</ul>
</ul>
<p>
A idéia é carregar no servidor as três imagens, mas mostrar no site somente a imagem do respectivo device. Talvez em baixa fidelidade e depois entregar em alta qualidade quando comprar para download com uma hash de controle.
</p>
<h3>Descobertas feitas no gimp e tiny png</h3>
<p> a imagem jpeg jean-carlo-emer-r7gWCwTFOpM-unsplash.jpg foi de 2705 kB(2,7MB) para 467 kb redimensionando ela no gimp, depois no tiny png a convertemos para webp chegando 404kB</p>
<img src="imagens/jean-carlo-emer-r7gWCwTFOpM-unsplash-1080.webp" alt="jean-carlo-emer-r7gWCwTFOpM-unsplash-1080 em webp">
<p>Como podem ver ainda preciso me aprofundar mais em tratamento de imagens no gimp e como torna-lás mas o responsivo possível aos devices sem perder Performance e Qualidade </p>
<img src="imagens/jean-carlo-emer-r7gWCwTFOpM-unsplash-1920.jpg" alt="imagens/jean-carlo-emer-r7gWCwTFOpM-unsplash-gimp-1920.jpg">
</body>
</html>
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!