Perfeziona il tuo sito con images.tooling.report

Controlla lo stato degli strumenti per le immagini.

Patrick Kettner
Patrick Kettner

Mettere un'immagine sul web è una cosa, ma farlo bene è difficile. Scegliere il formato, la compressione, i punti per pollice (DPI) e centinaia di altre impostazioni giusti può essere facilmente dimenticato quando facciamo tutto da soli.

La buona notizia è che oggi abbiamo a disposizione una vasta gamma di strumenti e servizi che possono fare tutto questo per noi. La cattiva notizia è che ce ne sono molti. Può essere difficile scegliere lo strumento o il servizio più adatto a te. Per questo motivo, stiamo lanciando images.tooling.report, un sito in cui elenchiamo gli aspetti che riteniamo più importanti per l'invio di immagini in produzione e per confrontare alcuni dei software e dei servizi più popolari, a pagamento o senza costi, ospitati o auto-ospitati.

Perché?

Le immagini rappresentano una parte enorme dei byte trasferiti da un sito e questi byte si accumulano. Infatti, abbiamo riscontrato che le immagini non ottimizzate rappresentavano quasi il 75% delle dimensioni totali di una pagina. Tutti questi byte sprecati hanno un costo. Ecco perché, in uno studio su milioni di sessioni utente reali, le pagine che hanno generato conversioni avevano il 38% in meno di immagini rispetto a quelle che non hanno generato conversioni. Quindi dovresti eliminare tutte le immagini? Ovviamente no. Tuttavia, devi assicurarti che le immagini che invii siano ottimizzate per tutti gli utenti, indipendentemente dai dispositivi che utilizzano.

Che cos'è?

La pubblicazione di immagini ottimizzate non si limita a fare clic su "Salva per il web". Ecco perché images.tooling.report controlla una vasta gamma di funzionalità. Copriamo le nozioni di base, ad esempio il livello di compressione offerto dai diversi strumenti e servizi, nonché le ottimizzazioni di rete come gli header della cache a lungo termine.

Ma non ci fermiamo qui. Abbiamo cercato opzioni più avanzate, come il supporto di Save-Data, ECT e altri suggerimenti per i client, per cercare un'analisi psicovisiva automatica che possa utilizzare modelli di dati per comprimere ripetutamente le immagini, al fine di trovare la versione che occupa meno byte senza modificare il modo in cui i nostri occhi la percepiscono. Stai spremendo ogni ultimo bit non visivo dalle tue immagini prima di inviarle?

Uno screenshot della pagina di destinazione di images.tooling.report in modalità oscura.

Naturalmente, ogni sito è diverso: nessun servizio o strumento faceva esattamente tutto ciò che cercavamo. È normale. Pertanto, abbiamo suddiviso i test in diverse categorie. Copriamo reti CDN (Content Delivery Network), progetti self-hosted, plug-in per sistemi di gestione dei contenuti (CMS) e site builder. Si tratta di definizioni piuttosto vaghe che hanno lo scopo di rendere più pertinente il confronto tra opzioni diverse:

  • I plug-in CMS sono pacchetti che rappresentano un'opzione facile per lo sviluppo su piattaforme come WordPress.
  • Gli strumenti per la creazione di siti web confrontano una serie di servizi diversi che puoi utilizzare per creare il tuo sito web.
  • Self-hosted è pensato per gli sviluppatori che sanno clonare un progetto Git o eseguire la propria immagine Docker in produzione.
  • Le CDN sono un po' più complicate. Alcune di queste sono CDN nel senso tradizionale, ma altre sono servizi che fanno da proxy o ospitano le tue immagini in edge.

Non puoi accontentare tutti sempre, ma dovresti controllare i test e le funzionalità in fase di valutazione e vedere come si comporta il tuo ottimizzatore delle immagini. E se non stai già facendo qualcosa per l'ottimizzazione delle immagini? In questo caso, è un'ottima occasione per dare un'occhiata agli strumenti per le immagini e scoprire quali vantaggi puoi offrire agli utenti che già utilizzano il tuo sito.

Passaggi successivi

Pensi che ci sia sfuggito uno strumento o un servizio per le immagini? Facci sapere. Sia gli strumenti e i servizi sia i test stessi sono in continua evoluzione. Ogni volta che hai bisogno di un punto di riferimento rapido per controllare le ultime novità sulle immagini di spedizione, assicurati di visitare per prima cosa images.tooling.report.

Immagine hero di Michael Maasen su Unsplash.