Cambia menu

I migliori strumenti di compressione delle immagini per WordPress: Lossless, Lossy, JPEG e PNG

Pubblicato: 2018-03-29

Sconto del 25% sui prodotti Beaver Builder! Affrettati, i saldi finiscono... Scopri di più!

Image Compression Solutions for WordPress
  • WordPress

I migliori strumenti di compressione delle immagini per WordPress: Lossless, Lossy, JPEG e PNG

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.

Terminologia iniziale

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.

Quanto dovrei comprimere le immagini?

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ì.

Opzioni degli strumenti di compressione delle immagini

Come ho scoperto di recente, le opzioni non mancano quando si tratta di strumenti e servizi per la compressione delle immagini.

ImageOptim

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 di WPMU Dev

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

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.

Immagina

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.

JPEG Mini

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

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

Qual è il tuo preferito?

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à.

Biografia di Robby McCullough

26 commenti

  1. Design Raygun il 28 marzo 2018 alle 13:31

    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.



    • Robby McCullough il 30 aprile 2018 alle 11:35

      Ahah. Sì, la maggior parte delle aziende che hanno una mascotte animale sono piuttosto solide.



  2. Paul Steele il 28 marzo 2018 alle 16:30

    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.



  3. Toby il 28 marzo 2018 alle 20:45

    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.



  4. Chris il 29 marzo 2018 alle 9:02

    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/



  5. Mihai il 29 marzo 2018 alle 10:51

    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.



  6. Dhiraj Das il 31 marzo 2018 alle 23:05

    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.



  7. Lucas il 4 aprile 2018 alle 5:58

    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.



  8. a305587 il 10 aprile 2018 alle 10:17

    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.



    • Robby McCullough il 10 aprile 2018 alle 15:11

      Sorprendentemente, molti di questi strumenti e servizi sono più efficaci nel ridurre le dimensioni dei file rispetto a Photoshop.



    • Tom Nguyen il 2 maggio 2018 alle 3:07

      Faccio lo stesso con Photoshop, ma credo che ImageOptim e Smush ridurranno ulteriormente le dimensioni del file senza una notevole perdita di qualità.



  9. Jake Hawkes l'11 aprile 2018 alle 7:56

    Penso che le persone dovrebbero considerare molto più seriamente gli strumenti di ottimizzazione dei contenuti come IMGIX e Cloudinary.



  10. Ann Iashin il 15 aprile 2018 alle 8:56

    Faresti meglio a usare Compressman! Non utilizza Internet ed è solo sito web



  11. dmergus il 19 aprile 2018 alle 6:52

    Tendiamo a utilizzare Smush e Short Pixel per i nostri clienti. Il pixel corto fornisce una compressione migliore ma anche Smush è buono, impostalo e dimenticatene.



  12. Greg Hyatt il 23 aprile 2018 alle 7:25

    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!



  13. Sridhar Katakam il 26 aprile 2018 alle 19:10

    Per quanto riguarda le modifiche alle impostazioni in ImageOptim, lasci il livello di ottimizzazione sul valore predefinito, Extra?



    • Robby McCullough il 30 aprile 2018 alle 11:34

      Nella maggior parte dei casi sì.



  14. Omer il 26 aprile 2018 alle 21:56

    Sono sorpreso che nessuno abbia menzionato Kraken.io (https://kraken.io/). Può essere utilizzato dalla loro interfaccia web o come plugin WordPress.



    • Robert Rutledge il 3 maggio 2018 alle 10:07

      Utilizzo il Chromebook e sembra una buona alternativa. Sto usando http://guetzliconverter.linuxadm.hu/



  15. gelform il 29 aprile 2018 alle 6:06

    La migliore libreria che ho trovato per PNG è PNGQuant, ma ho faticato a farla funzionare localmente. Quindi ora eseguo tutte le mie immagini tramite http://compresspng.com/ che utilizza PNGQuant. Enorme miglioramento rispetto a ImageOptim.



  16. Tom Nguyen il 2 maggio 2018 alle 3:05

    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?



    • Robert Rutledge il 3 maggio 2018 alle 10:04

      Secondo me questo ottimizza molto meglio di Smush.



  17. BuildupYouth il 26 ottobre 2018 alle 2:07

    Grazie per l'elenco... attualmente utilizzo Smush di WPMU Dev e funziona perfettamente..



  18. Ronald E Ford il 21 novembre 2018 alle 20:01

    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.



  19. Jake Hawkes il 22 novembre 2018 alle 13:09

    Fireworks era o è un ottimo programma. Non lo uso da anni, tuttavia, potrebbe essere il momento di riaprirlo per vedere quanto mi manca.



  20. Himani Bhardwaj il 18 dicembre 2018 alle 22:46

    Grazie per questo bell'articolo! Sto utilizzando il plug-in Image Optimizer per il mio sito.



La nostra newsletter

La nostra newsletter viene scritta personalmente e inviata circa una volta al mese. Non è minimamente fastidioso o spam.
Lo promettiamo.

Iscriviti alla newsletter

Prova Beaver Builder oggi

Beaver Builder