Ao gravar imagens para a Web temos de ter em conta várias características, de forma a tornar o site mais rápido a carregar, facilitar a pesquisa e termos menos peso nos backups.
Por enquanto, o formato de ecrã mais utilizado na Web é o 1366x768px com 72DPI (pixéis por polegada), para monitores de PCs, o que faz que qualquer layout para web deva ter em conta o tamanho do browser, quando maximizado, ajustado a este formato. Ao retirarmos aos 768px de altura do ecrã as medidas (em pixéis) do cabeçalho do browser (com os menus, barra de bookmarks, etc) e a parte de baixo do ecrã, com a taskbar (barra de ferramentas) do sistema operativo, o resultado são, aproximadamente, 600px de altura.
Estes 600px de altura são a medida a ter em conta ao desenhar um layout de forma a todos os elementos que temos no browser sejam visíveis, antes de fazer scroll down, e é chamada Foldline (linha de dobra), tal como acontece nos jornais, que estão dobrados a meio e só se a informação visivel interessar, se pega no jornal e é aberto.
Este formato médio de 1366x768px irá mudar dentro de poucos anos, dado o aumento das resoluções de ecrã, e o próximo formato médio vigente será os 1920x1080px (Full-HD), que já temos de ter em conta ao preparar os conteúdos (tamanho de imagens, etc).
Pode ser consultado as estatisticas da utilização do tamanho de ecrãs (Desktop, Tablet e Mobile) em: https://gs.statcounter.com/screen-resolution-stats
Nos parágrafos anteriores, foram descritos uma estatística para utilização de PCs, no entanto os novos formatos da Apple, com Retina display, tem resoluções maiores que os 1920x1080px, como a do MacBook Pro de 2021, com a resolução de 3456x2234px com 254DPI, ou o iMac com 4480x2520px com 218DPI, mas a quantidade de utilizadores com estas características de ecrã é mínima.
Ao desenvolver um website normalmente existem dois formatos, o “Full-width” e o “Boxed”.
No formato “full-width” todo o conteúdo é disposto em toda a largura do “browser”, desde a margem esquerda à direita.
No formato “Boxed”, todo o conteúdo é contido habitualmente ao centro do “browser”. No caso do “Elementor”, por defeito, a largura “Boxed” é de 1140px.
Com a resolução de ecrã média de 1920x1080px com 72DPI, as imagens devem ser preparadas tendo esta medida em conta. As imagens captadas por máquinas fotográficas tem resoluções muito maiores, em tamanho e resolução (240DPI, 300DPI), tal como as imagens retiradas de bancos de imagem.
Ao preparar uma imagem para Web, deve ser feito sempre uma diminuição da imagem para o tamanho máximo da utilização em que será utilizada. Se a imagem for demasiado pequena e for forçado um tamanho maior, esta vai perder qualidade e ficar desfocada ou pixelada.
Nos próximos dois casos são apresentados o redimensionamento para “Full-width” e para “Boxed”.
A imagem será utilizada para preencher todo os espaço do browser, em largura e em altura.
Sendo assim a largura máxima será de 1920px (actualmente).
Ao redimensionar, ter em conta que a imagem deve estar sempre no modo de cor RGB e a resolução deve ser sempre 72 DPI (pontos por polegada).
Tamanho Full Screen (ecrã total):
A imagem depois de redimensionada, deve ser gravada para Web no formato de ficheiro correcto e bem nomeada (ver mais em baixo). O ficheiro final ficou com 290Kb de tamanho do ficheiro JPG, equanto o original tinha 3,64Mb.
Aqui um exemplo da utilização da imagem em formato “Full-width”:
Caso imagem seja utilizada apenas no espaço contido “boxed”, então deverá ter apenas o tamanho da largura ocupada, neste caso a largura de boxed é de 1140px, e a imagem é redimensionada para um tamanho nunca inferior, nesta imagem optou-se por 1200px de largura e o ficheiro JPG depois de gravado ficou com 134Kb de tamanho.
Se a imagem não for utilizada em ecrã total, então não necessita ter as dimensões Full-Hd, e deve ter apenas o tamanho que irá ocupar, por exemplo: se a imagem irá ocupar apenas a parte central do site, no formato “boxed”, então deverá ter 1200px de largura, dado que a largura das secções “boxed” tem em média esta medida (o Elementor usa 1140px por defeito), e se for utilizada como imagem de destaque com 400px de largura (para grelhas de publicação com 3 colunas), então esta imagem deve ter 800px de largura e dará para ambas as situações.
Antes de passarmos à gravação de imagens para a Web, é importante conhecer os formatos de imagem mais comuns na Web:
JPG: Este é um formato de compressão, e é usado de uma forma geral sempre que imagem não tenha transparência.
Na exportação de JPG deve ser usada a máxima compressão sem perder qualidade, por exemplo na gravação para Web no Photoshop (File > Export > Save for Web) de uma forma geral deve ser usado o Preset “JPG High” com 60% de compressão, este nível de compressão pode ser baixado até aos 50% ou 40%, caso não perca muita qualidade.
PNG: Este é um formato para web que deve ser utilizado sempre que a imagem tem transparência, por exemplo: imagens recortadas, ícones ou logotipos (apesar de neste caso se dever ter em conta o formato SVG.
SVG: É o formato vetorial para Web, deve ser utilizado em grafismo simples vetorial, por exemplo logotipos, ícones ou outros elementos gráficos. O formato vetorial nunca perde definição, ou seja, enquanto uma imagem (PNG ou JPG) perde definição se for utilizada com um tamanho superior ao que estava definida, o formato vetorial nunca perde definição.
Para exportar em SVG, a imagem não pode ter linhas e todas as formas devem estar fechadas. Caso haja linhas, todas devem ser convertidas em formas fechadas. As formas devem ser minimizadas de forma ao ficheiro ser mais leve.
Este é um formato vetorial, logo, não devem haver imagens (bitmaps, ou efeitos com sombras por exemplo), apesar de o SVG poder conter o código destas imagens, mas não foi para isso que este formato foi criado.
Se o logotipo, ícone ou elemento gráfico for gravado em preto (RGB 0/0/0), a cor pode ser atribuída através de CSS (linguagem de estilo para HTML).
Por exemplo: Num caso de um Website provavelmente teremos de exportar em SVG um logotipo com várias cores, e outro apenas em preto (0/0/0) para podermos usar como versão monocromática e a cor ser atribuída por CSS, então apenas necessitamos de 2 ficheiros.
Redimensionar as imagens para o tamanho necessário, se for full-width 1920px de largura, se não for como elemento boxed 1200px de largura.
Sempre com 72 DPI de resolução.
Exportar/salvar para web, sempre em JPG com 60 ou 50% de compressão no Photoshop, se a imagem tiver transparência (e apenas se tiver transparência) gravar em PNG e forem vetores, gravar em SVG.
Cuidado com o tamanho, normalmente menos de 100kb, imagens grandes ou complexas menos de 500kb e só excepcionalmente mais que 1mb.
Depois de redimensionada aimagem deve ser exportada de modo a ter o ideal comportamento na Web, com o menor “peso” de ficheiro possivel, para ser mais rápida a carregar ao visitar o Website e com o formato adequado (clique aqui ver secção de formatos de imagem).
De seguida são identificados os passos para a exportação de uma imagem para Web:
De seguida é clicado em “Save” (gravar), onde se irá nomear a imagem e escolher a pasta onde será guardada:
Nomear as imagens com títulos compreensíveis, com localização e tamanho, sem espaços nem caracteres diferentes de A-Z e 0-9.
Este é um aspeto muito importante na gravação das imagens. A maioria das imagens retiradas da web, bancos de imagem ou máquinas fotográficas, são nomeadas com códigos.
Na utilização de imagens em Website, devem ser atribuídos nomes compreensíveis, para facilitar as pesquisas dentro do próprio site, já que rápidamente o número de imagens pode ser muito grande.
Na Web deve ter em atenção que a linguagem usada deve ter os caracteres alfabéticos e numéricos e não pode ter:
Na nomeação os termos compreensíveis para pesquisa pode diferir de site para site, mas deve ter em conta os termos de pesquisa lógica do site onde vão existir estas imagens, por exemplo:
Nome do sítio onde estará a imagem – Nome da imagem ou tags da imagem – tamanho . Extensão do ficheiro
Desta forma, é fácil de perceber ao ler o título da imagem onde pertence a imagem, qual o tema e qual o tamanho.
Exemplo de nomeação para o site BrainPower:
home_banner-ironstone-mulher_jovem_sorrir-600×600.jpg
Exemplo de nomeação para o site Boxing Lisboa:
seccao_do_website–nome_da_imagem(torneio, situacao)-tipologia_de_imagem(combate, retrato, etc)-intervenientes–Autor–Data–Dimensoes.Extencao
arquivo-parque_mayer_100_anos-combate-manel_dias_jaquim_antunes-gustavo_pereira-2022-1920×800.jpg
Portimao_box_cup_2022-header-gustavo_pereira-1700×1250.jpg
Portimao_box_cup_2022-combate-biser_bekirov-jose_silva-1200×800.jpg
Home-header-arquivo-gustavo_pereira-1920×2160.jpg
Home-header-arquivo-gustavo_pereira-mobile-720×1280.jpg
Quanto mais pesadas forem as imagens, mais lento e “pesado” fica o website e a velocidade é importantíssima na navegação.
Quanto menor o peso, melhor. Por exemplo uma imagem para full-width em ecrã total deve ter em média 200/400Kb, mas este tamanho pode ser muito aumentado conforme a complexidade da imagem – quanto mais complexa a imagem, menor a capacidade de compressão.
Se tivermos uma imagem com um peso do ficheiro com mais de 1Mb, devemos questionar este tamanho e perceber se o podemos.
Neste caso, no local onde serão inseridas as dimensões das imagens não necessitam ocupar toda a largura do ecrã “full width” ou “boxed”, então as imagens serão redimensionadas apenas para o tamanho necessário.
Em desktop as imagens tem 360px de largura, mas em mobile terão 700px (quando a janela do browser reduz abaixo dos 768px neste site), então deve ser tido em conta o tamanho maior. Neste caso as imagens irão ser redimensionadas para 800px.
As imagens originais vieram de bancos de imagem com dimensões enormes e resoluções diferentes (uma com 300DPI). Tem de ser reduzidas para 800px e ter a resolução de 72DPI.
Boxed: conteúdo contido no centro do site e não ocupa toda a largura – Full Width
Browser: Software para utilizar a Web (Navegador).
Imagem de destaque ou Featured image: Imagem utilizada nas grelhas de publicações, que a vai buscar a cada publicação (post/artigo) na secção de Imagem de destaque/Featured Image.
Full Width: largura total, da margem esquerda à margem direita, do browser.
Scroll down: barra de deslocamento vertical do browser, caso o site seja maior que o tamanho visível.
