Otimização de imagem para o site: processamento em lote usando jpegtran | optipng | pngout

  1. Pré-requisitos
  2. Usamos recomendações para imagens
  3. Estrutura de arquivo
  4. Instruções breves para o trabalho
  5. Adições
  6. x64 (também conhecido como andi)

Site sem imagens - um anacronismo. Muitas pessoas pensam e não são desprovidas de bom senso. Lembre-se há quanto tempo você esteve no site pela última vez e há quanto tempo você está nele?

Os dados de texto são muito menores que a imagem. Mas as pessoas são conhecidas por amar seus olhos. Portanto, as imagens serão uma vantagem indubitável da história.

Em geral, falando sobre o texto, queremos dizer tanto seu conteúdo quanto uma apresentação visual conveniente, incluindo parágrafos, listas, citações, tabelas. No entanto, isso não é suficiente, e até mesmo sites de notícias estão tentando fornecer imagens de jornalistas.

No entanto, isso não é suficiente, e até mesmo sites de notícias estão tentando fornecer imagens de jornalistas

Vamos partir do pressuposto de que as imagens são necessárias. Estes podem ser fotos, diagramas, simplesmente explicando fotos.

Há muito tempo, quando Putin não parecia eterno, fiz meu primeiro portal médico na internet. Era necessário colocar fotos no atlas. É óbvio que é bastante difícil imaginar a estrutura anatômica do corpo sem figuras e, mais ainda, descrever com palavras. E sem mais delongas, enviei fotos para o formato bmp (formato não compactado). Eu tenho que dizer que eles pesaram massa? Além disso, alguns navegadores não sabiam como mostrar tais imagens.

Então, por que otimizar imagens? Um exemplo simples é uma foto. Os telefones modernos têm câmeras em 8, 12 e mais megapixels. 12 MP corresponde a uma imagem de 4000 × 3000 pixels. Dependendo da complexidade da cena, isso corresponde a um tamanho de 2-5 megabytes e ainda mais. Uma dúzia de fotos - e o tamanho da página aumenta muito. A imagem se encaixa na área de conteúdo, o que significa que o navegador deve primeiro fazer o download de tudo, dimensioná-lo e exibi-lo somente. Para os fracos processadores ou com uma pequena quantidade de RAM - um desastre.

Agora imagine que o usuário está assistindo o site pelo celular. Nesse caso, o carregamento da página simplesmente não pode esperar. Então, as imagens precisam ser pré-reduzidas.

Alguém vai argumentar que não há sentido nisso: o CMS moderno faz miniaturas automaticamente ao baixar imagens. Mas todo mundo tem seus sites em VPS ou VIP? Faça o download de uma imagem de 12 MP, mas, para processá-la, o PHP precisará alocar 35 megabytes (em teoria, na verdade, mais) para armazenamento, e ainda saberá o quanto criar uma cópia menor. Tarifas baratas imediatamente mergulham no excesso de recursos. Um bom hospedeiro pedirá ao usuário para não fazer mais isso, um mau irá ignorá-lo, porque somente o dinheiro é importante para ele, e não o desempenho dos serviços.

E assim, decidimos agir corretamente. Nós preliminarmente reduzimos as imagens, e depois as enviamos para o site. Então o motor é mais fácil e as pessoas. É tudo Não realmente.

Muitos editores retêm os fragmentos originais (informações de metadados, partes sem imagem do arquivo) contendo informações adicionais. Por exemplo, se você tirar uma foto de algo no telefone, transferir o arquivo para o computador, clicar nele com a tecla direita e selecionar “Propriedades → Detalhes”, você verá os dados no dispositivo: qual câmera você fotografou, velocidade do obturador, ISO e assim por diante. Para o usuário, essa informação é inútil, então você pode se livrar dela.

Bem, pense nisso, um pedaço. O que há, um monte de informações contidas? Imagine Às vezes você obtém imagens nas quais centenas de kilobytes desses dados. Apenas hoje, eles enviaram um logotipo de 584 KB para acomodar. Ao mesmo tempo, informações úteis foram de apenas 14 KB! Quanto a mim, não é totalmente correto forçar o visitante a baixar 570 KB de cima.

Vamos resumir os subtotais. Para que os usuários do site possam se sair bem, você precisa:

  1. Reduza o tamanho da imagem. Para ajudar qualquer editor gráfico.
  2. Expulsar as partes do arquivo são desnecessárias. Na verdade, o usuário só precisa de uma foto.
  3. Tente reduzir ainda mais o tamanho da imagem.

O primeiro parágrafo envolve o trabalho individual em cada arquivo. É demorado, mas traz o melhor resultado. Abrimos cada arquivo, cortamos, reduzimos e depois economizamos com qualidade aceitável.

Mas os parágrafos 2 e 3 podem ser dados à mercê de programas especiais. Software para trabalhar com o conjunto de imagens. O Google recomenda os seguintes programas:

  • jpegtran para formato de imagem jpg.
  • optipng e pngout para imagens PNG.

Um pouco sobre a página 3. Os editores gráficos geralmente não se importam com isso. Eles simplesmente salvam a imagem, escolhendo antecipadamente algoritmos de compressão com as mesmas configurações, coeficientes de quantização e outras coisas. Além disso, muitos transferem honestamente as meta-informações disponíveis e adicionam as suas próprias, aumentando ainda mais o tamanho do arquivo.

