desenv-web-rp.com

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

Trabalhando com alguns temas 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).

15
Ryan Elkins

A Revista Smashing publicou 2 excelentes artigos em Otimização PNG e otimização 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 para menos 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 o Tweak 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 elas 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.

ImageOptim fornece GUI para várias ferramentas de otimização: AdvPNG de AdvanceCOMP, OptiPNG , PngCrush , JpegOptim , jpegtran de 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.

Moleza; fácil; baba. Arraste suas imagens (ou pastas de imagens) para a janela, ele percorre todas essas ferramentas, ajustando 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 para Windows/Linux/Mac, exceto PNGOUT, mas felizmente alguém portou PNGOUT para o OS X e linux porque são muito atenciosas. Se você optar por usar o ImageOptim, ele incluirá todos, exceto PNGOUT, no .app, então pegue a porta PNGOUT, solte-a em/usr/local/bin (ou em qualquer outro local) 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 executando novamente até obter todos os ícones (X) e chamá-lo por dia.

14
Bryson

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. alt text

10
jessegavin

Você pode querer conferir o Yahoo Smush.it . Eu achei que funcionava muito bem.

4
Travis Northcutt

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.

4
dmsnell

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)
3
Aaron

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. A qualidade de imagem de 50% geralmente é 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 CSS Sprite seja muito maior que as imagens componentes, se, por exemplo, você combinar vários PNGs em preto e branco com um colorido.

2
delete

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 jessegavin destaca, 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á o melhor trade-off possível.

Por fim, o Google Page Speed Firefox/ Firebug pode fornecer uma boa idéia de quanto você pode reduzir o tamanho da imagem (inclusive permitindo visualizar e salvar as versões menores) .

2
Zhaph - Ben Duguid
1
adamcodes

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 seu 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á veiculando 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 Expira realista (acesso mais X horas) e verifique se está configurando o cabeçalho Last-Modified ou eTag (não ambos) 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 juntos em um só lugar.

1
JasonBirch