WEB DESIGN

AULA 3

Prof. Matias Peruyera

 CONVERSA INICIAL

Vamos fazer uma pausa em HTML e CSS para falar sobre as diferentes
maneiras de usar imagens na web e integrá-las ao código. Primeiro vamos falar
sobre princípios como características das telas e diferentes formas de armazenar
cores, para então falar de arquivos de imagem. Esta aula se divide nos seguintes
temas:

• Pixels e telas
• Cores no meio digital
• Arquivos raster
• Imagens vetoriais, de vídeo e no código
• Outras possibilidades para usar imagens

CONTEXTUALIZANDO

Dá pra fazer muitas coisas com código, mas em algumas situações

imagens – e arquivos de imagens – são indispensáveis.
No meio impresso, uma vez que uma imagem foi impressa, não temos
como saber nada sobre ela. Não é possível saber o formato do arquivo, nem se
o arquivo era excessivamente pesado – talvez seja possível imaginar que o
arquivo era leve demais, caso a qualidade tenha ficado ruim.
No digital, as pessoas vão perceber se uma imagem está grande demais.
Não nesses termos, mas pela demora em carregar uma página, por exemplo.
Daí a importância da otimização, que pode ser parte importante do seu trabalho.
Para conseguir um site otimizado, é fundamental saber trabalhar com imagens
e vídeo para conseguir a melhor qualidade possível na menor quantidade de
kilobytes possível.
Outra questão interessante é a possibilidade de interação entre imagem
e código, que pode trazer benefícios e ser usada de maneira criativa,
combinando imagem com programação, por exemplo. É importante saber
dessas possibilidades.

2
 TEMA 1 – PIXELS E TELAS

No meio digital, tudo acaba em pixel. Pelo menos tudo o que é visual.
Desde os displays monocromáticos dos celulares do começo do século até telas
de celulares de alta definição, o meio digital se transmite por pixels. Ainda que
não sejam compostos por pixels, como os arquivos HTML, serão transformados
em pixels ao serem exibidos em uma tela.
O nome pixel é uma contração do termo picture element – elemento de
imagem. Em si, ele não tem medida. Pense em uma imagem gerada por um
projetor, com pixels visíveis a olho nu, e na tela de alta resolução de um celular
recente, cujos pixels são minúsculos e praticamente indistinguíveis.

Figura 1 – Alterando a resolução de uma imagem no Photoshop

Fonte: Matias Peruyera.

As imagens raster, aquelas compostas por pixels, têm a informação da

resolução, que é o que determina a relação entre pixels e medidas “reais”, como
3
 polegadas e centímetros. A resolução é medida em pixels por polegada, mas é
mais comum usarmos o termo dpi – dots per inch, pontos por polegada. Uma
imagem de 600×600 pixels mede 8,3 polegadas (21,17 cm) se estiver a 72 dpi,
e 2 polegadas (5,08 cm) a 300 dpi (Figura 1).
Repare que na Figura 1 a opção “Resample” (reamostrar) está desligada.
Vamos aproveitar para te lembrar que reamostrar uma imagem para deixá-la
com mais pixels não é uma boa ideia, já que o programa “inventará” pixels e o
resultado será uma imagem borrada. Em algumas situações, você precisará usar
essa opção para diminuir a imagem, já que o melhor é usar as imagens no
tamanho mínimo para diminuir o espaço que elas ocupam e o tempo que
demoram para serem carregadas.

1.1 Telas de alta densidade

Em 2010, a Apple lançou o iPhone 4, dotado de uma tela de alta

resolução, na qual cada pixel foi “repartido” em quatro. O padrão 4K de
televisores e monitores fez algo similar com o padrão Full HD e foram
aparecendo monitores, telas de laptops e tablets com uma densidade maior de
pixels.
Por um lado, isso garantiu uma melhor qualidade e precisão na exibição
de imagens. Por outro, tornou-se necessário aumentar a quantidade de pixels
das imagens. Isso implicou em vários problemas no desenvolvimento, por
exemplo, de sites. Há várias soluções, como usar imagens vetoriais ou preparar
versões diferentes de imagens para serem carregadas em dispositivos com ou
sem telas de alta resolução.
Outro problema foram as medidas. Isso foi solucionado com os Pixels
CSS (W3C, 2019), que mantêm uma medida similar à das telas comuns em telas
de alta densidade de pixels (Figura 2). Ou seja, não é necessário se preocupar
com isso ao determinar medidas no HTML e CSS. Outras unidades, como em e
%, como são baseadas em pixels, seguem essa lógica.

