I migliori strumenti di compressione delle immagini per WordPress: Lossless, Lossy, JPEG e PNG
Pubblicato: 2018-03-29Sconto del 25% sui prodotti Beaver Builder! Affrettati, i saldi finiscono... Scopri di più!
Oggi parleremo di un argomento che mi sta a cuore: la compressione delle immagini! Sto scherzando, ma c'è qualcosa di stranamente soddisfacente nel ridurre enormi percentuali delle dimensioni di un file immagine senza diminuirne la qualità.
L'ispirazione per questo post è nata da un post molto popolare nel gruppo Facebook di Beaver Builders. Avevo appena filmato un video tutorial sull'attivazione e l'utilizzo del nuovo algoritmo Guetzli di Google in ImageOptim e sono rimasto scioccato da tutte le altre opzioni con cui non avevo familiarità. In questo articolo parleremo di alcuni suggerimenti e strumenti per comprimere le immagini per il web.
Prima di approfondire, stabiliamo una terminologia comune.
JPEG, PNG, SVG : questi sono i tre tipi di file immagine più popolari sul web. Per questo tutorial, ci concentreremo principalmente su JPEG e PNG poiché beneficiano maggiormente della compressione e dell'ottimizzazione.
I JPEG sono generalmente migliori per immagini ad alta fedeltà come foto e grafica web che non hanno alcuna trasparenza.
I PNG sono ottimi per cose come icone e loghi o qualsiasi cosa che richieda trasparenza. I PNG possono anche essere ottimizzati in modo significativo dopo essere usciti da Photoshop o dallo strumento di editing grafico preferito.
Lossless e Lossy – Questi sono metodi di compressione. La compressione senza perdita significa che la tua immagine non perderà alcuna qualità. Letteralmente nessuno. Ciò comporta la rimozione dei metadati dall'immagine o di qualsiasi cosa che non influisca sulla qualità.
Con perdita significa che l'algoritmo di compressione ridurrà la qualità dell'immagine. Otterrai risultati di compressione migliori ma sacrificherai la qualità dell'immagine. La maggior parte degli strumenti di compressione con perdita fornisce un cursore percentuale in modo da poter scegliere il bilanciamento tra qualità e dimensione del file.
Consiglio dell'esperto: per sfondi di immagini di grandi dimensioni, spesso sfuoco leggermente l'immagine o aggiungo uno strato di colore opaco sulla foto. Ridurre il dettaglio e/o normalizzare il colore è una bella scelta di stile estetico che riduce notevolmente le dimensioni del file. Puoi vederlo in azione sulla nostra pagina dei lavori.
L'obiettivo della compressione delle immagini è ridurre il più possibile le dimensioni del file senza sacrificare troppo la qualità. Si tratta più di un'arte che di una scienza e il livello di "qualità accettabile" varierà a seconda della situazione.
Uno studio fotografico probabilmente vorrà mettere in risalto il proprio lavoro con la massima qualità, mentre un sito web immobiliare potrebbe essere disposto a sacrificare la qualità in cambio della visualizzazione di più immagini sulla pagina.
La maggior parte dei software di editing delle immagini consente di esportare immagini con qualità variabile. Tuttavia, se utilizzi uno strumento di compressione delle immagini dedicato, a volte è meglio fornire a quel software la migliore qualità possibile e lasciare che gli algoritmi di compressione funzionino da lì.
Come ho scoperto di recente, le opzioni non mancano quando si tratta di strumenti e servizi per la compressione delle immagini.
Ho iniziato con, e preferisco ancora, ImageOptim. ImageOptim è disponibile solo su OSX, ma supporta la compressione con e senza perdita di dati sia per i file JPEG che PNG. Può anche essere configurato per utilizzare l'algoritmo di compressione relativamente nuovo di Google, Guetzli. Guetzli, in media, può ridurre le dimensioni dei file del 20-30% in più rispetto ad altri algoritmi.
ImageOptim è un programma che risiede nel Dock del tuo Mac e puoi semplicemente trascinare e rilasciare le immagini sull'icona del programma e lui le comprimerà. Tendo a ottimizzare una o due immagini alla volta, quindi questa soluzione funziona benissimo per me. Tuttavia, se stai lavorando su un numero elevato di immagini o immagini con file di grandi dimensioni, alcune delle altre opzioni potrebbero essere una scelta migliore per lavori di grandi dimensioni.
Smush è un plugin WordPress gratuito di WPMU Dev che può essere configurato per ottimizzare le immagini esistenti nell'installazione di WordPress e/o mentre le carichi su WordPress. Smush è fantastico perché il lavoro pesante viene svolto dai server di WPMU Dev e ottimizzano e ridimensionano le immagini.
Se stai creando siti Web per i clienti, in particolare quelli a cui piace caricare immagini da diversi megabyte direttamente dalla propria fotocamera digitale, Smush è un'ottima opzione da impostare e dimenticare.
TinyPNG è un compressore di immagini basato sul web. Puoi caricare le tue immagini (fino a 5bm) e scaricare la versione compressa. Ciò utilizzerà la larghezza di banda, quindi potrebbe non essere l'opzione migliore se utilizzi una connessione Internet lenta o a pagamento. Supporta i tipi di file JPEG e PNG. È gratuito. Non sembra offrire alcun controllo sul livello di qualità della compressione.
Dopo aver giocato con TinyPNG, penso di preferire ancora ImageOptim, ma sarebbe un'ottima opzione per gli utenti Windows, lavori rapidi una tantum o utenti che cercano specificamente un compressore basato sul web. Oppure, se stai tentando di scaricare l'elaborazione sul cloud anziché sul tuo computer locale.
Imagify è un'altra opzione SASS basata sul web che fornisce un plugin WordPress dedicato per ottimizzare e ridimensionare le immagini mentre le carichi o direttamente dall'area di amministrazione di WordPress. Il plugin Imagify WordPress vanta un'impressionante recensione media di 4,5 stelle e molte recensioni sottolineano che la qualità dell'immagine ottenuta con Imagify è migliore rispetto alle alternative.
Imagify ha un piano gratuito che ti consente di caricare e ottimizzare immagini inferiori a 2 MB. La versione ottimizzata delle immagini rimarrà disponibile per il download dai loro server per 24 ore.
JPEGMini è un servizio SASS che dovrebbe attrarre le persone che cercano una soluzione da lavoro. Immagina di avere il compito di ottimizzare decine di migliaia di immagini di prodotti ad alta risoluzione per un negozio di e-commerce. JPEGMini ti consentirebbe di scaricare tutta l'elaborazione sui loro server cloud, presumibilmente veloci e ottimizzati.
ShortPixel è un altro SASS basato sul web. Se stai cercando di scaricare la compressione delle immagini su un server cloud, è un'ottima opzione da provare. Il loro piano gratuito ti consente di ottimizzare fino a 100 immagini al mese e hanno piani premium a partire da $ 5 al mese per ulteriori. ShortPixel ha anche un plugin per WordPress e sono i preferiti dal resto del team BB.
Immagina
Se visiti il thread Facebook originale che ha ispirato questo post, vedrai molte altre opzioni e persone che preferiscono l'una o l'altra per una serie di motivi. Ci manca il tuo preferito? Fateci sapere di cosa si tratta e perché vi piace nei commenti.
Inoltre, se sei il tipo che mangia, dorme e respira la performance, questa intervista con Jon Brown sulle migliori pratiche per la performance moderna probabilmente ti piacerà.
Tinypng ha anche un plugin per Wordpress https://wordpress.org/plugins/tiny-compress-images/ e la loro API è utile con cui lavorare se hai bisogno di impostare qualcosa sul lato server.
Brillante. Ho appena iniziato a utilizzare ShortPixel. ben progettato, facile da collegare (Abilita sostituzione multimediale) ed economico.
Mi piacerebbe davvero vedere un articolo che integra S3 Offload con Beaver, la memorizzazione nella cache del plug-in bb lo rende particolarmente difficile.
Io uso EWWW. Per i siti con tonnellate di immagini, licenza illimitata con CDN. Per 10 alla volta usa https://ewww.io/online-image-optimizer/
Ho testato tutti i plugin di compressione/ottimizzazione delle immagini WordPress per i miei oltre 20 siti WordPress, alcuni dei quali con contenuti generati dagli utenti (ad esempio immagini di grandi dimensioni) e per me l'opzione migliore è di gran lunga ShortPixel. Ho scoperto che la loro compressione ha il miglior rapporto qualità/dimensione della categoria e il loro modello di prezzo è giusto. Inoltre, non sono limitato dalla dimensione del file e vengono ottimizzati completamente anche se utilizzi il piano gratuito.
Ho usato TinyPNG per tutto questo tempo, sembrano gonfiare l'immagine dopo il caricamento e poi comprimerla (potrei sbagliarmi, ma vedo una dimensione dell'immagine più pesante dopo il caricamento rispetto alla dimensione effettiva) Non sapevo di ImageOptim sembra molto utile attrezzo.
Bella recensione. Prima del caricamento utilizzo webresizer.com come alternativa a TinyPNG. Ti danno un buon controllo del prodotto finale. Hanno un ridimensionatore/compressore di massa, ma è meglio utilizzarlo con un numero di immagini che dovrebbero avere tutte la stessa dimensione.
Sul nostro sito ho scoperto che Imagify funziona bene.
Questi servizi sono fantastici, grazie per aver compilato questo elenco.
Ci tengo a precisare che se già utilizzavi Photoshop, puoi farlo anche tramite Photoshop. Invece di “Salva con nome…”, vai a:
File -> Esporta -> Salva per Web (legacy)
Quindi, nella preimpostazione, passare alla compressione JPEG Alta, JPEG Media o JPEG Bassa. Quindi fare clic su "Salva". In questo modo si ottiene lo stesso risultato dei servizi di cui sopra.
Faccio lo stesso con Photoshop, ma credo che ImageOptim e Smush ridurranno ulteriormente le dimensioni del file senza una notevole perdita di qualità.
Penso che le persone dovrebbero considerare molto più seriamente gli strumenti di ottimizzazione dei contenuti come IMGIX e Cloudinary.
Faresti meglio a usare Compressman! Non utilizza Internet ed è solo sito web
Sono un grande fan dell'utilizzo di ImageOptim su OSX! Lo utilizzo su ogni immagine che invio al Web, indipendentemente dalla piattaforma su cui verrà mostrata!
Sono sorpreso che nessuno abbia menzionato Kraken.io (https://kraken.io/). Può essere utilizzato dalla loro interfaccia web o come plugin WordPress.
Utilizzo il Chromebook e sembra una buona alternativa. Sto usando http://guetzliconverter.linuxadm.hu/
Ho usato ImageOptim e la versione gratuita di Smush. Adoro particolarmente Smush. Ci sono altri vantaggi nell'aggiornamento alla versione a pagamento oltre alla possibilità di ottimizzare più immagini alla volta?
Secondo me questo ottimizza molto meglio di Smush.
Grazie per l'elenco... attualmente utilizzo Smush di WPMU Dev e funziona perfettamente..
So che probabilmente sono obsoleto, ma con Fireworks ottengo un ottimo controllo sulla compressione delle immagini. A mio modesto parere il miglior programma raster/vettoriale in circolazione.
Fireworks era o è un ottimo programma. Non lo uso da anni, tuttavia, potrebbe essere il momento di riaprirlo per vedere quanto mi manca.
Grazie per questo bell'articolo! Sto utilizzando il plug-in Image Optimizer per il mio sito.
Il nostro voto è per Tinypng. Ci piace il loro plugin che può essere ottimizzato mentre carichi sul tuo sito – ci piace anche il Panda! Daremo un'occhiata anche a ImageOptim mentre utilizziamo il Mac. Ottima lista ragazzi.