Pré-requisitos

Um ano atrás, eles começaram a falar em massa sobre o serviço. Insights do PageSpeed do google. Na verdade, essas são recomendações do gigante das buscas sobre "como fazer bem". Basta digitar o endereço do site e obter uma lista de sugestões para otimização. Lá você também pode baixar recursos já otimizados, incluindo imagens, para o seu site. É verdade que isso é relevante apenas para a página marcada.

Se você tem um site, não deixe de procurar este artigo . Particularmente útil para quem usa o WordPress.

Usamos recomendações para imagens

Parece simples: baixar os programas especificados pelo Google e executar todos os arquivos no servidor através deles. O problema é que esses utilitários são de console. Eles levam apenas um arquivo de cada vez. Mas nós não somos em vão último artigo levou o tempo para arquivos em lote, certo?

As informações do artigo são suficientes para criar seu próprio manipulador de arquivos em massa, por isso não vou pintar onde está. Acabei de propor o download da montagem pronta, que eu mesmo uso.

Download de arquivo (212 KB)

Estrutura de arquivo

O arquivo contém uma pasta [ OptimizeImg ]. Para começar, descompacte-o em algum lugar. Eu tenho isso localizado em c: \ temp \ mas isso não importa. O principal é que o caminho não contém pontos de exclamação.

Próximo Esta pasta contém o subdiretório [ uploads ]. Aqui você precisa colocar arquivos que requerem processamento. A melhor parte é que você pode empurrar pelo menos a estrutura de pastas / arquivos.

Existem mais 3 programas: jpegtran.exe | optipng.exe | O pngout.exe é o utilitário recomendado pelo Google. Download dos sites / repositórios oficiais correspondentes. Em caso de dúvida, ou apenas deseja atualizar, faça o download de uma fonte confiável e substitua as já existentes.

E finalmente, o coração de tulza. Batnichki:

  • 1.bat
  • 3.bat
  • 3-go.bat
  • 3-opti-para-out.bat
  • 3-out-para-opti.bat

O primeiro arquivo, 1.bat, recria a estrutura de [uploads]. 3 pastas adicionais são criadas: [jpg_jpegtran] [png_optipng] [png_pngout] com arquivos minimizados processados ​​de seu tipo (jpg - somente * .jpg-files, o mesmo com png).

3.bat seqüencialmente lança três arquivos em lote para execução:

  • 3-go.bat é quase o mesmo que 1.bat. Pule arquivos jpg / png através de minimizadores. O resultado do trabalho será de 3 pastas (veja acima) com as imagens correspondentes.
  • 3-opti-to-out.bat cria a pasta [png_optipng-to-pngout], na qual os arquivos processados ​​por optipng + pngout são gravados (exatamente nesta sequência).
  • O 3-out-to-opti.bat cria uma pasta [png_pngout-to-optipng] na qual os arquivos processados ​​por pngout + optipng são gravados. Semelhante ao anterior, apenas em uma seqüência diferente.

Em princípio, apenas 1.bat é suficiente para as nossas necessidades. 3x sacos apareceram como resultado de pesquisas e erros na versão anterior do arquivo de lote. Acontece que durante o erro os arquivos para pngout foram retirados do diretório optipng. E qual foi a minha surpresa quando o lançamento da versão antiga deu 1,5 vezes menor tamanho do que no arquivo de lote atualizado. Como resultado, descobriu-se que o processamento duplo pode “capturar” bem as fotos. Mas leva quase 2 vezes mais tempo. Então, decida se é necessário.

Instruções breves para o trabalho

  1. Download do arquivo .
  2. Desembale-o.
  3. Vá para a pasta recém-aberta [OptimizeImg].
  4. Todos os arquivos que requerem ardor, copie a pasta [upload].
  5. Execute 1.bat e aguarde. Se houver muitos arquivos e eles forem png, aguarde um longo tempo.
  6. Quando uma mensagem aparece na janela preta sobre a necessidade de pressionar uma tecla para continuar, tudo está pronto. Resta levar o conteúdo das pastas criadas e copiar para a hospedagem via FTP, sobrescrevendo arquivos antigos.

Por exemplo. Deixe você ter um blog no WordPress. Todas as imagens são armazenadas em [ / wp-content / uploads / ]. Vá para a pasta do site (via ftp), vá para [ wp-content ] e simplesmente copie [ uploads ] para a pasta OptimizeImg do mesmo nome. Execute 1.bat e aguarde. Depois que o trabalho terminar, o conteúdo [jpg_jpegtran] (vamos lá!) É enviado ao servidor. Solicitações de arquivos existentes são respondidas sobrescrevendo. Um truque similar para png, mas primeiro nós olhamos para qual pasta - [png_optipng] ou [png_pngout] - ocupa menos espaço, preencha com seu conteúdo.

Não tenha medo de danificar outros arquivos. O Batniki funciona apenas com jpg / png e somente as imagens desses tipos são gravadas nas pastas recém-criadas.

Espero que alguém seja útil. Sucessos!

Adições

  1. O caminho para [OptimizeImg] não deve conter pontos de exclamação ! e porcentagem %
  2. Executar scripts como administrador não é necessário. Além disso, neste caso, eles podem não funcionar!
  3. ...

Publisher

não online 13 horas

x64 (também conhecido como andi)

Comentários: 2846 Publicações: 395 Registros: 02-04-2009

IRC (Internet Relay Chat)