4
 Figura 2 – Exemplo de renderização de elementos em telas normais e de alta
definição

Fonte: Matias Peruyera.

TEMA 2 – CORES NO MEIO DIGITAL

No meio digital, a lógica das cores é a síntese aditiva. Neste modelo, em

vez de partir do branco e adicionar tintas ou pigmentos, como acontece na
síntese subtrativa, partimos do preto – ausência de luz – e vamos acrescentando
luz.
As cores primárias da síntese aditiva são o vermelho (red), o verde (green)
e o azul (blue) – RGB. Cada pixel de telas coloridas têm um elemento de cada
uma dessas cores. Quando os três estão desligados, o resultado é o preto, e
quando estão ligados na potência máxima, o resultado é o branco. Outras
combinações da intensidade dessas três cores são percebidas por nós como
cores diferentes.
No meio digital, a quantidade de cores que podem ser geradas depende
da quantidade de bits destinada a armazenar a informação da cor. Essa
informação, junto à capacidade de uma tela de variar a potência de cada cor,
determina a profundidade de cor, que, por sua vez, determina a quantidade de
cores que podem ser exibidas. As primeiras telas coloridas, por exemplo,

5
 conseguiam exibir 16 intensidades para cada cor primária, o que resulta em um
total de 4.096 cores (16×16×16).
Tipicamente, arquivos digitais (imagens vetoriais, raster, vídeos, CSS)
usam o chamado true color, no qual são destinados oito bits para armazenar a
“intensidade” de cada cor primária – canal de cor. Um bit é a menor unidade de
armazenamento de informação, e pode ser 0 ou 1. Nesses oito bits, usando o
sistema binário, é possível armazenar os números do zero (00000000 em
binário) a 255 (11111111 em binário). Com isso, temos 256 tons para cada um
dos três canais, o que resulta em 16.777.216 cores possíveis (256×256×256).

Preste atenção!

Em algumas situações, oito bits não são suficientes. Na fotografia, por

exemplo, há profissionais que preferem trabalhar com imagens de 12 ou 16 bits,
para garantir uma precisão maior nas cores. Já há telas de celulares que
suportam o chamado deep color, que usa 10 bits para cada canal, ultrapassando
o bilhão de cores possíveis. Por enquanto, vamos ficar com os 8 bits, mas é
importante ficar de olho nessas mudanças tecnológicas.

2.1 Sistemas de cores

Claro que usar código binário não é algo prático no dia a dia. Mas usar
cores no modelo RGB também não é. Vamos ver outras maneiras de descrever
cores no meio digital, especificamente em CSS. Esses códigos podem ser
usados tanto para trabalhar com código como com imagens.

2.1.1 Nomes de cores

Nos exemplos que você viu até agora, indicamos as cores com termos
como black e blue. O CSS aceita 140 nomes de cores, comoblack, navy, tomato,
maroon e DeepPink – mude as cores no seu arquivo CSS para ver quais são.
Podem ser úteis, mas são pouco precisas. O que são 140 cores em um
universo de 16,8 milhões de cores? Você pode precisar de um vermelho que
seja um pouco diferente do red e então precisará defini-lo com mais exatidão.

6
 2.1.2 RGB

Especifica os valores de cada canal com números de 0 a 255, como já

explicamos.

color: rgb(0, 191, 255);

2.1.3 Hexadecimal, ou Hex

Além do binário e do decimal, computadores também costumam usar o

sistema hexadecimal para expressar números. Nesse sistema, em vez dos dez
algarismos de 0 a 9 são usados 16 algarismos, representados pelo 0 a 9 e
seguidos pelas letras A a F. Na prática, para representar os valores de 0 a 255,
são necessários dois caracteres em vez de três (Tabela 1).

Tabela1 – Números no sistema decimal, binário e hexadecimal

