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:
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.
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.
Você pode querer conferir o Smush.it do Yahoo . Eu achei que funcionava muito bem.
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.
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.
Experimente outros formatos.
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.
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).
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.