Een zichtbare revolutie vindt momenteel plaats in de beeldschermenindustrie, met name die van de nieuwste mobiele telefoons. Deze bieden steeds hogere resoluties waardoor de leesbaarheid stukken vloeiender en scherper wordt. Op dit moment spant de iPhone 4 de kroon wat betreft pixeldichtheid, maar liefst 326 dpi. Het verschil met de dichtheid van een gedrukte krant of tijdschrift en die van het iPhone 4 beeldscherm is hierdoor gereduceerd tot een minimum.

Website ontwikkelaars zullen voor de nieuwe generatie schermen zoals de iPhone 4 bitmap afbeeldingen moeten aanpassen om deze scherp te laten weergeven.

In bovenstaande afbeelding staat links de originele bitmap afbeelding van het Odyssey logo en rechts een bitmap afbeelding die twee maal zo groot is en daardoor scherp op de iPhone 4 wordt weergegeven. Om te zorgen dat alleen de iPhone 4 de grote (en zwaardere) afbeelding laadt kan onderstaande css worden toegepast:

.logo a{
	display:block;
	background-size: 240px 53px;
	width: 240px;
	height:53px;
	background: url('../images/logo_odyssey.png');
	}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.logo a {
	 	background: url('../images/logo_odyssey@2x.png');
		}
	}

Class .logo a beschrijft de originele eigenschappen van het logo en at-rule @media beschrijft dat voor o.a. de iPhone 4 een twee keer zo grote  afbeelding logo_odyssey@2x.png gebruikt moet worden.

Dat bitmap afbeeldingen in verschillende grootten bewaard moeten worden is niet ideaal want vaak is er bij een verschaling nog een handmatige scherpte bewerking nodig. Een vector afbeelding zoals het Scalable Vector Graphics formaat (SVG) zou in de toekomst uitkomst kunnen bieden want dit formaat kan namelijk ook bitmap afbeeldingen embedden. Helaas wordt SVG nog niet door alle veelgebruikte browsers ondersteund, en om compatible te zijn zal de komende tijd nog gebruik moeten worden gemaakt van bitmap afbeeldingen.

Meer informatie over het weergeven van bitmap afbeeldingen op hoge resolutie beeldschermen (incl. soortgelijke methoden) is te vinden op How to make your web content look stunning on the iPhone 4’s new Retina display, High DPI Web Sites, Targeting the iPhone 4 Retina Display with CSS3 Media Queries, What does 320dpi mean to designers?, en Optimising for High Pixel Density Displays.