Número decimal Número binário (8 Número hexadecimal

bits)
00 00000000 00
01 00000001 01
02 00000010 02
03 00000011 03
04 00000100 04
05 00000101 05
06 00000110 06
07 00000111 07
08 00001000 08
09 00001001 09
10 00001010 0a
11 00001011 0b
12 00001100 0c
13 00001101 0d
14 00001110 0e
15 00001111 0f
16 00010000 10
17 00010001 11
18 00010010 12

7
 Ou seja, é outra maneira de expressar valores RGB. Na cor do exemplo
anterior, 0 vira 00, 191 vira bf e 255 vira ff. Juntamos tudo depois de um # e
temos a mesma cor, descrita com menos caracteres:

color: #00bfff;

2.1.4 HSL ou HSB

Este sistema descreve uma cor com base no matiz (hue), saturação
(saturation) e brilho (lightnessou brightness).
O matiz (H) é a propriedade que chamaríamos de cor e é medido em graus
(0 a 359). 0 é vermelho, 120 é verde, 240 é azul, e o resto são as cores
intermediárias. A saturação é medida em porcentagem e determina que tão
“pura” é a cor. 100% é a cor pura, e 0% é cinza. O brilho determina que tão
“clara” ou “escura” é a cor. 0% é preto, 100% é branco, e 50% é a cor “pura”. Em
CSS:

color: hsl(0, 100%, 50%);

A vantagem do HSL é que a informação da cor fica apenas no valor H.

Dessa maneira, conseguir variações da mesma cor é mais lógico do que no RGB
e Hex. Por exemplo, a cor hsl(202, 90%, 84%) é um tom da cor hsl(202, 90%,
50%). Muda apenas um número. Essas mesmas cores, em hexadecimal, são
respectivamente #0d9ef2 e #b1e0fb.

2.1.5 Canal alfa

Nas últimas versões do CSS, é possível acrescentar um valor alfa, que

indica a transparência da cor. Esse valor varia entre 0.0 (completamente
transparente) e 1.0 (completamente opaco). Repare que a sigla dos modos foi
acrescida da letra a:

color: hsla(0, 100%, 50%, 1.0);

color: rgba(0, 255, 128, 0.6);

Trabalhar com opacidade tem uma vantagem similar a trabalhar com o

HSL, que é a facilidade em conseguir tons de uma mesma cor modificando a

8
 transparência. A diferença é que, ao ser transparente, o elemento vai se mesclar
ao que estiver debaixo dele, o que pode ou não ser desejado.

Saiba mais

Treine sua capacidade de relacionar código a cores, com o jogo da

programadora Michelle Huang. Aproveite para observar o código que ela
escreveu: <https://codepen.io/itsmhuang/pen/oxaReK>. Acesso em: 8 set. 2021.

TEMA 3 – ARQUIVOS RASTER

Vamos falar de imagens, começando pelas imagens raster, que são

aquelas formadas por pixels. Vamos focar nos formatos usados para a internet.
O importante é que você saiba as aplicações de cada formato, para escolher
formatos adequados a cada tipo de imagem, equilibrando a qualidade da imagem
com o tamanho do arquivo – no processo que chamamos de otimização.
Considere que estes formatos de arquivo que estamos te apresentando,
por serem arquivos com algum tipo de compressão, não devem ser usados para
armazenar as versões originais de um trabalho. Esses arquivos devem ser
gerados a partir de arquivos sem compressão, como o formato PSD, nativo do
Photoshop, ou de arquivos de programas vetoriais. Tenha os melhores originais
possíveis, para gerar arquivos comprimidos a partir deles.

3.1 Arquivos JPEG

É dos formatos de imagem mais populares. A sigla JPEG, na verdade, se

refere a um padrão que define o método de compressão das imagens, criado e
mantido por um comitê – o Joint Photographic Expert Group. Virou o nome do
arquivo.
Um JPEG pode ser codificado de várias maneiras, sendo a codificação
JFIF a mais comum. Nessa codificação, as informações de luminosidade são
separadas das informações de cores (matiz). Estas últimas, por serem menos
perceptíveis, têm sua resolução diminuída. A seguir, a imagem é dividida em
quadrados de 8×8 pixels, e cada um é comprimido separadamente, para
conseguir representar as cores em menos espaço.

9
 Esse processo elimina dados da imagem, logo a compressão JPEG é uma
