Meglio le Dimensioni dell’Immagine e Come Salvare le Immagini Per il Web e Flothemes

Salvare le immagini per il web è sempre stato po ‘ un mistero per molti. Il caricamento di immagini pesanti (dimensionamento dell’immagine originale a larghezza 5000px, immagini non ottimizzate) non solo creerà problemi con l’esperienza utente sul tuo sito, ma influenzerà anche la tua strategia SEO (velocità di caricamento, frequenza di rimbalzo, classifica, ecc.).,

Questo articolo è diviso in più parti che coprono tutto quello che c’è da sapere su come preparare le immagini per il web. Nella prima parte del post elencheremo le dimensioni delle immagini consigliate per il tuo sito Flothemes. Successivamente, l’articolo tratterà come ispezionare le varie sezioni del tuo sito web per identificare le dimensioni corrette per le tue immagini prima di caricarle sul web. Spiegheremo anche come esportare / salvare correttamente le immagini, quindi sono ottimizzate per la velocità.,

Infine, forniremo alcuni suggerimenti SEO di immagine su come titolare correttamente le tue immagini quando le salvi e perché l’utilizzo di tag ALT migliorerà il tuo SEO. Per le immagini già caricate sul tuo sito, ti mostreremo come identificare le immagini che sono troppo grandi e stanno rallentando il tuo sito. Cominciamo!

Perché le dimensioni delle immagini e le prestazioni del sito sono importanti?

Le immagini non ottimizzate rallentano i siti web. Siti Web lenti = cattiva esperienza utente, minori possibilità di classificare nelle ricerche di Google e, infine, meno richieste e clienti.,
Salvare le immagini con dimensioni appropriate e ottimizzare le immagini per il web può aiutare con alcune cose:

• Velocità – secondo una ricerca fatta da Google, se una pagina web viene caricata in più di 5 secondi, la probabilità che un utente mobile lascerà quella pagina aumenta del 90%. Ridimensionando e riducendo le dimensioni delle immagini, rendi più veloci le pagine del tuo sito web.
• User experience-buona qualità, immagini di impatto aiuta i visitatori hanno un’esperienza più coinvolgente mentre navigano il tuo sito web., Mantenendo le immagini ottimizzate e caricandole velocemente, garantisci ai tuoi visitatori un’esperienza fluida e fluida, che li motiva a trascorrere più tempo sul tuo sito ed esplorare i tuoi contenuti.
• SEO ranking-la velocità del sito è un fattore di classifica. Il più veloce è il tuo sito, meglio si può potenzialmente rango. Le pagine Web con immagini ottimizzate verranno caricate molto più velocemente su dispositivi desktop e mobili.
• Vendite – tempi di caricamento più rapidi e una migliore SEO possono aiutare a portare più utenti sul tuo sito, il che aumenta le possibilità di essere informati e prenotati.,

Nota: quando parliamo di dimensioni immagine intendiamo la dimensione dell’immagine in pixel.

Quali sono le migliori immagini di dimensioni per il web e Flothemes?

Quando si caricano immagini sul web ci sono una serie di cose da prendere in considerazione, come ad esempio ciò che è l’immagine utilizzata per, quanto grande dovrebbe essere il file, e che tipo di immagine deve essere utilizzato per le diverse aree del tuo sito.,

Uso e tipo di immagine

Ci sono vari casi in cui si desidera utilizzare diverse dimensioni dell’immagine per le diverse aree del tuo sito, di seguito tratterò le aree più comuni e le opzioni di dimensionamento è possibile utilizzare per ciascuno. Si noti che questi sono raccomandati, retina amichevole, opzioni di dimensionamento considerando che la maggior parte degli utenti visualizzare il sito su un dispositivo che è mobile o 13-15 pollici dimensione media. Tuttavia, se stai cercando di rendere il sito perfetto per il tuo monitor da 27 pollici (che ha una risoluzione molto alta), nota che potrebbe non essere quello che usano i tuoi potenziali clienti.,

Se vuoi essere più preciso su come i tuoi utenti visualizzano il tuo sito e il tuo portfolio, puoi controllare i dispositivi utilizzati per accedere al tuo sito tramite Google Analytics (vai su Audience – Technology – Browser& OS – Screen resolution) e regolare le dimensioni consigliate in base alla proporzione richiesta del tuo utente medio.

Immagini a larghezza intera

2400x1600px, jpeg, salvate per il web e ottimizzate

