• S
    User •

    gtmetrix immagini da scalare

    Salve a tutti,
    sono piuttosto confusa e avrei bisogno che qualcuno mi aiutasse a fare chiarezza. Ho un wordpress+woocommerce. Lo sviluppatore mi disse: le immagini le devi inserire delle dimensioni tot x tot pixel. Bene, al netto della compressione seguii le sue indicazioni. Ad oggi quando eseguo una scansione con gtmetrix risulta che le immagini non sono scalate e mi si suggerisce per ogni immagine una dimensione. Ho fatto quindi una prova su un'area di test: ovviamente scalando le immagini il peso della pagina diminuisce ma all'interno delle schede prodotto la foto risulta molto decentrata e troppo piccola (ho testato anche su mobile). È però evidente che le misure datemi dallo sviluppatore sono comunque troppo grandi... e non vengono visualizzate in quelle dimensioni.
    Ora francamente io non so bene che fare...e non capisco come gtmetrix possa suggerire delle misure così esigue (262x187px). Sinceramente se si potesse davvero ridurre il peso almeno di alcune pagine non sarebbe affatto male... Con lo strumento per sviluppatori ho visto che il contenitore delle img scheda prodotto sarebbe 652.5x374... dovrei provare a adeguarci le immagini?
    Grazie a chi mi vorrà rispondere

    0
  • H
    User Attivo •

    @saragialla said:

    non capisco come gtmetrix possa suggerire delle misure così esigue (262x187px).

    Ciao, perché legge le impostazioni del set immagini.

    Quando carichi un'immagine, per un blog, ecommerce o altro, viene creato un set di miniature. L'anteprima di un articolo mostrerà quindi un'immagine più piccola, ma quando aprirai l'articolo verrà mostrata l'immagine più grande. Questa operazione dipende sia da Wordpress ma anche da Woocommerce e dal tema che utilizzi.

    Se vuoi ottimizzare al meglio le immagini devi verificare le dimensioni che applica Woocommerce ma anche e soprattutto il tema perché molti temi sovrascrivono le dimensioni che assegna Woocommerce.

    Parti da Aspetto > Personalizza > Woocommerce > Immagini del prodotto. Qui vedrai aleno 2 set immagini, quella in anteprima e quella nei dettagli del prodotto. Poi alcune opzioni estetiche ad esempio il rapporto del ritaglio.

    Controlla anche le impostazioni del tema se ci sono impostazioni relative alle immagini, nel caso è qui che dovrai impostarle.

    Una volta impostati i valori o attendi che Woocommerce rigeneri tutte le immagini oppure installi il plugin Regenerate Thumbnails: https://it.wordpress.org/plugins/regenerate-thumbnails/
    Ogni volta che modificherai il set di immagini dovrai rigenerarle.

    0
  • S
    User •

    Grazie per la tua risposta. Esattamente come dici tu in aspetto/personalizza ecc... vedo due misure, la larghezza dell'immagine della singola pagina prodotto e la larghezza della miniatura catalogo. È quindi alla prima misura che mi devo rifare per "migliorare" e ottimizzare le mie immagini? Ho il dubbio perché questa misura qui è diversa da quella che gtmetrix rileva... In poche parole quello che leggo in questo pannello è la misura da adottare (o che sarebbe meglio adottare diciamo così) o è quella attualmente impostata?
    P.s: controllo anche il tema...
    Già mi hai portato un pezzo avanti con le tue indicazioni...:smile5:

    0
  • H
    User Attivo •

    Gtimetrix rileva una dimensione come valore impostato, ma diverso dalla dimensione dell'immagine. Esempio, la griglia dei prodotti mostra immagini da 100px X 100px, ma l'immagine reale è 500px X 500px, quindi Gtmetrix ti dice: "perché vedo un'immagine così grande in uno spazio più piccolo?"

    I casi sono solo 2: il tema non è ben fatto, oppure devi seguire la documentazione del tema in merito alle immagini.

    Se il tema non ha nessuna impostazione ma usa semplicemente le dimensioni assegnate direttamente nelle opzioni di Woocommerce, allora dovrai ottimizzare quelle. Guarda la griglia dei prodotti in anteprima, misura la dimensione in anteprima, meglio se lo fai con l'Inspector di Chrome o Firefox, questo è il valore, approssimativo, che imposterai.
    Poi carica una nuova immagine, molto più grande dei valori impostati, sarà il sistema a generarti una serie di immagini ridimensionate, e sarà sempre il sistema a mostrare una miniatura oppure un'immagine a grandezza naturale a seconda del contesto.

    Ti consiglio di fare un po' di prove e ricordati di rigenerare le immagini altrimenti non funzionerà.

    0
  • S
    User •

    Ti ringrazio molto... si, a quanto pare il tema usa le impostazioni di woo. Le immagini di varie dimensioni sono state generate correttamente e ho verificato con l'inspector che sono adeguate a quanto mostrato dal tema. Se vado su gtmetrix però si rileva che per lo spazio che richiederebbe, ad esempio, 600x427px viene caricata una dimensione troppo più grande... però l'immagine 600x427 c'è, è stata generata. Di nuovo grazie

    0
  • H
    User Attivo •

    Per curiosità, puoi postare il link del sito?

    0
  • S
    User •

    Si, ti posto direttamente la pagina incriminata... https://www.bottegagialla.com/prodotto/smalto-verde-strutturato/
    È qui nella scheda prodotto che pare venga fornita un'immagine più grande del necessario...

    0
  • H
    User Attivo •

    Ora è un po' più chiaro, siamo nella scheda prodotto. Di solito qui la foto è di dimensioni maggiori ma si usa un sistema come il lightbox o similari per zoomare l'immagine a grandezza naturale. In pratica, in quello spazio adndrebbero 2 immagini, una che occupa quello spazio e una che si apre quando ci fai click sopra, funzione che nel tuo caso non c'è.
    La foto mostrata è 1.280px X 916px, direi eccessivamente e inutilmente grande in uno spazio molto più piccolo, oltre tutto senza avere una funzione lightbox.

    Come ti ho indicato sopra vai in Aspetto > Personalizza > Woocommerce > Immagini del prodotto. Cerca l'opzione "Larghezza dell'immagine principale", qui inserisci il valore 660 / 700, valore leggermente più grande dello spazio.
    Ancora meglio se dopo aver inserito la nuova dimensione carichi una nuova immagine non più grande di 700 x 700x.
    Rigenera tutte le immagini e rifai il test.

    0
  • S
    User •

    Grazie, molto chiaro... a dire il vero se vado in aspetto/personalizza ecc... il valore impostato è proprio 600, per questo non capivo. Proverò a ricaricare un'immagine di poco superiore nei media o via ftp e rigenerarla
    Davvero grazie per il tu tempo

    0
  • H
    User Attivo •

    @saragialla said:

    a dire il vero se vado in aspetto/personalizza ecc... il valore impostato è proprio 600

    Però se non rigeneri le immagini quel valore resta in sospeso. Infatti la foto è grande 1.280px X 916px.

    0
  • S
    User •

    @hub said:

    Però se non rigeneri le immagini quel valore resta in sospeso. Infatti la foto è grande 1.280px X 916px.
    Ok chiaro... userò regenerate thumbnails magari... grazie

    0
Effettua l'accesso per rispondere