compressão com perda, ou lossy. Essa compressão é ajustável, quanto maior a
compressão, mais dados são eliminados e, consequentemente, a qualidade da
imagem piora (Figura 3). Em alguns programas, a palavra usada é qualidade.
Os arquivos JPEG suportam vários modos de cor, como escala de cinzas
e CMYK, voltados para o impresso, e RGB, que é o que nos interessa para o
meio digital.
As características do JPEG fazem que a compressão dele seja melhor
para imagens de tom contínuo, que precisam de uma grande quantidade de
cores, como fotografias, reproduções de ilustrações e pinturas, imagens com
gradientes e texturas, entre outras. Já para imagens com cores uniformes, há
outros formatos mais adequados, como o PNG – veja a comparação da Figura
4.

Figura 3 – Diferentes qualidades da compressão JPEG em uma imagem de 300

pixels de largura (ampliada)

Qualidade 0 (baixa) Qualidade 5 (média) Qualidade 8 (alta) Qualidade 12 (máx.)

28 Kb 38 Kb 53 Kb 117 Kb
Fonte: Matias Peruyera.

10
 3.2 Arquivos PNG

Um grupo de programadores descobriu que o algoritmo de compressão

LZW, usado nos arquivos GIF, era patenteado. Começou ali uma discussão
(Thought, 1995) que resultou na criação de um novo formato de imagem, para
substituir o GIF.
Surgiu assim a especificação com o nome PING, um acrônimo recursivo
que queria dizer “Ping Is Not Gif” (Ping não é GIF), que depois foi substituído
pela sigla PNG, que ganhou o novo significado Portable Network Graphics
(Gráficos Portáteis de Rede). É um formato aberto, que não usa patentes – o
que foi justamente o que provocou o seu desenvolvimento –, diferente do JPEG.
O PNG, assim como o GIF,armazena as cores em uma paleta, no sistema
chamado decor indexada. Os pixels não têm a informação completa da cor, mas,
sim, uma referência a uma paleta, uma lista das cores presentes no arquivo, que
diz de qual dessas cores o pixel é.
Com isso, optamos por exibir menos cores em troca de um arquivo mais
compacto. A paleta de um PNG pode ter apenas duas cores, mas nunca vai
chegar nos milhões de cores do JPEG. Por outro lado, isso garante a
uniformidade das cores, que pode ser desejável para alguns tipos de imagens.
A variedade mais usada, o PNG-8, é ideal para imagens com grandes áreas da
mesma cor, como logotipos, mapas, ilustrações, pictogramas, entre outros.
Geralmente, a compressão usada é uma compressão sem perda – lossless – o
que garante a qualidade dos arquivos.
O PNG também tem a variedade PNG-24, que armazena as cores de
maneira similar ao JPEG e por isso gera arquivos maiores.
Na Figura 4, você pode ver uma ilustração com áreas da mesma cor. Para
ser bem reproduzida, precisamos dessas quatro cores – incluindo o branco – e
de algumas cores intermediárias entre elas, para que a imagem não fique
serrilhada.
Como essa imagem não precisa de tantas cores, não precisamos dos
milhões de cores do JPEG. Essa quantidade de cores, inclusive, atrapalha. Veja
como uma compressão JPEG de baixa qualidade cria uma textura, um ruído –
artefatos, para usar um termo mais técnico – em uma área que deveria ser

11
 uniforme. O JPEG em qualidade máxima não tem esses artefatos visíveis, mas
o tamanho do arquivo é mais do que o dobro do PNG.
Um diferencial dos arquivos PNG é que eles suportam transparência. No
GIF, é possível determinar se um pixel é transparente ou não. Já no PNG, cada
pixel tem uma opacidade que pode ser graduada, além de manter a informação
de cor. Isso pode ser aproveitado de várias maneiras no desenho de produtos
digitais.

Figura 4 – Comparação de qualidade e tamanho de arquivo entre arquivos JPEG

e PNG. Detalhe de uma imagen de 100×100 pixels

JPEG JPEG PNG-8 com

qualidade média qualidade máxima paleta de 32 cores
3,7 Kb 10,6 Kb 4,7 Kb
Fonte: Matias Peruyera.

3.3 E o GIF?

O PNG cumpriu seu objetivo de substituir o GIF com vantagens.

