Come ottimizzare le tue immagini web

Vorrei che i tuoi clienti smettessero di chiedere "Perché la velocità della mia pagina è così bassa?". Questi semplici passaggi ti assicureranno di creare immagini di alta qualità che non siano sovradimensionate.

Il problema

Quindi hai appena creato il tuo nuovo sito e ottimizzato tutto il possibile, comprese le dimensioni delle immagini personalizzate, e poi lo passi all'utente. Due settimane dopo ricevi il messaggio "Perché la velocità della mia pagina è così bassa?" o "Perché la pagina impiega così tanto tempo a caricarsi?" domande. Vai a controllare il sito e scopri che le immagini sono enormi! Sono sicuro che ogni sviluppatore è stato in questa posizione prima. È una cosa difficile da affrontare nell'attuale clima di immagini ad alta risoluzione che provengono da DSLR, telefoni e display retina, ma si spera che questo post tratterà alcune cose molto semplici che puoi mettere in atto per evitare alcuni di questi problemi. In definitiva, anche solo un'immagine sovradimensionata può ridurre seriamente le valutazioni della velocità della pagina.

La situazione mondiale perfetta

Prima che inizi la creazione del sito web, parla con il tuo designer per assicurarti che tutte le immagini nel design seguano le proporzioni dell'immagine standard. Il ritaglio delle immagini non dovrebbe quindi diventare un problema se si impostano le dimensioni dell'immagine personalizzate di conseguenza. Prova a utilizzare 3:2, 4:3 o 16:9 poiché questi sono i rapporti di aspetto standard della fotocamera. Se ciò non è possibile e utilizzerai immagini da un sito live corrente per la ricostruzione, controlla per vedere quali sono le proporzioni e progetta di conseguenza per incorporarle, o ti ritroverai per alcuni problemi in tempi non così lontani futuro.

Limita la dimensione del caricamento del file

Ci sono molti plugin che ti permettono di controllarlo; così tanti che non li elencherò, ma una semplice ricerca ti mostrerà quanti sono. Questi plugin sono disponibili in molte forme, ma sceglierei il più semplice possibile. Normalmente aggiungono un'opzione aggiuntiva alle tue impostazioni/opzioni multimediali all'interno di WordPress che puoi impostare quando accedi come amministratore e sarebbe simile all'immagine qui sotto.

Se non vuoi che i plugin si gonfino di più, puoi farlo anche collegandoti al 'wp_handle_upload_prefilter'. Un buon esempio di come utilizzarlo può essere visto in questo post del blog in fondo alla pagina.

Per le immagini che vengono chiamate utilizzando i campi personalizzati avanzati, puoi aggiungere dimensioni immagine/dimensioni file massime-minime e limitare a tipi di file specifici, tutto all'interno dell'interfaccia utente. Ti consiglio vivamente di farlo.

Penseresti che forzare una dimensione massima di caricamento sia sufficiente, giusto? Beh, purtroppo non lo è, questo non impedirà al client di caricare un'immagine da 500 kb che è solo 100 px x 100 px, e nemmeno rimuoverà i dati EXIF ​​(meta) dal file. Quindi dovremo implementare un altro livello di controllo.

Ottimizza le immagini

Il modo migliore per farlo è utilizzare l'opzione Salva per Web di Photoshop, ma non puoi garantire che l'utente disponga di questo software, quindi ora abbiamo due opzioni a nostra disposizione:

Plugin

Ci sono alcuni buoni plugin disponibili là fuori con Smush che è uno dei migliori, in quanto è ottimo per l'ottimizzazione in batch e consente anche un'opzione di dimensione massima di caricamento del file. C'è un'ulteriore casella di controllo per rimuovere i dati EXIF ​​nelle impostazioni.

Ottimizzazione delle immagini online Online

Anche in questo caso ce ne sono molti là fuori, ma TinyPNG è una delle opzioni più semplici disponibili: carica il tuo file e scarica la versione compressa. TinyPNG rimuove tutti i dati EXIF.

Non è ancora abbastanza?