In tutto il sito potresti avere sezioni in cui devi usare immagini a larghezza intera che coprono l’intero schermo da sinistra a destra., Queste aree possono essere immagini eroe, presentazioni a schermo intero, immagini banner. Per garantire che le immagini a larghezza intera abbiano un bell’aspetto su qualsiasi dispositivo grande o piccolo, la dimensione consigliata è 2400x1600px. Si noti che i dispositivi hanno un rapporto diverso da quello che si spara ed è possibile che le immagini verranno ritagliate quando visualizzate sul web. Come raccomandazione, prova a scattare foto più ampie del solito per i tuoi contenuti web, per evitare di ritagliare contenuti importanti dell’immagine.,

all’Interno le Immagini di Contenuto

Orizzontale – larghezza max 1500px, jpeg, salvato per il web, e ottimizzato
Verticale – larghezza max 1000px, jpeg, salvato per il web, e ottimizzata

le pagine del sito, ci saranno sezioni composte da immagini, aree di testo, chiamate a pulsanti di azione, etc. Fondamentalmente queste sono le sezioni in cui le immagini fanno parte del contenuto interno (letto come “non a tutta larghezza”)., In questi casi, a meno che non venga specificato il dimensionamento consigliato come fanno alcuni dei nostri blocchi Flothemes, è possibile seguire le raccomandazioni di cui sopra per le immagini orizzontali e verticali. In base al rapporto, l’altezza si regolerà di conseguenza quando si salvano le immagini.,mostra gallerie: assicurarsi che essi sono tutti la stessa altezza consigliata 1500px, a prescindere se sono in posizione orizzontale o verticale

Post sul Blog Immagini

• se si stanno preparando le immagini da caricare all’interno di un blogpost, assicurarsi che essi sono tutti la stessa larghezza, raccomandato 1500px, a prescindere se sono in posizione orizzontale o verticale

Immagini

Ci sono 3 tipi di immagini: il ritratto, il paesaggio e l’eroe immagini., Il dimensionamento delle immagini verticale e orizzontale segue la stessa raccomandazione delle immagini all’interno del contenuto, mentre le dimensioni consigliate per le immagini eroe sono coperte da immagini a larghezza intera. La chiave per avere buone immagini in vetrina è la coerenza. Se si desidera utilizzare tutti i ritratti assicurarsi che siano della stessa dimensione, lo stesso vale per le immagini di paesaggio e di eroe. Se si utilizza una griglia in muratura, il dimensionamento sopra non è così rilevante, basta assicurarsi che le immagini siano di almeno 1000px in larghezza.,

Se hai problemi con il dimensionamento delle immagini, assicurati di dare un’occhiata alle opzioni di dimensionamento delle immagini nelle impostazioni dei Flothemes per assicurarti che siano impostate correttamente.

Modi per scoprire le dimensioni corrette dell’immagine per il tuo web

Potrebbe essere possibile che le dimensioni consigliate sopra non corrispondano alle tue esigenze a causa di un layout specifico. Se non sei sicuro della giusta dimensione dell’immagine, per fortuna, ci sono alcuni modi che possono aiutarti a ispezionare facilmente le immagini del tuo sito Web e identificare il dimensionamento corretto necessario per ogni elemento del tuo sito.,

Una cosa importante da ricordare è che per i dispositivi retina, è necessario raddoppiare la densità di pixel dell’immagine. Ciò significa che hai bisogno di immagini due volte più grandi per i dispositivi retina in modo che siano belle e nitide. Quindi, una volta che hai trovato le dimensioni corrette dell’immagine per ogni sezione del tuo sito, ti consigliamo di raddoppiare quelle dimensioni, e solo allora esportarle e caricarle sul tuo sito.

a., Utilizzando l’estensione Info dimensioni immagine

Il primo metodo per trovare le dimensioni delle immagini per il tuo sito è utilizzando l’estensione Info dimensioni immagine per Chrome (Se non si utilizza Chrome sul computer, si consiglia vivamente di utilizzarlo durante la creazione del sito). Una volta installata l’estensione, questo strumento ti permetterà di scoprire le dimensioni dell’immagine di ogni elemento dell’immagine sul tuo sito.

Controlla le immagini sul tuo sito, prendere appunti, e poi con questa conoscenza sarete in grado di adattare le vostre fotografie esattamente per adattarsi agli spazi come sono destinati nella progettazione tema., Basta ricordare, con schermi retina si richiede le immagini di essere due volte più grande dello spazio previsto. Quindi, se hai uno spazio immagine di 750x500px, per retina dovrebbe essere 1500x1000px durante il caricamento su WordPress (o qualsiasi altra piattaforma).

