Ottimizzazione delle immagini per SharePoint Online

La velocità di caricamento di una pagina Web dipende dalla combinazione delle dimensioni di tutti i componenti necessari per il rendering della pagina, tra cui immagini, HTML, JavaScript e CSS. Le immagini sono un ottimo mezzo per rendere più interessante il sito, ma le loro dimensioni possono influire sulle prestazioni. Ottimizzando le immagini con la compressione e il ridimensionamento e usando gli sprite, è possibile limitare l'impatto negativo delle immagini di grandi dimensioni. Con il rendering delle immagini di SharePoint, è possibile caricare una singola immagine di grandi dimensioni e visualizzare le sezioni dell'immagine consentendone il riutilizzo invece del ricaricamento.

Usare gli sprite per velocizzare il caricamento di immagini in SharePoint Online

Lo sprite contiene molte immagini più piccole. Con CSS è possibile selezionare una parte di un'immagine composita da visualizzare in un punto specifico della pagina con il posizionamento assoluto. Essenzialmente, si sposta una singola immagine nella pagina invece di caricarne molte e si rende visibile una piccola parte di tale immagine attraverso una piccola finestra in cui la parte richiesta dell'immagine sprite viene mostrata all'utente finale. SharePoint Online usa gli sprite per visualizzare le varie icone nello sprite spcommon.png.

Argomenti trattati

  • Compressione delle immagini

  • Ottimizzazione delle immagini

  • Rendering delle immagini di SharePoint

Pulsante Aggiungi a gruppo

In questo modo è possibile aumentare le prestazioni, perché invece di diverse immagini se ne scarica una sola che viene memorizzata nella cache e può essere riutilizzata. Anche se l'immagine non rimane nella cache, con una singola immagine al posto di molte questo metodo riduce il numero delle richieste HTTP al server, accelerando i tempi di caricamento delle pagine. Si tratta in realtà di una sorta di bundle di immagini. Questa tecnica è molto utile se le immagini non cambiano molto spesso, ad esempio le icone, come illustrato nell'esempio di SharePoint precedente. È ora possibile usare Web Essentials, un progetto open source di terze parti, basato su community, per implementare facilmente questa tecnica in Microsoft Visual Studio. Per altre informazioni, vedere Minimizzazione e creazione di bundle in SharePoint Online.

Usare la compressione e l'ottimizzazione delle immagini per velocizzare il caricamento delle pagine in SharePoint

La compressione e l'ottimizzazione delle immagini implicano la riduzione delle dimensioni dei relativi file che si usano nel sito. Spesso la tecnica migliore per ridurre le dimensioni di un'immagine consiste nel ridimensionarla fino alle dimensioni massime in cui verrà visualizzata nel sito. Non ha senso avere un'immagine di dimensioni maggiori rispetto a quelle in cui verrà poi effettivamente visualizzata. Il modo più rapido e semplice per ridurre le dimensioni della pagina consiste nell'impostare le dimensioni corrette per le immagini usando un apposito editor.

Una volta definite le dimensioni corrette delle immagini, il passaggio successivo prevede di ottimizzarne la compressione. Sono disponibili vari strumenti da usare per la compressione e l'ottimizzazione, tra cui Raccolta foto e utilità di terze parti. Lo scopo della compressione è ridurre il più possibile le dimensioni del file senza perdere qualità percepibile per gli utenti finali. Assicurarsi di testare i file compressi su un display ad alta definizione per verificare che la qualità sia ancora soddisfacente.

Accelerare il download delle pagine con il rendering delle immagini in SharePoint

Il rendering delle immagini è una caratteristica di SharePoint Online che consente di distribuire diverse versioni delle immagini in base a dimensioni predefinite. Ciò è particolarmente importante nel caso di immagini generate dall'utente oppure se le dimensioni delle immagini, come la larghezza e l'altezza, sono stabilite da CSS nel sito. Anche se le dimensioni sono definite da CSS, viene comunque caricata l'immagine alla piena risoluzione. In questo caso le dimensioni del file possono essere ridotte con il rendering dell'immagine.

Nota : Il rendering è disponibile per SharePoint solo se la pubblicazione è abilitata. Per abilitare la pubblicazione, scegliere Impostazioni > Impostazioni sito > Gestisci caratteristiche sito > Pubblicazione SharePoint Server. In caso contrario, l'opzione non verrà visualizzata.

Con il rendering, la dimensione minima dell'immagine, che può essere la larghezza o l'altezza, viene ridimensionata in modo che l'altra dimensione venga automaticamente ridimensionata in base alle proporzioni bloccate. Per impostazione predefinita, l'immagine viene ritagliata dal centro in base alle dimensioni rimanenti. Se ad esempio si definisce un rendering di 100 px in larghezza e 50 px in altezza, mentre l'immagine originale è di 1000 px in larghezza e 800 px in altezza, l'immagine viene ridimensionata in modo che la dimensione di 800 px diventi 50 px e la dimensione di 1000 px (ora di 62,5 px) venga ritagliata dal centro.

La procedura è relativamente semplice, ma per usare il rendering è necessario che la caratteristica sia già disponibile nel sito di SharePoint prima dell'aggiunta delle immagini. È inoltre necessario che siano attivate le caratteristiche Infrastruttura di pubblicazione SharePoint Server (a livello di raccolta siti) e Pubblicazione SharePoint Server (a livello di sito).

Aggiungere il rendering delle immagini per velocizzare il caricamento delle pagine

  1. Verificare che l'account utente che esegue questa procedura abbia almeno le autorizzazioni di progettazione per il sito principale della raccolta siti e che il sito sia pubblicato in una pagina Web.

  2. In un Web browser passare al sito principale della raccolta siti di pubblicazione.

  3. Scegliere l'icona Impostazioni.

  4. Nella sezione Aspetto della pagina Impostazioni sito verrà visualizzato il rendering dell'immagine predefinito.

    È possibile usare questo o scegliere Rendering immagini per crearne uno nuovo.

    Immagine della barra multifunzione di Word
  5. Nella pagina Rendering immagini scegliere Aggiungi nuovo elemento.

    Nuovo riquadro Commenti
  6. Nella pagina Nuovo rendering immagine immettere un nome nella casella Nome.

  7. Nelle caselle di testo Larghezza e Altezza immettere la larghezza e l'altezza in pixel per il rendering e quindi scegliere Salva.

    Cartella di OneDrive for Business sincronizzata nei Preferiti di Esplora file

Ritaglio personalizzato con il rendering delle immagini in SharePoint

Per impostazione predefinita, il rendering viene generato dal centro dell'immagine. È possibile modificarlo per singole immagini ritagliando la parte che si vuole usare. Per ogni rendering, è possibile ritagliare le immagini singolarmente. Il ritaglio delle immagini velocizza il caricamento delle pagine usando la cache blog di SharePoint per creare una versione dell'immagine per ogni rendering. In questo modo si riduce il carico del server, perché l'immagine viene ridimensionata solo una volta ed è quindi pronta per essere usata più volte dagli utenti. Per altre informazioni, vedere Ritagliare il rendering di un'immagine.

Amplia le tue competenze
Esplora i corsi di formazione
Ottieni in anticipo le nuove caratteristiche
Partecipa al programma Office Insider

Queste informazioni sono risultate utili?

Grazie per i tuoi commenti e suggerimenti

Grazie per il tuo feedback! Potrebbe essere utile metterti in contatto con uno dei nostri operatori del supporto di Office.

×