{"id":77212,"date":"2019-01-20T00:00:00","date_gmt":"2019-01-20T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2019\/01\/20\/formatos-de-imagem\/"},"modified":"2019-01-20T00:00:00","modified_gmt":"2019-01-20T00:00:00","slug":"formatos-de-imagem","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/formatos-de-imagem\/","title":{"rendered":"Todos os formatos de imagem explicados e avaliados para voc\u00ea"},"content":{"rendered":"\n

As imagens s\u00e3o os conte\u00fados mais divulgados nas redes sociais (72,4%) e os que mais geram engajamento (40,8%), segundo a pesquisa Social Media Trends 2017<\/a>.<\/p>\n\n\n\n

Ou seja, mais cedo ou mais tarde, vai surgir a necessidade de criar imagens <\/a>para suprir sua estrat\u00e9gia de Marketing Digital<\/a> \u2014 seja durante a customiza\u00e7\u00e3o de um template, seja para as redes sociais<\/a>, ou para a cria\u00e7\u00e3o de um ebook<\/a>.<\/p>\n\n\n\n

E \u00e9 nesse momento que nos deparamos com diversas siglas esquisitas n\u00e3o fazem muito sentido numa primeira olhada. Sabe, aquelas que vem no fim do nome do arquivo e parecem n\u00e3o fazer diferen\u00e7a?<\/p>\n\n\n\n

MAS FAZEM!<\/p>\n\n\n\n

S\u00e3o os diferentes formatos de imagens<\/b>.<\/p>\n\n\n\n

Na verdade, as siglas s\u00e3o as extens\u00f5es correspondentes aos formatos<\/strong>. E \u00e9 sobre isso que eu vou falar hoje.<\/p>\n\n\n\n

Mas antes, voc\u00ea precisa entender o que \u00e9 formato<\/strong> e o que \u00e9 tipos<\/strong> de imagem.<\/p>\n\n\n\n[post-table-index]
<\/p>\n\n\n[rock-convert-pdf id=”42917″]\n\n\n\n

Tipos de imagem<\/h2>\n\n\n\n

Inicialmente, vamos entender que \u2014 assim como j\u00e1 foi visto no nosso post exclusivo sobre design gr\u00e1fico<\/a> \u2014 existem dois tipos de imagens, digitalmente falando:<\/p>\n\n\n\n

Bitmap<\/b> e vetor<\/b>.<\/p>\n\n\n\n

N\u00e3o confunda formatos<\/strong> com tipos<\/strong>! Esses dois tipos de imagens ser\u00e3o abordadas neste artigo sobre formatos de imagens<\/strong>. Eles possuem algumas diferen\u00e7as e afetam diretamente a forma como s\u00e3o utilizados.<\/p>\n\n\n\n

Bitmap<\/h3>\n\n\n\n

Tamb\u00e9m conhecido como “mapa de bits”(tradu\u00e7\u00e3o literal) ou imagem rasterizada (do ingl\u00eas raster<\/i>) esses s\u00e3o os tipos de imagens mais comuns.<\/p>\n\n\n\n

Bitmaps s\u00e3o, literalmente, um mapa de bits<\/strong>. Isso significa que a imagem \u00e9 formada por diversos pontos min\u00fasculos (pixels).<\/p>\n\n\n\n

A cada um desses pixels \u00e9 designada uma cor e, atrav\u00e9s de coordenadas X e Y, esses pixels de cores distintas s\u00e3o posicionados em uma malha e, assim, formam uma imagem.<\/p>\n\n\n\n

Fotos s\u00e3o bitmaps<\/strong>.<\/p>\n\n\n\n

Veja o exemplo:<\/p>\n\n\n\n

\"formatos<\/figure><\/div>\n\n\n\n

Vetores<\/h3>\n\n\n\n

S\u00e3o imagens que se baseiam em pol\u00edgonos formados por pontos. Estes pontos s\u00e3o interpretados pelo computador levando em conta as suas dist\u00e2ncias.<\/p>\n\n\n\n

Sendo assim, os vetores s\u00e3o infinitamente escal\u00e1veis<\/strong>. Voc\u00ea pode aumentar um vetor o quanto quiser pois n\u00e3o h\u00e1 perda de resolu\u00e7\u00e3o no processo.<\/p>\n\n\n\n

\"formatos
Imagem vetorial<\/figcaption><\/figure><\/div>\n\n\n\n

Vetores apresentam uma quantidade de detalhes menor que o bitmap pelas suas limita\u00e7\u00f5es, por\u00e9m existem artistas que desenvolveram t\u00e9cnicas usando vetores que aproximam os gr\u00e1ficos de fotos reais, como no exemplo:<\/p>\n\n\n\n

\"formatos<\/figure><\/div>\n\n\n\n

Agora que sabemos a diferen\u00e7a entre estes dois tipos de arquivos, vamos aprender sobre os diferentes formatos de imagem<\/strong>.<\/p>\n\n\n[rock-convert-cta id=”65694″]\n\n\n\n

Quais s\u00e3o os formatos de imagem?<\/h2>\n\n\n\n

BMP<\/h3>\n\n\n\n

O significado desta sigla \u00e9, literalmente, bitmap<\/i>.<\/p>\n\n\n\n

Na d\u00e9cada de 90 encontrava-se muitas imagens com a extens\u00e3o “.BMP<\/i>” na internet. O problema \u00e9 que as taxas de compress\u00e3o dos arquivos BMP s\u00e3o muito baixas, o que faz com que os arquivos fiquem muito pesados (para que a imagem n\u00e3o perca resolu\u00e7\u00e3o).<\/p>\n\n\n\n

Sendo assim, n\u00e3o recomendamos o uso deste formato<\/b>.<\/p>\n\n\n\n

TIFF<\/h3>\n\n\n\n

Tamb\u00e9m pode ser encontrado como apenas TIF, este formato de imagem \u00e9 muito utilizado para arquivos que v\u00e3o ser impressos.<\/p>\n\n\n\n

Por ser um formato muito vers\u00e1til (mant\u00e9m a resolu\u00e7\u00e3o, possibilita com p\u00e1ginas e camadas, etc), \u00e9 tamb\u00e9m um formato bastante pesado.<\/p>\n\n\n\n

N\u00e3o indicado para o uso digital<\/b>.<\/p>\n\n\n\n

JPEG<\/h3>\n\n\n\n

Ou apenas JPG, esse \u00e9 o mais famoso dos formatos utilizados digitalmente. Sua taxa de compress\u00e3o ajust\u00e1vel \u00e9 o que encoraja a sua utiliza\u00e7\u00e3o nos meios digitais.<\/p>\n\n\n\n

Atrav\u00e9s dessa possibilidade, voc\u00ea pode equilibrar qualidade\/tamanho da imagem.<\/p>\n\n\n\n

Ainda assim, mesmo no m\u00ednimo de compress\u00e3o m\u00ednima, o tamanho do arquivo n\u00e3o fica t\u00e3o grande (se for uma imagem pequena, que \u00e9 o ideal para a internet).<\/p>\n\n\n\n

S\u00e3o altamente recomendadas para os meios digitais<\/b>, por\u00e9m n\u00e3o possuem o canal alpha (transpar\u00eancia)<\/a>.<\/p>\n\n\n\n

GIF<\/h3>\n\n\n\n

A sigla significa Graphics Interchange Format <\/i>(formato para interc\u00e2mbio de gr\u00e1ficos) e, a princ\u00edpio, foi o primeiro formato de imagens com alta taxa de compress\u00e3o (reduzindo sensivelmente o tamanho das imagens e possibilitando um download mais r\u00e1pido).<\/p>\n\n\n\n

Popularizou-se por possuir a tecnologia interlaced, que possibilita que a imagem seja carregada gradualmente. Sendo assim, o usu\u00e1rio poderia interromper o carregamento tendo apenas parte da imagem carregada.<\/p>\n\n\n\n

Outro fator que encorajou muito o uso dos GIFs nos prim\u00f3rdios da internet foi a possibilidade de se ter imagens com o fundo transparente (canal alpha<\/a>) e tamb\u00e9m por poder ser uma m\u00eddia n\u00e3o est\u00e1tica.<\/p>\n\n\n\n

Os GIFs possuem uma limita\u00e7\u00e3o de cores: apenas 256 cores. Isso faz com que imagens muito complexas percam muitos detalhes.<\/p>\n\n\n\n

Nos dias de hoje, GIFs s\u00e3o praticamente um sin\u00f4nimo para anima\u00e7\u00f5es. Este formato possibilita que diversas imagens sejam exibidas em sequ\u00eancia, gerando um clipe sem \u00e1udio.<\/p>\n\n\n\n

\"formatos
Imagem em gif<\/figcaption><\/figure><\/div>\n\n\n\n

GIFs animados apresentam uma alt\u00edssima taxa de engajamento, sejam os seus GIFS engra\u00e7ados e memes, sejam ele um infogr\u00e1fico animado, como esse<\/a>.<\/p>\n\n\n\n

Recomendamos muito que sejam utilizados na sua estrat\u00e9gia de marketing digital<\/b>. Produza anima\u00e7\u00f5es exclusivas, tomando cuidado com a quantidade de detalhes e cores.<\/p>\n\n\n\n

Aprenda a fazer os seus pr\u00f3prios GIFs clicando aqui<\/a>.<\/p>\n\n\n\n

GIF est\u00e1tico X GIF animado<\/h4>\n\n\n\n

Como j\u00e1 foi dito, o GIF \u00e9 um formato de imagem bem vers\u00e1til que, quando foi criado, apresentava possibilidades inovadoras para a \u00e9poca, tornando-o bem popular em toda a internet!<\/p>\n\n\n\n

Com a evolu\u00e7\u00e3o dos meios de transmiss\u00e3o de dados, a internet ficou mais r\u00e1pida e as imagens no formato GIF est\u00e1ticas ficaram muito datadas.<\/p>\n\n\n\n

Queremos imagens n\u00edtidas e detalhadas, e a limita\u00e7\u00e3o de 256 cores dos GIFs fez com que as imagens nesse formato ca\u00edssem em desuso.<\/p>\n\n\n\n

Por mais que elas possibilitem transpar\u00eancia (canal alpha), essa transpar\u00eancia tem muitas limita\u00e7\u00f5es e apresentam serrilhamentos (quando os pixels ficam muito expostos e parece que existe um erro na imagem). Logo, quando precisamos de imagens est\u00e1ticas com transpar\u00eancia, usamos PNG.<\/p>\n\n\n\n

Seria essa a morte do GIF? Definitivamente n\u00e3o!<\/b><\/p>\n\n\n\n

A versatilidade do GIF fez com que ele continuasse forte na internet, por possibilitar anima\u00e7\u00f5es<\/strong>!<\/p>\n\n\n\n

Suas anima\u00e7\u00f5es s\u00e3o apresentadas em aproximadamente 15 frames por segundo (ou seja, 15 imagens exibidas a cada segundo). Essa velocidade faz com que as limita\u00e7\u00f5es de cores dos GIFs n\u00e3o sejam t\u00e3o percept\u00edveis (ou simplesmente n\u00e3o incomodem tanto).<\/p>\n\n\n\n

Al\u00e9m do que, por mais que a qualidade n\u00e3o seja incr\u00edvel e os movimentos n\u00e3o sejam t\u00e3o fluidos, o carregamento \u00e9 muito r\u00e1pido. Ou seja, uma coisa compensa a outra, e o GIF animado continuou popular.<\/p>\n\n\n\n

PNG<\/h3>\n\n\n\n

Podemos dizer que o PNG \u00e9 como um GIF 2.0.<\/p>\n\n\n\n

A sigla significa Portable Network Graphics<\/i>.<\/p>\n\n\n\n

Em 1995 o algoritmo de compacta\u00e7\u00e3o do GIF (LZW) foi patenteado. Assim sendo, a Adobe investiu na cria\u00e7\u00e3o de um novo formato que pudesse substituir o GIF e, porque n\u00e3o, torn\u00e1-lo ainda melhor.<\/p>\n\n\n\n

O PNG \u2014 embora n\u00e3o suporte anima\u00e7\u00f5es \u2014 apresenta diversas vantagens em rela\u00e7\u00e3o ao GIF.<\/p>\n\n\n\n