Quando estamos lidando com imagens, pode nos ocorrer a seguinte dúvida: “qual formato é o ideal?”, e a resposta é: “depende”! Depende do propósito do uso dessa imagem, do quanto de detalhe ela possui, se ela tem alguma transparência etc.

Vamos começar com o GIF, que é o mais fácil de ser diferenciado dentre essas quatro opções

O GIF (Graphics Interchange Format) é uma imagem animada, criada a partir de um trecho de um vídeo, ou pela união de imagens estáticas, ou uma animação produzida em um software como o Toon Boom Harmony ou o Adobe Animate. É claro que essas ferramentas vão exigir conhecimento para usá-las, mas deve ser divertido!

Já nós, reles pessoas sem aptidão para criar animações, utilizamos GIFs prontos disponíveis em sites como o GIPHY ou o TENOR. Até podemos criar nossos GIFs através de vídeos prontos nessas ferramentas, basta ir em GIF Maker no GIPHY ou em Criar, no Tenor.

• Podemos arredondar as bordas de um GIF no imgtools.co:

• Devemos ter em mente que a qualidade da imagem de um GIF acaba sendo prejudicada, pois o arquivo é bastante comprimido para que não demore a ser carregado.

• No Whatsapp temos a opção de "converter" um vídeo para GIF, porém, não é bem o que o zap faz. Ele apenas reduz muito o tamanho e a qualidade do vídeo (perceba como a imagem da direita está bem mais pixelada). O "GIF convertido sqn" continua sendo um arquivo de vídeo mp4:

• Para converter de fato um vídeo para GIF, utilize ferramentas apropriadas como o Convertio.

Agora vamos falar sobre PNG e JPEG

Com o formato PNG (Portable Network Graphics), é possível comprimir a imagem sem que exista perda de qualidade. Também podemos colocar transparências:

• Para remover o fundo de uma imagem, gosto muito de utilizar uma ferramenta chamada Remove BG, você pode instalar ele como plugin no Figma (é necessário setar uma API key, mas no site você consegue ela gratuitamente) ou utilizar o site diretamente.

• O Remove BG acaba deixando a imagem um pouco pixelada, então você pode utilizar uma ferramenta de aprimorar a imagem, em muitos casos funciona:

• Algumas ferramentas: Upscale.media, PicWish, Zyro e Remini (que possui um app excelente para Android e IOS)

• Em alguns casos a imagem pode ser bastante danificada por uma IA:

• Se você perceber que ao remover o fundo de uma imagem, a qualidade da imagem ficou ruim, e a IA não deu conta de melhorar ela, o ideal é remover o fundo manualmente. No Figma mesmo você pode fazer isso, é um tanto trabalhoso mas a qualidade fica melhor.

Veja nesse vídeo como remover o fundo utilizando o plugin e manualmente:

Tá, mas e qual a diferença entre o PNG e o JPEG?

• O PNG você pode usar para imagens que possuem transparências e imagens que você deseja comprimir muito mas manter a qualidade (logos e ícones, por exemplo).

• O JPEG (ou JPG, que significa Joint Photographic Experts Group), é o formato ideal para imagens fotográficas, sem textos ou transparências. Quando é comprimido, sofrerá danos na qualidade.

Meu site possui muitas imagens e está demorando para carregar, e agora?

• Algumas ferramentas podem te ajudar comprimindo o tamanho das imagens: o pandinha TinyPNG e TinyJPG, Compress JPEG, entre outras. É sempre legal, para a mesma imagem, tentar em ferramentas diferentes, porque a qualidade pode ser superior numa em relação a outra, dependendo da imagem original.

• Redimensione a sua imagem, você pode estar utilizando imagens que são bem maiores do que você realmente precisa. Lembre-se que redimensionar é diferente de comprimir. A compressão faz com que algumas informações sejam eliminadas, podendo causar perda de qualidade, enquanto que redimensionar significa diminuir a altura e largura (redução de pixels), e dessa forma ela mantém a qualidade.

• Caso você tenha interesse, pode estudar a técnica de lazy loading (em breve pretendo trazer um artigo aqui sobre isso). O lazy loading faz com que as imagens que ainda não apareceram para o usuário não sejam carregadas, mas já existe um espaço reservado para elas. O iFood é um exemplo de aplicação que utiliza essa técnica, em alguns casos é tão rápido que quase não dá tempo de tirar print:

E afinal, o que são os SVGs?

Os SVGs (Scalable Vector Graphics) são gráficos vetoriais escaláveis. Por serem escaláveis, podem ser redimensionados sem perder a qualidade. Então qual o motivo de não utilizarmos sempre o SVG?

Em imagens com muitos detalhes, o formato SVG faz com que muitas coisas percam a textura, e com a riqueza de detalhes, o SVG que era pra ser um formato mais leve, acaba se tornando muito pesado.

Os SVG são ideais para gráficos, ícones e logotipos que precisam ser redimensionados em diferentes tamanhos sem perder a qualidade. Além disso, o formato SVG permite animações e interatividade. Abra um SVG no VS Code, ou no bloco de notas mesmo, tenho certeza que se você nunca viu, você vai se encantar! ^^

• Você pode encontrar SVGs bem "limpinhos" no Google Fonts, no Hero Icons e no Tabler Icons. Também é válido dar uma olhadinha na aba community do Figma, lá você pode encontrar arquivos como esse.

Dicas extras:

• Sempre esteja por dentro da licença das imagens que você pega por aí. Muitos sites como o Pexels, Freepik e Unsplash oferecem imagens gratuitas, mas mesmo assim muitas vezes é necessário dar créditos a pessoa proprietária. Imagens que você vai utilizar para fins pessoais podem ter licença de uso diferente se você quiser utilizar no seu trabalho (fins comerciais), por exemplo.

• Para converter uma imagem, por exemplo, de JPEG para PNG, não basta renomear o arquivo com a extensão diferente. O seu sistema pode até tratar essa imagem como um PNG agora, mas a estrutura interna, ou seja, o conteúdo binário do arquivo não mudou, e ele continua sendo um JPEG. Utilize ferramentas como algumas citadas acima para realizar essa conversão.

• Se você converter um PNG com transparência para JPEG, provavelmente a transparência no JPEG será substituída pela cor branca, isso porque o JPEG não suporta transparência.