Antigamente, o GIF – Graphics Interchange Format – era a opção para imagens
com cores uniformes. Também era interessante pela possibilidade de ser
animado. Essa opção foi deliberadamente deixada de lado no desenvolvimento
do formato PNG, já que as animações seriam substituídas por arquivos de vídeo
ou, mais recentemente, por programação, arquivos vetoriais, entre outros
recursos.
O GIF teve um retorno na forma de pequenas animações extraídas de
vídeos e filmes. Curiosamente, essas animações evidenciam todas as limitações
do formato: o mesmo instante animado pode precisar de 10 Mb no formato GIF,
enquanto esse mesmo instante, em um formato de vídeo, com qualidade muito
melhor, compressão adequada e som, precisa de uns 200 Kb. O GIF é tão
ineficiente para esse uso que vários sites convertem os GIFs enviados para

12
 arquivos de vídeo. Como o formato conseguiu ser usado para isso, se é tão
inadequado? Provavelmente porque o resultado é engraçado.

3.4 Novos formatos: WebP e Heif

É importante prestar atenção às novidades, principalmente no meio

digital. Sempre estão surgindo novidades e técnicas, que, se os navegadores
suportarem esses recursos, poderão ser usados.
É o caso de novos formatos de imagem, que, assim como os formatos
anteriores, buscam mais qualidade ocupando menos espaço. Alguns formatos
ficam populares, outros nem tanto. Os que têm se destacado são o formato
WebP, desenvolvido pela Google, e os formatos Heif/Heic,conhecidos por serem
o formato padrão da câmera do iPhone 11.
O importante é ficar de olho para ver se essas tecnologias podem ser
adotadas e se serão compatíveis com os dispositivos para os quais estamos
projetando um site ou outro produto digital. Inove, mas com cuidado.

Saiba mais

Uma técnica interessante para otimizar o uso de imagens raster é a folha

de sprites. Nessa técnica, várias imagens usadas em um site são agrupadas em
uma única imagem, que é reenquadrada usando CSS. A vantagem é que em vez
de fazer muitas requisições ao servidor, é feita apenas uma, otimizando o
carregamento do site e, em sites com grande tráfego, pode representar uma boa
economia de dinheiro. Atualmente, essa técnica não é tão usada, mas é
interessante de ser lembrada pela sua engenhosidade e pela maneira como são
combinados código e imagem.

TEMA 4 – IMAGENS VETORIAIS, DE VÍDEO E NO CÓDIGO

Além das imagens raster, é possível usar imagens vetoriais na web, com
as mesmas vantagens e limitações do meio impresso – vamos focar nas
vantagens. As imagens vetoriais também apresentam possibilidades de
interação, assim como os vídeos, que também ficaram mais fáceis de serem
usados na web.

13
 Também vamos ver outras maneiras de trabalhar com imagens, como uso
de dingbats e de estilos CSS.

4.1 SVG e outras imagens vetoriais

Primeiro, relembre: enquanto as imagens raster são compostas por pixels,

as imagens vetoriais têm suas linhas e formas definidas por coordenadas e
cálculos matemáticos. Você já deve saber disso e deve ter usado imagens
vetoriais em trabalhos voltados para o impresso.
Demorou um pouco, mas finalmente arquivos vetoriais podem ser usados
facilmente no web design. Antigamente, era bem mais complicado, mas agora
arquivos vetoriais podem ser usados praticamente da mesma maneira que uma
imagem raster.
Assim como no meio impresso, o formato vetorial tem a vantagem de
poder ser redimensionado sem ter perda de qualidade. Em uma imagem raster,
usar uma imagem maior implica em usar mais pixels, ou seja, mais dados a
serem transmitidos. Já o mesmo arquivo de imagem vetorial pode ser usado em
vários tamanhos.
Claro que estamos falando de arquivos vetoriais otimizados. Em alguns
casos, um arquivo vetorial muito complexo pode ser mais pesado do que um
arquivo de imagem, tanto no tamanho do arquivo como no processamento que
ele exigirá do navegador. Nesses casos, melhor converter para o tipo de arquivo
raster adequado. Também há algumas limitações quanto ao uso de cores.
Há vários formatos de imagens vetoriais em uso na web, mas o
recomendado pelo W3C é o SVG –Scalable Vector Graphics (Gráficos vetoriais
escaláveis, no sentido de mudar de tamanho). É um formato aberto – assim
como o PNG –, que segue o padrão XML1 para descrever osvetores, textos e
posição de imagens raster que estejam inseridos nele (W3C, 2011).
Tipicamente, você vai desenhar e salvar arquivos SVG em programas de
de ilustração vetorial – como o Inkscape, Sketch, ou Illustrator. Além disso, como
esse formato respeita os padrões XML, eles têm um código legível, que pode ser
modificado usando um editor de texto, assim como os HTML e CSS. O seguinte

