Come garantire la migliore dimensione dell'immagine per la velocità del sito Web del cellulare

Sei sul tuo telefono, pronto per l'acquisto di quel prodotto che hai osservato e il sito Web solo .... Carica. Improvvisamente, stai toccando con impazienza, chiedendoti se la tua Internet è rotta o il sito è maledetto. E siamo onesti, probabilmente rimbalzi. Non sei solo.

Sapevi che il 53% degli utenti mobili abbandonerà una pagina se ci vuole più di 3 secondi per caricare? Ora pensa a questo riguardo al tuo sito web. È un grosso pezzo di potenziali clienti che svaniscono, per non tornare mai. I tempi di caricamento lenti non sono solo frustranti per i visitatori; Hanno danneggiato la tua linea di fondo. Hanno un impatto sulle classifiche dei motori di ricerca (SERP) e rendono più difficile per le persone trovarti in primo luogo. In questo post, ti mostreremo come controllare quelle pagine pesanti da immagini e garantire la migliore dimensione dell'immagine per la velocità del sito Web del telefono cellulare. Ti presenteremo anche alcuni buoni strumenti, come Divi, che ti aiutano a mostrare le tue immagini in modo reattivo.

Perché la velocità mobile è importante?

L'impatto di un sito Web lento è molto più che essere fastidioso. Può influire sull'esperienza utente (UX), l'ottimizzazione dei motori di ricerca (SEO) e i tuoi profitti.

Immagina di navigare per un nuovo abito estivo o i nuovi auricolari più caldi. Tocca un sito Web e ti sembra di guardare la vernice asciutta. La frustrazione si inserisce e probabilmente farai una cauzione per trovare un altro rivenditore con un sito più veloce. Questo si chiama rimbalzo ed è una cattiva notizia per le aziende online. Secondo Databox, la frequenza di rimbalzo media è di circa il 44%. Qualsiasi cosa in più di quella può portare a entrate perse e mancanza di coinvolgimento, uccidendo un business online.

Non dimentichiamo il SEO mobile. Google è tutto per fornire la migliore esperienza utente possibile, tra cui la priorità dei siti mobili a caricamento in rapida carico. Usano l'indicizzazione mobile-first, il che significa che guardano principalmente la versione mobile del tuo sito quando determinano le classifiche di ricerca.

Tuttavia, l'impatto della scarsa velocità mobile va oltre gli utenti frustrati e le classifiche più basse. Può e colpire i tuoi profitti. Immagina un sito Web di e-commerce a carico lento costruito con WordPress. Quei secondi extra (oltre 1-2 sono troppo lunghi) possono costare le vendite. Mantenere il tuo sito in esecuzione rapidamente sui dispositivi mobili è indispensabile per le entrate, quindi assicurarti di non perdere i clienti perché il tuo sito Web sta impiegando troppo tempo per caricare è cruciale.

Esistono molti modi per accelerare il tuo sito, ma la frutta bassa sta determinando la migliore dimensione dell'immagine per la velocità del sito Web del telefono cellulare.

Nozioni di base sull'ottimizzazione dell'immagine per WordPress

Le immagini sono cruciali per rendere il tuo sito Web buono e mantenere gli utenti coinvolti. Le immagini troppo grandi possono rallentare davvero il tuo sito web. Come abbiamo imparato, gli studi dimostrano che la maggior parte delle persone non aspetterà per sempre. Quindi, come puoi mantenere le immagini belle senza sacrificare la velocità? Esploriamo alcune basi per mantenere il tuo sito in esecuzione veloce e senza intoppi.

1. Scegli il giusto formato dell'immagine

Puoi utilizzare diversi tipi di immagini sul tuo sito Web WordPress, tra cui JPG, PNG e WebP. Qual è il migliore da usare? Scaviamo più a fondo in ogni tipo di immagine e quali situazioni sono meglio usarli.

• JPG: Queste sono come le tue foto di tutti i giorni. Sono ottimi per immagini con ampie variazioni di colore e transizioni fluide, come paesaggi o ritratti. Sono buoni per la maggior parte delle situazioni, come background di eroi, foto di team, immagini di blog in primo piano, ecc. Detto questo, i JPG possono essere dimensionati in modo inappropriato, rendendoli più grandi di dimensioni dei file.
• PNG: i PNG sono perfetti per le immagini con bordi affilati, come loghi o grafica con testo. Sono anche fantastici per immagini con grandi immagini di colore solido perché mantengono i colori nitidi e puliti. Tuttavia, i PNG tendono ad avere una dimensione del file maggiori, quindi usa i file PNG per aree più piccole del design per ridurre le loro dimensioni.
• WebP: Google's Brainchild, WebP, offre spesso le migliori compressioni, risultando in una dimensione del file molto più piccola, anche quando si utilizzano immagini di grandi dimensioni (esempio: 1920px x 1080px). La qualità dell'immagine non è buona come JPG, ma la differenza di dimensioni tra i due è significativa.

