Inserire immagini in un sito adatte anche ai Display a Retina
Avrete notato sicuramente la differenza di un’immagine, soprattutto loghi o icone, viste su un iPad o Mac con Display a retina piuttosto che su uno schermo normale. Sui display a retina le immagini non adattate risultato quasi sgranate, opache, di scarsa qualità.
Ciò avviene perché i display a Retina hanno una densità di Pixel per pollice molto più elevata rispetto agli altri schermi. Di norma i display a retina hanno bisogno di immagini che siano esattamente il doppio in altezza e larghezza rispetto agli altri schermi.
Vi starete chiedendo se quindi occorre salvare un’immagine x di 100x100px anche in 200x200px per i display a retina, la risposta è no!
Come fare a far sì che il sito web proponga l’immagine a 100×100 nonostante sia da 200x200px ?
La risposta a questa domanda è lo scopo di questo articolo!
Personalmente utilizzo i seguenti modi:
HTML E CSS:
Se ho un’immagine di 400 px di larghezza e 200 px di altezza ma voglio che appaia esattamente la metà:
<img src="immagine@2x.jpg" width="200" height="100">
Questo è un modo estremamente semplice ma possiamo anche utilizzare i css in questo modo:
.image{
background: url (immagine@2x.jpg.png);
background-size: 200px 100px;
width: 200px;
height: 100px;
}
Dove background-size definisce la dimensione dello sfondo.
Oppure potete inserire la seguente regola:
.image{
height: 50%; width: 50%;}img{ height: 50%; width: 50%;}JAVASCRIPT
Ma il metodo che uso di più è un codice javascript che fa sì che in automatico mostri le immagini la metà della risoluzione originale
$(window).load(function() {
var images = $('img'); images.each(function() { $(this).width($(this).width() / 2); $(this).height($(this).height() / 2); )};)};
Promozioni
Potrebbe interessarti
Commenti