Ottimizzazione dell'immagine per il sito: elaborazione in batch con jpegtran | optipng | PNGOUT

  1. prerequisiti
  2. Usiamo raccomandazioni per le immagini
  3. Struttura dell'archivio
  4. Brevi istruzioni per il lavoro
  5. supplementi
  6. x64 (aka andi)

Sito senza immagini - un anacronismo. Così tante persone pensano, e non è privo di buon senso. Ricorda, da quanto tempo sei stato sul sito per l'ultima volta e da quanto tempo ci sei stato?

I dati di testo sono molto più piccoli dell'immagine. Ma le persone sono conosciute per amare i loro occhi. Pertanto, le immagini rappresenteranno un indubbio vantaggio della storia.

In generale, parlando del testo, intendiamo sia il suo contenuto sia una comoda presentazione visiva, compresi paragrafi, elenchi, citazioni, tabelle. Tuttavia, questo non è abbastanza, e anche i siti di notizie stanno cercando di fornire immagini di giornalisti.

Tuttavia, questo non è abbastanza, e anche i siti di notizie stanno cercando di fornire immagini di giornalisti

Iniziamo dal presupposto che le immagini siano necessarie. Questi possono essere foto, diagrammi, semplicemente spiegando le immagini.

Molto tempo fa, quando Putin non sembrava eterno, ho creato il mio primo portale web medico. Era necessario posizionare le immagini sull'atlante. È ovvio che è piuttosto difficile immaginare la struttura anatomica del corpo senza immagini, e tanto più per descrivere con le parole. E senza ulteriori indugi, ho caricato le foto su bmp (formato non compresso). Devo dire che hanno pesato la pasta? Inoltre, alcuni browser non sapevano come mostrare tali immagini.

Allora perché ottimizzare le immagini? Un semplice esempio è una foto. I telefoni moderni hanno telecamere in 8, 12 e anche più megapixel. 12 MP corrisponde ad un'immagine di 4000 × 3000 pixel. A seconda della complessità della scena, questo corrisponde a una dimensione di 2-5 megabyte, e anche di più. Una dozzina di foto - e le dimensioni della pagina si gonfiano molto. L'immagine si inserisce nell'area del contenuto, il che significa che il browser deve prima scaricare tutto, ridimensionarlo e solo dopo visualizzarlo. Per i deboli processori o con una piccola quantità di RAM - un disastro.

Ora immagina che l'utente stia guardando il sito dal telefono. In questo caso, il caricamento della pagina può semplicemente non attendere. Quindi, le immagini devono essere pre-ridotte.

Qualcuno sosterrà che non ha senso: il CMS moderno esegue automaticamente le anteprime quando si scaricano le immagini. Ma tutti hanno i loro siti su VPS o tariffe VIP? È possibile scaricare un'immagine da 12 MP, ma per elaborarla, PHP dovrà allocare oltre 35 megabyte (in teoria, anzi di più) per l'archiviazione, e quindi sapere ancora quanto creare una copia più piccola. Le tariffe economiche si immergono immediatamente nell'eccesso di risorse. Un buon hoster chiederà all'utente di non farlo più, un cattivo lo ignorerà, perché solo il denaro è importante per lui, e non la prestazione dei servizi.

E così, abbiamo deciso di agire correttamente. Riduciamo preliminarmente le immagini, quindi le carichiamo sul sito. Quindi il motore è più facile e le persone. È tutto Non proprio.

Molti editor mantengono i pezzi originali (meta-informazioni, parti non-immagine del file) contenenti informazioni aggiuntive. Ad esempio, se si scatta una foto di qualcosa sul telefono, trasferire il file sul computer, fare clic su di esso con il tasto destro e selezionare "Proprietà → Dettagli", verranno visualizzati i dati sul dispositivo: quale fotocamera è stata fotografata, velocità dell'otturatore, ISO e così via. Per l'utente, questa informazione è inutile, quindi puoi sbarazzartene.

Beh, pensaci, un pezzo. Cosa c'è, un mucchio di informazioni che è contenuto? Immagina. A volte ottieni immagini in cui centinaia di kilobyte di tali dati. Proprio oggi, hanno inviato un logo di 584 KB in dimensioni per ospitare. Allo stesso tempo, le informazioni utili erano solo 14 KB! Per quanto mi riguarda, non è del tutto corretto forzare il visitatore a scaricare 570 KB dall'alto.

Riassumiamo i subtotali. Affinché gli utenti del sito facciano bene, è necessario:

  1. Riduci la dimensione dell'immagine. Per aiutare qualsiasi editor grafico.
  2. Le parti del file non sono necessarie. In realtà, l'utente ha solo bisogno di un'immagine.
  3. Cerca di ridurre ulteriormente la dimensione dell'immagine.

Il primo paragrafo riguarda il lavoro individuale su ciascun file. Richiede molto tempo, ma porta il miglior risultato. Apriamo ogni file, tagliamo, riduciamo, quindi salviamo con una qualità accettabile.

Ma i paragrafi 2 e 3 possono essere dati in balia di programmi speciali. Software per lavorare con set di immagini. Google consiglia i seguenti programmi:

  • jpegtran per il formato immagine jpg.
  • optipng e pngout per immagini PNG.

Un po 'di p. 3. Gli editor grafici di solito non si preoccupano di questo. Semplicemente salvano l'immagine, scegliendo in anticipo algoritmi di compressione posti con le stesse impostazioni, i coefficienti di quantizzazione e altre cose. Inoltre, molti onestamente trasferiscono le meta-informazioni disponibili e ne aggiungono le proprie, aumentando ulteriormente le dimensioni del file.