2. Ridimensionare le immagini

La dimensione dell'immagine è importante. Per mantenere basse le dimensioni, caricalo immagini che sono più grandi che necessarie sul tuo sito Web. Non è necessario caricare un'immagine gigante e poi ridurla. Crea un lavoro extra per te e rallenterà il tuo sito web.

È importante ricordare che una dimensione non si adatta a tutto per quanto riguarda le immagini. Un visitatore su uno smartphone ha bisogno di un'immagine enorme progettata per uno schermo desktop più grande? Non lo fanno. Usa immagini reattive quando possibile per fornire un'immagine perfettamente dimensionata per ogni dimensione dello schermo. Ci esamineremo più tardi, ma uno dei modi migliori per garantire che le tue immagini siano reattive per WordPress è usare un tema WordPress, come Divi, che ti consente di caricare immagini per ogni punto di interruzione del browser, mantenendo giù le dimensioni del file.

3. Spremi il non necessario

Quando si tratta di dimensioni dell'immagine, più piccolo è meglio. Quando si utilizzano immagini in WordPress, vogliamo rendere le immagini il più piccole possibile senza sacrificare la qualità. È possibile utilizzare strumenti di compressione come i plug -in di ottimizzazione delle immagini per fare il sollevamento pesante per te. Strumenti come EWWW Image Optimizer sono buoni, ma ti immergeremo più a fondo negli strumenti più avanti in questo post.

Molti plug -in WordPress e strumenti di ridimensionamento delle immagini online utilizzano una compressione perdita o senza perdita per ridurre le dimensioni delle immagini. La compressione senza perdita è come piegare con cura un pezzo di carta: puoi spiegarlo perfettamente e ottenere la schiena originale se necessario. È ottimo per le immagini con bordi affilati, ma potrebbe non comportare sempre la riduzione delle dimensioni del file.

D'altra parte, la compressione senza perdita è un po 'più aggressiva. È come accartocciare lo stesso pezzo di carta. Potresti perdere un po 'di dettagli, ma otterrai una dimensione del file molto più piccola.

4. Carica immagini quando sono pronte per essere visti

Un altro passo che puoi fare è il carico pigro immagini su WordPress. Immagina di scorrere una lunga pagina. Hai davvero bisogno di caricare tutte le foto contemporaneamente? Probabilmente no. Il caricamento pigro carica solo le immagini devi visualizzare la pagina, mettendo quelle più in basso nella pagina in attesa di caricarle una volta raggiunti. I plugin, come WP Rocket, possono facilmente aggiungere un caricamento pigro al tuo sito Web WordPress. Accelererà i tempi di caricamento della pagina iniziali, il che è imperativo per mantenere felici i visitatori e le dimensioni della pagina.

Best practice della dimensione dell'immagine

Quando si tratta di dimensioni dell'immagine, ci sono alcune pratiche chiave da tenere a mente per garantire che il tuo sito Web si carichi rapidamente e abbia un bell'aspetto su tutti i dispositivi:

Usa le dimensioni dell'immagine reattive

Dispositivi diversi hanno dimensioni e risoluzioni di schermate diverse, quindi un approccio unico per tutti non funzionerà. Ad esempio, un desktop potrebbe aver bisogno di un'immagine dimensionata a 1920 px, mentre un dispositivo mobile richiede solo 600px di larghezza. È possibile servire le giuste dimensioni per ciascun dispositivo utilizzando immagini reattive. Strumenti come l'attributo segreto in HTML o un tema WordPress reattivo possono mantenere le immagini contenute nel Div per fornire la dimensione dell'immagine appropriata in base al dispositivo dell'utente.

Le proporzioni sono importanti

Mantenere un traditore di aspetto coerente tra le tue immagini può aiutare a evitare distorsioni o strane ritagli. Ad esempio, se l'immagine desktop ha un rapporto di aspetto 16: 9, la versione mobile dovrebbe mantenere lo stesso rapporto, anche se è un'immagine più piccola. Ciò garantisce che le tue immagini appaiano proporzionate e professionali in tutte le dimensioni dello schermo.

Evita i dimensionali eccessivi

