O que posso fazer para reduzir o tamanho do arquivo das minhas imagens?


15

Trabalhando com alguns temas do wordpress, modifiquei alguns arquivos de imagem e notei que minhas versões editadas às vezes são 3-4x maiores que o original (salvas no mesmo formato). Não quero degradar a qualidade. Quais são algumas das maneiras de diminuir o tamanho de um arquivo para que ele seja carregado mais rapidamente?

No momento, por exemplo, eu uso o Photoshop e defino o controle deslizante de qualidade da imagem para '8' (em 10).

Respostas:


14

A Smashing Magazine publicou 2 excelentes artigos sobre otimização PNG e JPG .

Eles são bastante detalhados, explicando detalhadamente algumas coisas que você talvez não saiba sobre os formatos e suas implementações. Por exemplo, o artigo JPEG: "Lembre-se de que quando você define a Qualidade abaixo de 50 no Photoshop, ele executa um algoritmo de otimização adicional chamado amostragem de cores, que calcula a média da cor nos blocos de oito pixels vizinhos".

Ambos os artigos abordam técnicas específicas que você pode usar no Photoshop para preparar seus arquivos para uma maior compactação. O que é muito mais eficaz do que as técnicas usadas depois que um arquivo foi salvo.

Depois de salvar esses arquivos ou em arquivos que você não tem a sorte de ter arquivos de origem em camadas para ajustar no Photoshop, ainda há mais compactação para torcer esses arquivos.

Eu uso um aplicativo para Mac chamado ImageOptim . Do site deles:

O ImageOptim otimiza as imagens - para que ocupem menos espaço em disco e carreguem mais rapidamente - encontrando os melhores parâmetros de compactação e removendo comentários e perfis de cores desnecessários. Ele lida com animações PNG, JPEG e GIF.

O ImageOptim fornece GUI para várias ferramentas de otimização: AdvPNG da AdvanceCOMP, OptiPNG , PngCrush , JpegOptim , jpegtran da libjpeg, Gifsicle e, opcionalmente, PNGOUT .

É excelente para publicar imagens na Web (reduz facilmente as imagens “Salvas para a Web” no Photoshop) e também é útil para diminuir os aplicativos Mac e iPhone.

Pedaco de bolo. Arraste suas imagens (ou pastas de imagens) para a janela, ele percorre todas essas ferramentas, aprimorando os esquemas de compactação e removendo metadados e informações de perfil de cores desnecessárias (que não são amplamente suportadas de qualquer maneira - você deve corrigir perfis de cores antes de salvar, não salvando e incorporando-os).

Todas as ferramentas vinculadas nessa citação têm versões do Windows / Linux / Mac, exceto o PNGOUT, mas, felizmente, alguém portou o PNGOUT para o OS X e Linux, porque são muito atenciosos. Se você optar por usar o ImageOptim, ele incluirá tudo, exceto PNGOUT, no .app, então pegue a porta PNGOUT, solte-a em / usr / local / bin (ou em qualquer outro lugar) e informe ao ImageOptim onde está.

Não é incomum para mim, especialmente com imagens PNG, ver o tamanho dos arquivos cair mais de 30%, mesmo depois de salvar no "Save For Web & Devices" do Photoshop.

Protip: Após executar a otimização, classifique pela coluna de ícone à esquerda e selecione todas as linhas com o ícone (X) - arquivos que não foram mais reduzidos. Remova-os da lista e execute novamente todas as imagens que possuem o ícone de marca de seleção. Eu quase prometo que você terá imagens que ainda perdem o tamanho do arquivo. Repita a classificação, selecionando, removendo e reexecutando até obter todos os ícones (X) e chamá-lo por dia.


+1 Uau! Esses são artigos impressionantes. Estou muito feliz que você postou aqueles.
Jessegavin

Sim, eles são muito mais avançados no Photoshop do que eu, mas eu os mostrei aos meus designers e eles sempre aprenderam uma coisa ou duas.
Bryson

10

Ao salvar fotografias no Photoshop, recomendo usar File > Save for Web and Devices. Isso permitirá que você jogue com os níveis de compactação e veja o resultado visual em tempo real. Nas fotografias, você geralmente pode salvá-lo abaixo do nível 8 e ainda obter ótimos resultados. texto alternativo


11
Por favor, você pode reduzir o tamanho dessa imagem? Demora alguns segundos para carregar.

11
JPEG normalmente é um tamanho de arquivo menor para imagens multicoloridas grandes.
Kevin


4

Para imagens PNG, você pode reduzir o número de cores no mapa de cores e salvar como um PNG indexado. Por exemplo, considere um logotipo com 128 x 128 pixels (não compactado). Imagine que existem apenas 16 cores que ele realmente usa.

  • PNG-32, quatro bytes por pixel - 65 KB
  • PNG-8, um byte por pixel - 16 kB
  • PNG-4, quatro bits por pixel - 8 KB