Abbiamo impostato alcuni controlli che si spera risolvano i problemi di immagine, ma sono sicuro che hai già riscontrato alcuni problemi che possono ancora verificarsi:

• La dimensione massima del file è ancora troppo grande per alcune immagini piccole
• La dimensione effettiva dei pixel può essere maggiore di quella effettivamente necessaria
• Non esiste alcun controllo visivo o confronto sulle immagini ottimizzate a meno che l'utente non disponga di un buon software di modifica delle immagini
• L'immagine è del tipo di file sbagliato

Purtroppo non c'è modo di aggirare questo problema e abbiamo impostato il più possibile per rilevare eventuali problemi. L'unico modo per risolvere veramente il problema è istruire l'utente sui tipi di file e assicurarsi che utilizzi una sorta di software di modifica delle immagini.

Educa i tuoi utenti

Possibili soluzioni per l'utente

Questi non sono affatto il modo perfetto per fare le cose, ma dovrebbero aiutare tutte le persone coinvolte e ridurre le dimensioni dei file delle immagini:

Conosci i tuoi tipi di file

C'è troppo da approfondire per questo post, ma se vuoi leggere di più sui tipi di file, allora questo post è una buona risorsa per uno sguardo approfondito sull'argomento. Ai fini di questo post, tuttavia, lo analizzerò nel modo più semplice possibile:

• Una fotografia contenente persone, paesaggi ecc = JPG
• Un ritaglio di una persona o di un prodotto che si sovrappone a qualcos'altro non sullo sfondo delle immagini = PNG
• Un'infografica o un'icona = GIF o PNG

Se stai pensando di caricare qualcos'altro come un TIF, PSD o AI come file di immagine per il tuo sito Web, FERMATI ora.

Il solito scenario

Software

• Sistema operativo Windows che utilizza Microsoft Paint

L'immagine

• Massimizza il browser in modo da poter vedere la dimensione della finestra più grande con cui viene utilizzata l'immagine. Usa lo strumento di cattura di Windows per calcolare la dimensione effettiva in pixel dell'immagine
• Crea una nuova tela/documento in MS Paint in base alle dimensioni dello strumento di cattura
• Adatta la tua nuova immagine alla nuova tela
• L'immagine ha bisogno di uno sfondo trasparente?
• Sì ? Salva come GIF o PNG
• no ? Salva come JPG
• Usa TinyPNG per comprimere la tua immagine
• Carica l'immagine compressa

Lo scenario migliore

Software

• Qualsiasi sistema operativo che utilizza Photoshop

L'immagine

• Massimizza il browser in modo da poter vedere la dimensione della finestra più grande con cui viene utilizzata l'immagine. Usa lo strumento di cattura dello schermo (strumento mac) per calcolare la dimensione effettiva in pixel dell'immagine
• Crea una nuova tela/documento in Photoshop in base alle dimensioni dello strumento di cattura
• Adatta la tua nuova immagine alla nuova tela
• Seleziona salva per il web
• Assicurati di visualizzare l'immagine al 100%
• L'immagine ha bisogno di uno sfondo trasparente?
• Sì ? Seleziona GIF, PNG8 o ​​PNG24 dal menu a discesa (vedrai la qualità dell'immagine e la dimensione del file cambiare quando lo fai)
• no ? Seleziona JPG dal menu a discesa
• Modificare le varie impostazioni dipendenti dal formato dell'immagine fino a ottenere un buon compromesso qualità/dimensione dell'immagine
• Seleziona il menu a discesa dei metadati e scegli nessuno
• Salva, quindi carica sul tuo sito web

Conclusione

Si spera che questo possa aiutare l'utente a comprendere meglio come aggiungere nuove immagini al proprio sito e salvare molte dimensioni del file. So che questo post non copre l'uso di immagini di sfondo, retina, SVG e molti altri faffery di immagini, ma se le opzioni coperte vengono applicate dovrebbe comunque aiutare la maggior parte degli utenti.

Per ulteriore assistenza con il web design, mettiti in contatto con i nostri esperti oggi.

Se hai bisogno di aiuto con il tuo sviluppo web non esitare a contattarci.