Il caricamento di immagini più grandi delle necessarie è un errore comune che può rallentare il tuo sito Web. Ad esempio, se l'area di contenuto del tuo sito Web è larga solo 1080px, il caricamento di un'immagine larga 2000px non è necessario. Le immagini di grandi dimensioni consumano larghezza di banda e archiviazione, portando a tempi di caricamento della pagina più lenti. Ridimensiona sempre le immagini per abbinare le dimensioni massime visualizzate sul tuo sito.

Test tra i dispositivi

Anche con le giuste dimensioni, le immagini possono comportarsi diversamente su vari dispositivi e browser. Testa sempre le tue immagini su più dispositivi - desktop, tablet e smartphone - per assicurarti che sembrino nitidi e carichi rapidamente. Strumenti come il test per i dispositivi mobili di Google o gli strumenti per sviluppatori del browser possono aiutarti a trovare e risolvere i problemi di immagine per tutte le dimensioni dello schermo.

Considera la compressione dell'immagine

Anche con le dimensioni corrette, le immagini possono ancora essere troppo grandi. Gli strumenti di compressione possono ridurre le dimensioni dei file senza sacrificare la qualità. Ad esempio, un JPG di alta qualità o un'immagine WebP può essere compresso per caricare più velocemente pur sembrata. La combinazione di dimensioni adeguate con la compressione garantisce che le tue immagini abbiano un bell'aspetto e mantieni la dimensione della pagina minima.

Quali sono i migliori strumenti per dimensionare le immagini in WordPress?

Esistono alcuni modi per ridimensionare facilmente le immagini per WordPress: con un plug-in, caratteristiche integrate di un tema premium come Divi o con Divi AI. Esploriamo questi di più, quindi capirai meglio cosa fanno.

1. Plugin WordPress

L'uso di un plug -in di ottimizzazione delle immagini è uno dei modi migliori per ridimensionare le immagini. In genere ti consentono di eseguire azioni come l'ottimizzazione in blocco delle immagini o il ridimensionamento delle immagini mentre vengono caricate nella galleria multimediale di WordPress. Molti offrono anche funzionalità avanzate come la conversione WebP, il caricamento pigro e vari livelli di compressione delle immagini.

• EWWW Image Optimizer: un'opzione robusta con funzionalità come ottimizzazione sfusa, ottimizzazione di fondo e conversione in formato WebP. EWWW Image Optimizer offre un piano gratuito con utilizzo limitato e piani a pagamento a partire da $ 8 al mese.
• Shortpixel: noto per i suoi eccellenti algoritmi di compressione e la capacità di ridurre significativamente le dimensioni dei file di immagine mantenendo la qualità. ShortPixel offre un piano gratuito con utilizzo limitato e piani mensili a partire da $ 9,99 mensili.
• Optimole: enfatizza la velocità e le prestazioni. Utilizza un sistema basato su cloud per l'ottimizzazione e la consegna delle immagini. Optimole offre un piano gratuito con utilizzo limitato e piani a pagamento a partire da $ 22,99 al mese.
• WP Smush : un'opzione popolare e altamente valutata. Smush offre piani gratuiti e a pagamento (a partire da $ 3 al mese) con funzionalità come ottimizzazione automatica, compressione perdita/perdita, caricamento pigro e conversione WebP.
• Immagina: un plug-in basato sull'intelligenza artificiale che si concentra sulla compressione di alta qualità con una perdita minima. Imagify fornisce un piano gratuito con utilizzo limitato e piani a pagamento a partire da $ 11,99 al mese.

2. Divi (tema wordpress e costruttore di pagine)

Divi è più di un semplice tema WordPress: è un quadro completo per la creazione di siti Web reattivi. Fornisce un robusto builder visivo front-end con controlli reattivi che consentono di utilizzare le migliori dimensioni dell'immagine per la velocità del sito Web del telefono cellulare.

Divi gestisce le dimensioni delle immagini mobili attraverso il suo sistema di editing reattivo e le impostazioni di progettazione. Quando si aggiungono immagini in Divi, è possibile impostare immagini diverse per viste desktop, tablet e mobili. Questo fa parte delle funzionalità di progettazione reattive di Divi, consentendo di ottimizzare le immagini per ciascun tipo di dispositivo. È possibile regolare le impostazioni come dimensioni, posizione, offset orizzontale e altro ancora, in particolare per i dispositivi mobili, garantendo che le tue immagini sembrano perfette in tutte le dimensioni dello schermo.

Modifica delle immagini per schermi più piccoli

