PNG, JPEG, SVG e GIF: quando usar cada uma delas + ferramentas
Tags: frontend, images, tools, webdev
Published: 2023-02-17 19:26:15

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.

<hr>

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

![Exemplo de GIF - Nazaré confusa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ziwi3wrgyv18ezquhw6v.gif)
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](https://www.toonboom.com/products/harmony) ou o [Adobe Animate](https://www.adobe.com/br/products/animate.html). É 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](https://giphy.com/) ou o [TENOR](https://tenor.com/pt-BR/). 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](https://pt.imgtools.co/round-corners-image/gif):

![Exemplo de GIF com bordas arredondadas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpgyv6arft4yaa5i9cku.gif)

* 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:

![Vídeo versus vídeo gif do zap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfnxjchztpwjj8fre628.png)
![Redução do tamanho do vídeo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48naha88673vnltsbvfk.png)
<figcaption>O arquivo original está com 1.66 MB e é um MP4, o arquivo <b>gif-zap</b> foi reduzido para 392 KB, mas continua sendo um MP4</figcaption>

>>

* Para converter de fato um vídeo para GIF, utilize ferramentas apropriadas como o [Convertio](https://convertio.co/pt/mp4-gif/).

<hr>

### 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:

![Imagem com fundo versus imagem com fundo removido](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykijshwtl3qwqru60c40.png)

>>

* 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](https://www.remove.bg/?utm_source=referral) 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:

![Imagem apenas com o Remove BG versus imagem com Remove BG + IA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p9y37vbisqfwwfwq570.png)
<figcaption>A imagem da direita claramente está menos pixelada com uso de um melhorador de imagem</figcaption>

>>

* Algumas ferramentas: [Upscale.media](https://www.upscale.media/pt), [PicWish](https://picwish.com/pt/photo-enhancer), [Zyro](https://zyro.com/br/ferramentas/upscaler-de-imagem) e [Remini](https://remini.ai/) (que possui um app excelente para Android e IOS)

>>

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

![Imagem sem IA versus imagem com IA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ni744sw0c2w27un4rpy2.png)
<figcaption>Aqui a imagem já estava com a qualidade bem ruim, a IA até conseguiu remover bastante a pixelagem, mas como ela tinha pouca informação devido a qualidade da imagem, meteu um olho com óculos e até brincos na orelha do meu irmão kkkk e o 1berto parece que ficou com um feijão no dente, quando na verdade é um dente de ouro 😂</figcaption>

>>

* 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:
{% embed https://www.youtube.com/watch?v=Cp72inDiJfo %}

#### 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](https://tinypng.com/) e [TinyJPG](https://tinyjpg.com/), [Compress JPEG](https://compressjpeg.com/pt/), 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:

![Imagem lazy loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqfz4ricsm5tefmqdlgb.png)
<figcaption>A primeira print foi tirada logo que a página foi aberta. Ao scrollar a página, é possível ver outros quadradinhos cinzas aparecendo, até que as imagens se carreguem por completo, pois a ideia é que as imagens só carreguem quando estiver dentro da área em que o usuário estiver vendo.</figcaption>

<hr>

### 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! ^^

![PNG versus SVG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1nnorargtw17gqxiyxg.png)
<figcaption>Veja como a textura dos pelos do coelhinho é afetada no SVG (abra a imagem em nova guia e dê um zoom, se precisar)</figcaption>

![Tamanho de PNG versus SVG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjiqgtghm586or3jpy4j.png)
<figcaption>Aqui, por ter muitos detalhes, o SVG ficou muito mais pesado que o PNG</figcaption>

>>

* Você pode encontrar SVGs bem "limpinhos" no [Google Fonts](https://fonts.google.com/icons), no [Hero Icons](https://heroicons.com/) e no [Tabler Icons](https://tablericons.com/). Também é válido dar uma olhadinha na aba community do Figma, lá você pode encontrar arquivos como [esse](https://www.figma.com/community/file/1208013585957300648).

<hr>
#### Dicas extras:

>>

* Sempre esteja por dentro da licença das imagens que você pega por aí. Muitos sites como o [Pexels](https://www.pexels.com/pt-br/), [Freepik](https://br.freepik.com/) e [Unsplash](https://unsplash.com/pt-br) 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.