Mantenere un maestro e fare una copia di consegna web
Salva l'immagine originale con la descrizione dell'immagine e il registro di approvazione. Creare file di consegna separati per l'area immagine reale della pagina. Questo ti consente di modificare la frammentazione o la compressione dell'immagine in seguito senza ripetutamente modificare l'unico file sorgente.
THE RENDER OFFICE restituisce attualmente immagini PNG in dimensioni quadrate, paesaggistiche o portrait. Una grande fonte può essere utile per la conclusione, ma una piccola carta di categoria può richiedere meno pixel. La configurazione di qualità della creazione dell'immagine non è un sostituto per la preparazione di un'esportazione web appropriata.
Match consegnato pixel al layout
Controlla la dimensione visualizzata dell'immagine attraverso le layout reali e le densità del dispositivo che supporta. Preparare le opzioni di immagine appropriate in cui il sito può servire in modo responsabile. Ridurre la larghezza CSS da solo non riduce i byti del file scaricato.
MDN documenta come i candidati di fonte immagine e le informazioni di dimensione aiutano i browser a scegliere una risorsa adatta. Il layout dichiarato deve corrispondere alla pagina reale; le informazioni di dimensioni sbagliate possono far sì che il browser seleziona un candidato meno appropriato.
Confronta la compressione alla dimensione della visualizzazione finale
Esportare i formati appropriati supportati dal flusso di lavoro di pubblicazione, poi confrontare la dimensione del file e l'aspetto. Verificare i gradienti, la tessuta finissima, i confini e qualsiasi dettaglio del prodotto accurato dopo la compressione. Mantenere la trasparenza solo quando il layout ne ha effettivamente bisogno.
Scegli il file più piccolo adatto che mantiene la qualità richiesta per la posizionazione. Non esiste un target di dimensioni di file universali che dimostri che un'immagine è ottimizzata. Una piccola scheda decorativa e un'immagine dettagliata del prodotto hanno lavori diversi e dovrebbero essere riveduti in modo appropriato.
| Il campo | Dato registrato | Domande di revisione |
|---|---|---|
| Posizione | Pagina attuale e area immagine | Il quadro immagine serve questo layout? |
| Fonte e esportazione | Master nome e variante di consegna | È possibile riprodurre l’esportazione? |
| Dimensioni e byte | Dimensioni di pixel e file | Il risorso fornito è adeguato? |
| Recensione visiva | Qualità accettata nella dimensione prevista | La compressione ha rimosso informazioni importanti? |
Riserva spazio di layout e carico per importanza
Fornire informazioni intrinseche di larghezza e altezza in modo che il browser possa riservare il rapporto di aspetto dell'immagine prima di arrivare. MDN spiega come questo riduce il movimento del layout. Confirmare che il framework dell'immagine finale e il comportamento CSS sono d'accordo con lo spazio riservato.
Utilizzare il caricamento liscio per le immagini appropriate che non sono necessarie per la visualizzazione iniziale. Non applicarlo indiscriminatamente all'immagine principale un visitatore dovrebbe vedere immediatamente. Verificare il comportamento della pagina reale piuttosto che trattare un atributo di carico come una corretta prestazione universale.
Dare l'immagine un contesto utile di ricerca e lettore
Metti l'immagine accanto al testo pertinente e selezionare un nome di file breve e descrittivo. Scrivi alt testo per lo scopo dell'immagine in quella pagina, evitando le liste di parole chiave. Google descrive i nomi di file come un'indicazione leggera e utilizza il contesto della pagina circostante per comprendere il tema; solo un nome di file non stabilisce rilevanza o ranking.
Verificare le richieste di immagine effettiva della pagina pubblicata, layout, accessibilità e prestazioni con strumenti appropriati. Ricordate le condizioni e i risultati prima di confrontare le versioni. La consegna più veloce può migliorare l'esperienza, ma i redditi dipendono ancora dall'offerta, dal pubblico e dal percorso di conversione completo.
Pianificare la fonte prima dell’esportazione.
Utilizzare la guida del flusso di lavoro della campagna per decidere quale immagine hai bisogno, come sarà rivisto e come verrà consegnato l'attività finita.
Seguire il flusso di lavoro dell'immagine della campagna