All'interno di qualsiasi modulo di progettazione che contiene un'immagine, i controlli reattivi di Divi consentono di visualizzare un'immagine di sfondo per un desktop mentre una diversa viene mostrata per tablet e dispositivi mobili. Ad esempio, durante la modifica di una sezione di eroi su un sito Web Divi, è possibile aggiungere un'immagine di sfondo che misura 1920px x 1080px , che è la dimensione perfetta per schermi di grandi dimensioni. La visualizzazione della stessa immagine su un dispositivo mobile potrebbe non essere buona, a seconda dell'immagine utilizzata. Pertanto, Divi include le impostazioni che consentono di aggiungere un'immagine di sfondo più piccola (o un'immagine completamente diversa) per schermi più piccoli.

Posizionamento di sfondo

Divi ti consente anche di controllare come le immagini di sfondo sono posizionate su dimensioni dello schermo diverse. Ogni modulo, colonna, riga e sezione ha questi controlli, rendendo facile garantire che un'immagine abbia un bell'aspetto, indipendentemente da quale dispositivo visitatori stanno utilizzando.

Ad esempio, è possibile impostare un'immagine di sfondo centrata su un desktop ma riposizionarla in alto o in basso sui dispositivi mobili. Ciò garantisce che la parte più importante dell'immagine sia sempre visibile, indipendentemente dalle dimensioni dello schermo. Questo è un ottimo modo per utilizzare un'immagine e ridurre al minimo le dimensioni della pagina.

Divi ha un caricamento pigro integrato

Quando si aggiungono immagini o sfondi usando Divi, il tema si occupa del sollevamento pesante applicando automaticamente il caricamento pigro. Le immagini non si caricano fino a quando l'utente non scorre verso quella sezione, mantenendo la tua pagina scattante e reattiva. Divi sfrutta gli attributi HTML supportati dai browser moderni, garantendo che le immagini siano differite con sovraccarico di elaborazione minima. Il risultato è una velocità di pagina più veloce e un'esperienza utente più fluida. Riducendo il numero di immagini caricate in anticipo, Divi aiuta a migliorare le metriche chiave come la più grande vernice contentosa (LCP) e aumenta le prestazioni di Core Web Vitali.

Per saperne di più sull'uso delle immagini all'interno di Divi, dai un'occhiata alla nostra guida definitiva per l'uso di immagini all'interno di Divi.

Ottieni Divi

3. Divi Ai

Un altro modo in cui è possibile utilizzare Divi per garantire la migliore dimensione dell'immagine per la velocità del sito Web del telefono cellulare è utilizzare Divi AI per generare immagini di dimensioni perfette. Divi Ai è come un assistente di design personale per i tuoi siti Web. Un prompt di testo può generare testo, codice, pagine Web, siti Web completi e foto perfette dei pixel.

Ad esempio, hai bisogno di un'immagine per una maestosa catena montuosa coperta di neve per un'attività di noleggio di snowboard. Hai setacciato i siti di immagini di Royalty-Free Stock ma non riesci a trovare quello che vuoi. Divi Ai può generare quell'immagine per te con le dimensioni specificate.

E grazie ai controlli reattivi di Divi, puoi anche usare Divi AI per generare immagini per schermi più piccoli.

Divi Ai non crea solo belle immagini. Crea immagini intelligenti . Puoi dire a Divi Ai esattamente di quale dimensione hai bisogno e offre.

Ottieni Divi Ai

Divi rende le immagini di ridimensionamento per i siti Web mobili un gioco da ragazzi

Trovare la migliore dimensione dell'immagine per la velocità del sito Web del telefono cellulare non deve essere una sfida. Se scegli di creare siti Web con Divi, sarai ben attrezzato per affrontare le immagini a carico lento. Le caratteristiche di ottimizzazione delle immagini integrate di Divi, tra cui ridimensionamento reattivo e caricamento pigro, lavorano dietro le quinte per garantire che le immagini vengano visualizzate perfettamente per qualsiasi dimensione dello schermo. Ma i benefici di Divi non si fermano qui. Con Divi AI, puoi generare immagini di alta qualità nelle dimensioni esatte di cui hai bisogno, eliminando le pagine Web ingombranti e caricanti.

Per un controllo ancora maggiore, sfrutta la potenza di plugin come EWWW Image Optimizer per comprimere ulteriormente le immagini e perfezionare la velocità del tuo sito Web. La combinazione dei punti di forza di Divi con strumenti potenti ti consente di creare un sito Web che sembra incredibile e carichi rapidamente, mantenendo felici i tuoi visitatori e la tua attività prospera.

Vuoi saperne di più su come accelerare il tuo sito web? Dai un'occhiata a questi post dal nostro blog:

• Come aumentare il punteggio di Google PagesPeed Insights per WordPress
• 12 migliori plug -in di ottimizzazione della velocità di WordPress (classificata)
• Divi Speed ​​Optimization: The Ultimate Guide
• 5 aziende di hosting WordPress più veloci (testate)