1Padrão muito similar ao HTML, geralmente usado para armazenar informações.

14
 código, por exemplo, gera a imagem que foi usada no exemplo da Figura 4.
Copie, cole em um arquivo de texto, salve com a extensão SVG, e veja como ele
abre em navegadores e em programas de ilustração vetorial. Tente descobrir
para que serve cada linha, e mude o código para ver que mudanças acontecem.

<?xml version="1.0" encoding="utf-8"?>

<svgversion="1.1"id="Layer_1"xmlns="http://www.w3.org/2000/svg"xmlns:x
link="http://www.w3.org/1999/xlink"x="0px"y="0px"
viewBox="0 0 200 200"style="enable-background:new 0 0 200
200;"xml:space="preserve">
<styletype="text/css">
.st0{fill:#0D5758;}
.st1{fill:#62C8D3;}
.st2{fill:#D67827;}
</style>
<circleclass="st0"cx="100"cy="100"r="88.2"/>
<polygonclass="st1"points="180,100 101.3,161.2 20,100 101.3,38.8 "/>
<circleclass="st2"cx="100"cy="100"r="37.6"/>
</svg>

Veja também que esse código ocupa apenas 526 bytes,

aproximadamente 1/9 do tamanho do arquivo PNG da Figura 4. Esse código
também pode ser embutido em um arquivo HTML, o que pode otimizar o
carregamento de um site.
Além disso, os arquivos SVG podem receber estilos CSS, podem ser
animados, programados, podem ser interativos… várias possibilidades. É
possível usá-los até para criar pequenos aplicativos online.

4.2 Embutindo imagens no código

Geralmente, as imagens de um HTML são armazenadas em arquivos

separados. Porém, em algumas situações, pode ser interessante embutir essas
imagens no HTML. Isso pode otimizar o carregamento de um site, por exemplo,
já que em vez de dois ou mais arquivos vai ser necessário carregar apenas um
– um pouco mais pesado, mas pode ser mais eficiente.
Como já comentamos, é possível fazer isso com arquivos SVG, mas há
outros exemplos. Arquivos de imagem raster podem ser armazenados em um
HTML usando Base64, que é uma maneira de codificar a informação binária –
que é a maneira que os arquivos de imagem armazenam suas informações – em
forma de texto, o que permite armazenar a informação dentro do arquivo HTML
ou similares (MDN, 2020).

15
 Como sempre, é importante testar e verificar, na prática, qual a melhor
solução.

4.3 Vídeo e áudio

Assim como aconteceu com os arquivos vetoriais, ficou mais fácil

incorporar arquivos de vídeo ao código HTML. Eles podem ser usados para além
de exibir vídeos. No começo dos anos 2010, por exemplo, era típico pôr um vídeo
curtíssimo, monocromático, como fundo em tela cheia na página principal de um
site. Os vídeos substituíram os GIFs e também podem ser controlados por
código.
O MP4 é o formato mais comum, mas, assim como acontece com os
arquivos de imagem, é importante prestar atenção a novidades e novos formatos
que podem ser mais vantajosos.
Também é importante pensar na compressão, que no caso dos vídeos
não depende tanto do tipo de arquivo, mas, sim, do codec (codificador/
decodificador) usado.
De maneira mais simples, o mesmo acontece com arquivos de áudio.

TEMA 5 – OUTRAS POSSIBILIDADES PARA USAR IMAGENS

Para usar imagens pequenas, como ícones, ilustrações simples, ou

elementos da interface, temos a possibilidade de armazenar essas ilustrações
em fontes. Em vez de letras, essas fontes armazenam desenhos. Similar ao uso
desses dingbats, temos os emojis, que se comportam de maneira simlar aos
dingbats, porém são muito mais populares.
Como curiosidade, vamos também te indicar alguns exemplos de como é
possível usar código CSS para produzir ilustrações.

5.1 Fontes dingbats

Você já deve ter encontrado em seu computador uma fonte que em vez
de letras tinha desenhinhos. A ideia dessas fontes é fornecer desenhos que
possam ser usados como ícones sem a necessidade de carregar novas imagens.
São as chamadas fontes dingbats.

16
 A fonte Webdings é um exemplo disso. Em vez de carregar uma imagem,
ou um ícone, escrevíamos a letra correspondente ao ícone que queríamos que
aparecesse, e configurávamos o estilo para usar a fonte dingbat que quisessmos
– geralmente, a Webdings, que sabíamos que provavelmente estaria instalada
no computador da maioria das pessoas que usasse nosso site.
Com a possibilidade de usarmos outras fontes, também é possível
usarmos fontes dingbats para situações nas quais precisemos de ícones ou
ilustrações simples. Há ícones disponíveis no Google Fonts, que podem ser
usados de maneira similar às fontes.
Assim como com textos, é possível usar CSS para formatar essas
ilustrações e refinar nosso trabalho. Como sempre, é bom testar qual alternativa
é a mais eficiente, porque, na prática, o resultado pode ser diferente do que
esperamos.

5.2 Emojis

Também ficam armazenados em fontes, o que os torna similares aos

dingbats nesse aspecto. Eles são suportados nos navegadores atuais, já vêm
embutidos nos sistemas operacionais e têm qualidade suficiente para serem
usados em tamanhos grandes. Em algumas situações, podem ser adequados e
dar um tom mais informal ao seu trabalho, mas podem ter suas contraindicações
e devem ser usados com moderação (Foong, 2019).

5.3 Ilustrações em CSS

O padrão CSS3 apresentou várias novidades que foram aproveitadas para fazer
ilustrações de várias complexidades. Em vários casos, se torna mais um
exercício de código do que algo que possa ter aplicações práticas. Veja alguns
exemplos aqui: <https://www.bypeople.com/50-impressive-css-drawings>; e um
tutorial aqui: <https://redstapler.co/css-drawing-tutorial-for-beginners>.

17
 TROCANDO IDEIAS

Quais as maiores diferenças entre trabalhar com imagens para a web e

para o impresso? Quais recursos das ferramentas que vocês usam sempre são
mais valiosos? Discuta com colegas.

NA PRÁTICA

Provavelmente você vai usar muitas imagens para seu portfólio. Prepare
os arquivos da maneira mais otimizada possível. Defina um tamanho que seja
adequado para um site e mantenha um padrão. A partir dos arquivos originais,
gere imagens que possam ser usadas em um site. Veja quais imagens
funcionam melhor em JPEG, quais em PNG e se é possível usar um SVG. Deixe
tudo pronto para ser inserido.

FINALIZANDO

Essa pausa no aprendizado de código foi fundamental para aprender

sobre gerar imagens e que, apesar de ser das tarefas mais comuns no design
gráfico, tem várias peculiaridades importantes quando se pensa no meio digital.

18
 REFERÊNCIAS

FOONG, N. W. Emoji Are the Future of Effective Web Design. Better

programming, 2019. Disponível em: <https://betterprogramming.pub/emoji-are-
the-future-of-effective-web-design-a9bf98b18616>. Acesso em: 8 set. 2021.

GOOGLE GROUPS. Thoughts on a gif-replacement file format. 1995.

Disponível em:
<https://groups.google.com/g/comp.graphics/c/tylpVt2y9s8/m/eHWKNVLYMRE
J>. Acesso em: 8 set. 2021.

MDN Web Docs. Base64. Mozilla: 2020. Disponível em:

<https://developer.mozilla.org/en-US/docs/Glossary/Base64>. Acesso em: 8 set.
2021.

W3C. CSS Values and Units Module Level 3. 2019. Disponível em:
<https://www.w3.org/TR/css3-values>. Acesso em: 8 set. 2021.

_____. Scalable Vector Graphics (SVG) 1.1 (Second Edition). 2011.

Disponível em: <https://www.w3.org/TR/2011/REC-SVG11-
20110816/intro.html>. Acesso em: 8 set. 2021.

19