Ad esempio: quando ispezioniamo un’immagine con questa estensione, viene visualizzata a 780x520px, ma la sua dimensione effettiva è 1560x1040px. Questo perché stiamo usando uno schermo retina durante l’ispezione dell’immagine. In questo caso, è possibile utilizzare le dimensioni dimensioni per scegliere le dimensioni dell’immagine.,

Su un dispositivo non retina le dimensioni visualizzate e le dimensioni rimarranno le stesse. In questo caso, raddoppiare i numeri e caricare le immagini a quella dimensione.

La limitazione principale di questo strumento, è che non può ispezionare le immagini di sfondo per il dimensionamento. Su molti temi, le immagini di sfondo vengono utilizzate al posto degli elementi HTML dell’immagine, poiché sono più flessibili durante la visualizzazione delle immagini. Se non riesci a controllare le immagini perché sono immagini di sfondo, puoi utilizzare il metodo successivo per rivedere le dimensioni delle immagini sul tuo sito.

b., Utilizzando lo strumento Inspector

Con Chrome e Safari puoi anche utilizzare lo strumento developers inspector per trovare le dimensioni delle immagini sul sito. Il principio sarà lo stesso di prima, ispezionare i vari elementi sul sito e annotare le dimensioni. Raddoppiare le dimensioni delle immagini per i dispositivi retina e poi caricarli su WordPress, una volta che sono stati ottimizzati per il web e intitolato correttamente per SEO.

Le limitazioni di questo metodo saranno che se il sito utilizza alcuni elementi reattivi impostati in valori REM, le immagini possono essere ridotte quando si utilizza l’ispettore nella stessa finestra., Se il sito utilizza anche elementi reattivi, saranno più grandi su schermi più grandi e più piccoli su altri. È meglio usare uno schermo più grande dove possibile quando si controlla il sito, in modo da ottenere il dimensionamento delle immagini più accurato. In ogni caso, utilizzando questo metodo vi darà una buona indicazione delle dimensioni per il tuo sito e vi permetterà di avvicinarsi l’aggiunta di immagini al tuo sito web con più cura.

Chrome

Chrome ha costruito in strumenti di sviluppo, che è il motivo per cui è il browser più popolare sul web per gli sviluppatori e designer., Il seguente video spiega come è possibile controllare le immagini sul tuo sito per scoprire le loro dimensioni:

Firefox

Con Firefox, molto simile a chrome, che hanno un costruito in strumento di controllo che permette di controllare le immagini per il tuo sito.

Safari

Se si utilizza Safari, è possibile utilizzare lo strumento inspector per visualizzare le dimensioni delle immagini. Controlla la seguente guida su come abilitare gli strumenti di sviluppo.,

Ora puoi andare in diverse sezioni del tuo sito e preparare le dimensioni dell’immagine.

Per le gallerie ti consigliamo di guardare l’altezza delle immagini, poiché sono generalmente vincolate dall’altezza (quindi la larghezza può essere impostata su auto).

Per i post del blog ti consigliamo di notare la larghezza per le tue immagini, poiché sono vincolate dalla larghezza (l’altezza può essere automatica).,

Per il resto degli elementi sul tuo sito, dovresti utilizzare il metodo sopra descritto per ottenere le dimensioni corrette e caricarle a dimensioni ottimali per il tuo sito.

Ora che sai di quali dimensioni hai bisogno per tutti gli elementi sul tuo sito, ti spiegheremo come ottimizzare tutte le tue immagini per le dimensioni, cioè in termini di dimensionamento dei dati. La dimensione del file delle immagini è anche molto importante per il web. Caricare immagini gonfie e pesanti sul tuo sito web metterà a dura prova le risorse del server, rallenterà il tuo sito e in effetti creerà un’esperienza utente negativa.,

Ottimizzazione e salvataggio delle immagini per il web

Ci sono un certo numero di cose da considerare quando si ottimizzano e salvano le immagini per il web. Dovresti considerare quale tipo di file usare, JPG, PNG o GIF a seconda dello scopo. Ti consigliamo di etichettare le immagini correttamente per scopi SEO e ti consigliamo di salvarle nel giusto formato di colore (sRGB per il web).

A seconda dello scopo, è necessario salvare le immagini in uno dei seguenti formati .jpg, .gif, o .png. JPG sarà il formato più comune quando si salvano le immagini per il sito Web del portfolio, ma sarà anche il più leggero in termini di dimensioni.,

