La maggior parte dei telefoni cellulari e molti computer moderni ora hanno schermi ad alta risoluzione (Retina), questo significa che hanno una densità di pixel maggiore. Se desideri che le immagini del tuo sito appaiano davvero nitide sia sugli schermi standard che su quelli ad alta risoluzione, dovrai fornire versioni aggiuntive dei tuoi file di immagine con diverse densità di pixel.
Requisiti di risoluzione
Di solito sono richiesti più file di risoluzione in tre dimensioni:
@ 1x - Risoluzione standard 1: 1 pixel
@ 2x - Doppia risoluzione 2: 1 pixel
@ 3x - Tripla risoluzione 3: 1 pixel
Se non provieni da un background di design, potrebbe sembrare un po 'di confusione. Fondamentalmente un file @ 2x l'immagine è il doppio delle dimensioni in pixel di un file @ 1x immagine e un file @ 3x l'immagine è tre volte la dimensione di un file @ 1x immagine, ad es
@ 1x - 50 x 50 px dimensione normale
@ 2x - 100 x 100 px 2x la dimensione di @ 1x
@ 3x - 150 x 150 px 3x la dimensione di @ 1x
Quando si creano immagini a risoluzione multipla, è comune applicare un suffisso di testo nel nome del file per le risoluzioni più alte, in modo che possano essere facilmente identificate ad es.
• mia-immagine.jpg
• mia-immagine@2x.jpg
• mia-immagine@3x.jpg
Applicazione di più risoluzioni
Una volta create le immagini nelle tre dimensioni di risoluzione richieste (@1x, @2x e @3x), Blocs rende molto semplice la loro implementazione.
Installazione automatica
Fintanto che tutti e tre le variazioni della tua immagine hanno il stesso nome e la @ 2x ed @ 3x il suffisso viene applicato ai loro nomi (se applicabile), quando applichi l'immagine con risoluzione standard a un'immagine Bric, verranno applicate automaticamente anche le versioni a risoluzione più elevata.
Configurazione manuale
Se le risorse immagine a più risoluzioni non hanno nomi corrispondenti, puoi applicare manualmente ciascuna risoluzione di una risorsa a un'immagine Bric, utilizzando i controlli dell'ispettore. Basta selezionare l'immagine sulla tela del disegno tramite Clic sinistro e poi vai alle opzioni di inspector della barra laterale. Sotto la sezione etichettata Dati, c'è un controllo segmentato a 3 vie con ciascuna opzione etichettata @ 1x, @ 2x ed @ 3x. Clic sinistro una qualsiasi delle 3 opzioni imposterà le opzioni dell'immagine per quella risoluzione di destinazione. Ora se tu Clic sinistro la miniatura dell'immagine situata direttamente sotto il controllo segmentato, ti verrà chiesto di selezionare il file immagine specifico da mostrare con quella risoluzione.
È ora possibile applicare immagini aggiuntive per entrambi @ 2x ed @ 3x, queste immagini aggiuntive verranno fornite a un visitatore se dispone di un dispositivo con una densità di pixel maggiore.
Se stai correndo Blocs su uno schermo ad alta risoluzione potresti notare che le immagini potrebbero apparire sfocate. Ciò è dovuto al fatto all'interno dell'ambiente di progettazione Blocs visualizza la versione senza retina di un'immagine sulla tela del disegno. Quando accedi alla modalità di anteprima o esporti il tuo sito, dovresti notare che la variazione ad alta risoluzione dell'immagine ora viene visualizzata correttamente.