Scegli le dimensioni dell'immagine utili per i display ad alta densità

Una scheda visualizzata a 800 pixel CSS di larghezza può utilizzare un candidato immagine largo 1600 pixel di immagine come esempio 2x. Il browser può scegliere una fonte appropriata in base al layout, alla densità del dispositivo e ad altre condizioni quando il sito Web fornisce un markup reattivo dell'immagine. Il file da 1600 pixel non significa che la scheda debba occupare 1600 pixel CSS sulla pagina.

Misurare il layout effettivo prima dell'esportazione. Una colonna di articoli, un banner a larghezza intera e una piccola scheda di prodotto raramente richiedono la stessa dimensione della sorgente. Controlla anche il layout del telefono, dove l'immagine può occupare una larghezza diversa o utilizzare un ritaglio diverso. Rendere ogni file il doppio della larghezza di visualizzazione desktop più grande può sprecare byte. Tratta le esportazioni a densità più elevata come candidati per un'implementazione reattiva reale piuttosto che un singolo file sovradimensionato che ogni dispositivo deve scaricare.

Questa pagina inizia con una Fit Box WebP di 1600 per 1600 pixel. È un limite illustrativo, quindi sostituiscilo con valori in base alla dimensione del display misurata. L'adattamento all'interno mantiene le proporzioni e non ingrandisce una fonte più piccola. Ad esempio, un originale ampio può raggiungere i 1600 pixel di diametro mentre un ritratto si adatta invece all'altezza. Controllare le quote di uscita effettive.

Se una sorgente è larga solo 700 pixel, la scrittura di un'esportazione da 1600 pixel non crea i dettagli di un originale più grande. Usa una fonte migliore o accetta un candidato più piccolo. Confronta l'affilatura della luce con OFF dopo il ridimensionamento e ispeziona le trame fini alla dimensione del display prevista. Per la grafica trasparente usa invece PNG, poiché l'attuale esportazione WebP qui è opaca. Mantieni il design o la fotografia originale in modo da poter creare candidati diversi in seguito.

Il convertitore produce un file; Il tuo sito web deve ancora selezionarlo e presentarlo correttamente. Fornire candidati alla fonte adeguati, suggerimenti sulle dimensioni accurati e dimensioni dell'immagine riservate nell'implementazione. Un telefono non dovrebbe ricevere l'immagine più grande semplicemente perché esiste. Controllare l'immagine scaricata negli strumenti per sviluppatori del browser durante la valutazione della pagina finale, perché un sistema di gestione dei contenuti potrebbe trasformarla di nuovo.

Visualizza la pagina alle impostazioni dello schermo ordinario e ad alta densità e confronta i dettagli con le dimensioni del trasferimento. Un'immagine a risoluzione più elevata non è automaticamente il miglior compromesso per una piccola carta decorativa. Allo stesso modo, un'immagine eccessivamente piccola può sembrare scarsa in una grande vista del prodotto. Testare contenuti significativi come volti ed etichette invece di giudicare solo uno sfondo sfocato. Continua a caricare la priorità adeguata alla posizione dell'immagine e misura la pagina reale prima di rivendicare un miglioramento della velocità o dei parametri vitali del Web.

Supponiamo che la tua carta più larga sia di 400 pixel CSS e che un'illustrazione rimanga chiara a quella larghezza. Un candidato da 800 pixel è una possibile esportazione 2 volte quando la sorgente lo supporta. Controllare la scheda anche su layout più stretti, poiché un'immagine che attraversa l'intero schermo del telefono potrebbe avere una larghezza di visualizzazione diversa dalla scheda desktop. Esporta dall'originale per ogni candidato necessario piuttosto che ingrandire quello più piccolo. Conferma il file selezionato dal browser nella pagina effettiva. L'ultimo controllo di selezione è ciò che collega un calcolo delle dimensioni locali ai byte che i visitatori ricevono davvero per l'immagine.