Per i nomi dei file, assicurati che siano appropriati per ogni particolare immagine o post sul blog. Utilizzare solo lettere, numeri, trattini bassi e trattini. Prova a usare solo lettere inglesi. Caratteri di altre lingue, punti interrogativi, spazi, segni di percentuale possono caricare in modo errato o causare comportamenti imprevisti nelle tue gallerie o nei post del blog.

Ad esempio, se hai appena fatto un matrimonio boho nel Biltmore Santa Barbara, etichettare le immagini, boho-wedding-biltmore-santa-barbara_0001.jpg questo sarà molto più SEO friendly, e potrebbe fornire una migliore classifica per il tuo sito.,

Ottimizzazione delle immagini in Lightroom

Ammettiamolo, ci sono un sacco di impostazioni diverse tra cui scegliere e infinite combinazioni di numeri da inserire. Tuttavia, se conosci già il formato dell’immagine e le dimensioni dell’immagine del file richiesto, è molto più semplice.

In Lightroom, puoi accedere alla finestra di dialogo Esporta in 3 modi:

Evidenzia ed Esporta

Puoi semplicemente evidenziare / selezionare una foto dalla libreria di Lightroom e fare clic con il pulsante destro del mouse sulla foto. Dal menu a comparsa selezionare l’opzione Esporta.,

File ed Esportare

Il secondo modo è quello di andare in File -> Export

Utilizzando la scorciatoia da tastiera

Il terzo, e il modo più veloce è quello di utilizzare una scorciatoia da tastiera:

maiusc + comando + E (⇧+⌘+E)

non importa come ci si arriva. Ognuno di questi funzionerà, quindi scegli quello più facile da ricordare.,

Lightroom Export Dialog

Ora che sapete come esportare le immagini per il web, tratteremo le 4 sezioni e le varie opzioni da scegliere nella finestra di dialogo Lightroom export per consentire di esportare immagini ottimizzate per il web.

1. Denominazione file

Ogni esportazione può presentare le proprie impostazioni di rinomina. Se si tiene fede all’opzione predefinita, le immagini avranno lo stesso nome dei file originali e salvate come immagine JPEG., Tuttavia, ti consigliamo vivamente di selezionare la casella “rinomina in” e scegliere uno dei tanti modelli di ridenominazione che Lightroom offre per personalizzare le immagini esportate. Nella denominazione dei file, abbiamo rinominato i nomi dei file dell’immagine in “Nome-sequenza personalizzata” in cui il testo personalizzato è strettamente collegato al titolo del post del blog o alle parole chiave del post del blog.

2. In Impostazioni file

Assicurati che il tuo formato immagine sia impostato su JPEG. Questa è l’opzione più web-friendly. La tua qualità non dovrebbe essere inferiore a 65., Normalmente lo impostiamo su 75. Lo spazio colore deve essere sRGB. Questo è lo spazio colore utilizzato dal web in modo da rendere il migliore. NON selezionare la casella ” Limita la dimensione del file a:”. Il controllo di tale casella diminuirebbe significativamente la qualità del file.

Per riassumere, quando si salvano le immagini utilizzare queste impostazioni:

• 75% di qualità
• .formato jpeg (.png per loghi e icone)
• Colori sRGB

3. Dimensionamento immagine

Seleziona la casella Ridimensiona per adattarla e seleziona Larghezza& Altezza., Nella casella W: H: specificare W (Larghezza in pixel) al valore necessario (1500px per i post del blog e 2880 per le presentazioni). Lasciando vuoto il valore in H (altezza) verrà impostato su dimensionamento automatico.

Per le gallerie, puoi lasciare W come vuoto e impostare H (Altezza) su 1500px, questo dovrebbe essere ottimale per la maggior parte dei temi.

Le dimensioni di cui sopra sono già ottimizzate per i dispositivi retina.

4. Output Sharpening

Seleziona la casella accanto a “Sharpen For” e seleziona l’importo su “High”.

È ora possibile esportare le immagini, e seguire questo processo ogni volta che si sta esportando le immagini.,

Impostazioni di qualità dell’immagine

Nel mondo dei sogni di un fotografo, esportiamo sempre le immagini alla massima qualità. In realtà, scopriamo che le esportazioni di massima qualità non sono richieste. Nelle dimensioni del web, le differenze di qualità sono spesso difficili da percepire e ciò significa che possiamo ridurre leggermente la qualità, riducendo significativamente le dimensioni del file.

Finché le immagini non sono morbide, i tuoi clienti non conosceranno la differenza tra l’immagine che hai scattato e l’immagine visualizzata sul tuo sito.