prerequisiti

Un anno fa, hanno iniziato a parlare in massa del servizio. PageSpeed ​​Insights da google. In realtà, queste sono raccomandazioni del gigante della ricerca su "come fare bene". Basta digitare l'indirizzo del sito e ottenere un elenco di suggerimenti per l'ottimizzazione. Qui puoi anche scaricare risorse già ottimizzate, comprese le immagini, per il tuo sito. È vero, questo è rilevante solo per la pagina selezionata.

Se hai un sito Web, assicurati di guardare questo articolo . Particolarmente utile per chi usa WordPress.

Usiamo raccomandazioni per le immagini

Sembra semplice: scarica i programmi specificati da Google ed esegui tutti i file sul server attraverso di loro. Il problema è che queste utility sono console. Prendono solo 1 file alla volta. Ma non siamo invano in ultimo articolo ha preso il tempo per i file batch, giusto?

Le informazioni dall'articolo sono abbastanza per creare il tuo gestore di file in massa, quindi non dipingo dove sia. Propongo solo di scaricare l'assemblea pronta, che uso io stesso.

Scarica l'archivio (212 KB)

Struttura dell'archivio

L'archivio contiene una cartella [ OptimizeImg ]. Per iniziare, scompattalo da qualche parte. L'ho trovato in c: \ temp \ ma non importa. La cosa principale è che il percorso non contiene punti esclamativi.

Avanti. Questa cartella contiene la sottodirectory [ uploads ]. Qui è necessario inserire i file che richiedono l'elaborazione. La parte migliore è che puoi spingere almeno la struttura della cartella / file.

Ci sono altri 3 programmi: jpegtran.exe | optipng.exe | pngout.exe è la stessa utility raccomandata da Google. Scaricato dai siti / repository ufficiali corrispondenti. In caso di dubbi o se desideri semplicemente eseguire l'aggiornamento, scarica da una fonte attendibile e sostituisci quelli esistenti.

E infine, il cuore di Tulza. Batnichki:

  • 1.bat
  • 3.bat
  • 3-go.bat
  • 3-Opti-to-out.bat
  • 3-out-to-opti.bat

Il primo file, 1.bat, ricrea la struttura da [uploads]. Vengono create 3 cartelle aggiuntive: [jpg_jpegtran] [png_optipng] [png_pngout] con file minimizzati elaborati del loro tipo (jpg - solo * .jpg-files, lo stesso con png).

3.bat avvia in sequenza tre file batch per l'esecuzione:

  • 3-go.bat è quasi lo stesso di 1.bat. Salta i file jpg / png attraverso i minimizzatori. Il risultato del lavoro sarà di 3 cartelle (vedi sopra) con le immagini corrispondenti.
  • 3-opti-to-out.bat crea la cartella [png_optipng-to-pngout], nella quale vengono scritti i file elaborati da optipng + pngout (esattamente in questa sequenza).
  • 3-out-to-opti.bat crea una cartella [png_pngout-to-optipng] in cui vengono scritti i file elaborati da pngout + optipng. Simile al precedente, solo in una sequenza diversa.

In linea di principio, solo 1.bat è sufficiente per i nostri bisogni. 3 sacchetti sono comparsi come risultato di ricerche ed errori nella versione precedente del file batch. È successo che durante l'errore i file per pngout sono stati presi dalla directory optipng. E quale è stata la mia sorpresa quando il lancio della vecchia versione ha dato dimensioni 1,5 volte più piccole rispetto al file batch aggiornato. Di conseguenza, si è scoperto che la doppia elaborazione può "recuperare" bene le immagini. Ma ci vuole quasi 2 volte di più. Quindi decidi te stesso se è necessario.

Brevi istruzioni per il lavoro

  1. Scarica l'archivio .
  2. Disimballalo.
  3. Vai alla cartella [OptimizeImg] appena aperta.
  4. Tutti i file che richiedono il pungiglione, copiare la cartella [upload].
  5. Esegui 1.bat e aspetta. Se ci sono molti file e sono png, aspetta molto tempo.
  6. Quando un messaggio appare nella finestra nera sulla necessità di premere un tasto per continuare, tutto è pronto. Resta da prendere il contenuto delle cartelle create e copiare nell'hosting tramite FTP, sovrascrivendo i vecchi file.

Per un esempio. Lascia che tu abbia un blog su WordPress. Tutte le immagini sono memorizzate in [ / wp-content / uploads / ]. Vai alla cartella del sito (tramite ftp), vai a [ wp-content ] e copia semplicemente [ uploads ] nella cartella OptimizeImg con lo stesso nome. Esegui 1.bat e aspetta. Al termine del lavoro, il contenuto [jpg_jpegtran] (andiamo lì!) Viene caricato sul server. Le richieste di file esistenti vengono risposte sovrascrivendo. Un trucco simile per png, ma prima vediamo quale cartella - [png_optipng] o [png_pngout] - occupa meno spazio, riempiendolo con il suo contenuto.

Non aver paura di danneggiare altri file. Batniki funziona solo con jpg / png e solo le immagini di questi tipi vengono scritte nelle cartelle appena create.

Spero che qualcuno sarà utile. Buona fortuna!

supplementi

  1. Il percorso di [OptimizeImg] non dovrebbe contenere punti esclamativi ! e percentuale %
  2. Eseguire gli script come amministratore non è necessario. Inoltre, in questo caso, potrebbero non funzionare!
  3. ...

autori

non online 13 ore

x64 (aka andi)

Commenti: 2846 Pubblicazioni: 395 Registrazione: 02-04-2009