Você pode ver que, sem reduzir a qualidade da imagem (isso se aplica apenas a certos tipos de imagem), é possível reduzir substancialmente o tamanho.

Para botões e ícones de sites, você também pode agregá-los em uma imagem e usar CSS ou JavaScript para controlar sua exibição (sprites). Isso economiza no número de solicitações HTTP feitas para cada imagem.


3

Experimente outros formatos.

  • JPEG para fotografias
  • PNG para fotografias com alfa e / ou sombra
  • GIF para imagens com uma pequena paleta de cores (preto / branco ou um ícone amarelo ou algo assim)

em combinação com "Salvar para a web", muitas vezes é uma ótima solução
Jason

2
O PNG-8 é geralmente muito menor que o GIF correspondente.
neo

11
O GIF está quase obsoleto, além da animação, e mesmo isso está sendo substituído pelo APNG.
DisgruntledGoat

2

Basicamente, tente salvar sua imagem em diferentes formatos e, em seguida, observe o tamanho do arquivo.

Se você estiver usando JPEG, poderá ajustar a qualidade da imagem para cima e para baixo em um editor de gráficos como o paint.net. Geralmente, 50% da qualidade da imagem é boa o suficiente para a web e torna a imagem muito menor.

Com o PNG, você não pode fazer isso, mas é importante notar que, às vezes, o PNG é muito maior e, às vezes, muito menor que o JPEG. PNG é muito menor para imagens em preto e branco, por exemplo, como desenhos de linhas em preto e branco.

O conselho dado atualmente é usar sprites CSS para acelerar o tempo de carregamento, reduzindo solicitações, mas, novamente, você precisa observar o tamanho da imagem que obtém. É bem possível que a imagem sprite CSS seja muito maior que as imagens componentes, se, por exemplo, você combinar vários PNGs preto e branco com um colorido.


Colocarei em segundo os dados EXIF ​​- se você não precisar, despeje-os. Eu pensei que seria pequeno (é apenas texto, certo?) Mas em alguns sites, vi uma diferença de 30 KB em que as imagens de 50 KB (enviadas pelo usuário - mas redimensionadas mantendo EXIF) reduziam para 20 KB ou menos na mesma configuração de qualidade - apenas removendo os dados EXIF ​​..
jeffreypriebe 29/09

2

Você também deseja garantir que está retirando todos os dados EXIF ​​- quase tudo isso é irrelevante para os usuários na web, eles realmente precisam saber que você usou uma Canon 5D para tirar a foto e que você usou um F-Stop de 2,8, exposto por 0,5 segundo, com um ISO de 160, sem viés de exposição e uma distância focal de 9 mm?

Todos esses metadados adicionam peso à sua imagem e, em geral, devem ser removidos.

Como salienta jessegavin , a maioria dos aplicativos de imagem mostra uma visualização dos efeitos da compactação - use-os, pois uma configuração geral de "8" raramente oferecerá a melhor troca possível.

Por fim, o plug-in Google Page Speed Firefox / Firebug pode fornecer uma boa idéia de quanto você pode reduzir o tamanho da imagem (incluindo a visualização e o salvamento de versões menores).



1

Depois de fazer todas as outras sugestões para garantir que sua imagem seja a menor possível, mantendo o nível de qualidade desejado, você também desejará configurar o site para que ele sirva imagens com o mínimo de cabeçalhos HTTP e verifique se o os cabeçalhos que você está servindo permitem que as imagens sejam armazenadas adequadamente, armazenando em cache servidores proxy e navegadores da web.

Para reduzir o tamanho das solicitações, verifique se o servidor da Web está configurado para não enviar cabeçalhos inúteis como o X-Powered-By. Além disso, verifique se você está servindo coisas como imagens, CSS e outros componentes estáticos de um host que não define cookies (por exemplo, static.example.com).

Para imagens estáticas, defina o cabeçalho Expira para uma data no futuro distante. Isso garante que o navegador da Web e quaisquer proxies de cache no meio permaneçam na imagem o maior tempo possível. A única desvantagem disso é que, se você quiser mostrar uma imagem diferente, precisará usar um nome de arquivo diferente e vincular a ela. A numeração de versão no nome do arquivo (por exemplo, myimage_1.png ou /images/3/logo.png) pode ser uma maneira eficaz de fazer isso. Para páginas menos estáticas, defina um cabeçalho realista Expira (acesso mais X horas) e verifique se está definindo o cabeçalho Última modificação ou o cabeçalho eTag (não os dois) para que os navegadores que baixaram os arquivos anteriormente possam testar rapidamente se eles têm a versão atual comparando cabeçalhos em vez de reduzir a imagem inteira.

Embora existam muitos recursos disponíveis para discutir essas técnicas, o Yahoo fez um ótimo trabalho, trazendo muitas dicas para melhorar o desempenho da entrega de conteúdo em um só lugar.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.