Questo vale anche per i colori delle immagini., Lo schermo di tutti è calibrato in modo diverso, quindi preoccuparsi di piccole variazioni di colore tra un’immagine in un browser e nel tuo strumento di modifica preferito è una perdita di tempo, a meno che non rovini la qualità dell’immagine.

All’estremità superiore della scala di qualità, ci sono rendimenti decrescenti. La differenza di qualità percepita tra un’impostazione di qualità del 75% e del 100% è difficile da vedere, ma aumenta significativamente le dimensioni del file.

Dati i risultati di cui sopra, selezionando l’esportazione di qualità 65-75., Colpisce il corretto equilibrio tra qualità e dimensione ottimale del file immagine.

Ora è il tuo turno di rinominare i file, esportarli per il web, salvarli per il web e avrete alcune immagini davvero ben ottimizzate per il web.

Passo bonus: ottimizza le immagini prima di caricarle sul tuo sito

C’è un ultimo passo che può aiutarti a rimuovere drasticamente i dati in eccesso dalle tue immagini e ridurre le dimensioni del file – stiamo parlando di strumenti come JPEGmini o TinyJPG.

Questi strumenti possono aiutarti a ottimizzare ulteriormente le tue immagini., Scegli uno ed eseguire le immagini attraverso di essa:

1. JPEGmini – questa applicazione consente di comprimere le immagini e ridurre le dimensioni del file senza alcun effetto visibile sulla qualità dell’immagine. Se hai la versione Pro, c’è un’estensione per Lightroom che lo farà automaticamente all’esportazione – uno strumento altamente raccomandato per qualsiasi fotografo.
2. TinyJPG or TinyPNG – è possibile eseguire le immagini attraverso tinyJPG o tinyPNG per comprimere ulteriormente le immagini. Ci sono 2 limitazioni però., Con la versione gratuita di questo strumento, puoi comprimere solo 20 immagini alla volta e la dimensione del file per immagini dovrebbe essere inferiore a 5 MB.

Questo sarà il passo finale nella creazione di immagini ottimizzate per il web veloce per mantenere la velocità del tuo sito veloce, e le immagini sembrano grandi!

Scopri di più leggendo questa guida completa su come ottimizzare le immagini per il tuo sito WordPress.

Immagine SEO

Ora che hai le tue immagini di dimensioni, ottimizzato e caricato sul tuo sito-ora ti consigliamo di aggiungere tag ALT! Questo è il passo finale nella creazione di immagini ottimizzate per scopi SEO., Il tag ALT è ciò che i motori di ricerca utilizzano per leggere le immagini. Senza di loro, le tue immagini sono praticamente inesistenti sul web.

Per fortuna con WordPress puoi entrare nella tua libreria multimediale dopo il caricamento e etichettare ogni immagine., Un ottimo plugin che vi permetterà di fare questo velocemente, è WP Meta SEO, quando aggiunto si può andare a WP Meta SEO > Informazioni dell’Immagine e aggiungere Tag ALT per le immagini in cui non è presente, una volta completato, il plugin può essere de-attivato:

Ci sono anche diversi plugin che aggiunge il tag alt automaticamente. Rank Math è una buona soluzione plugin per questo, è sufficiente installarlo e aggiungerà automaticamente i tag ALT al momento del caricamento dalla descrizione dell’immagine, o il titolo.,

Leggi questa guida SEO immagine per scoprire ulteriori suggerimenti e trucchi e assicurarsi di ottenere il massimo dalle vostre immagini nei risultati di ricerca.

Quindi è così gente. I 3 passi per avere immagini ottimizzate per il tuo sito web.

Inizia con il calcolo delle dimensioni dell’immagine, quindi salvale correttamente per il Web, aggiungi titoli appropriati e ottimizza le loro dimensioni. Infine, aggiungere tag alt per migliorare SEO tramite WordPress (Dovrebbe essere possibile aggiungere tag ALT in tutti i sistemi di gestione dei contenuti, fare riferimento alla documentazione per scoprire come, o raggiungere il supporto).,

Trovare immagini non ottimizzate

Se hai già caricato immagini sul tuo sito e vuoi sapere come trovare quelle che stanno rallentando la tua pagina, controlla il seguente video. Strumenti come GTMetrix o Pingdom, o utilizzando la console del browser vi permetterà facilmente di trovare le immagini che sono troppo grandi per il web.

Se vuoi saperne di più sull’ottimizzazione del tuo sito per la velocità, consulta questa utile guida.

Flothemes
Che ti abilita