Het is al geruime tijd geleden dat de Retina-displays op iOS-apparaten voor het eerst werden uitgebracht, maar er zijn nog steeds veel websites die niet geschikt zijn voor Retina, zelfs al hebben ontwerpers en ontwikkelaars de feiten van een volledig responsieve, mobiele website helemaal in de vingers. vriendelijke wereld.
Dit is wat u moet weten over de mogelijkheden om uw werk er het beste uit te laten zien op de steeds vaker voorkomende Retina-schermen. Het goede nieuws is dat, hoe ontmoedigend het ook lijkt, het is echt niet zo ingewikkeld.
$config[code] not foundPrepping van uw website voor afbeeldingen die klaar zijn voor gebruik van het netvlies
Verdubbel je plezier
Er zijn eigenlijk een aantal manieren waarop je deze kat kunt villen, om zo te zeggen. In de eerste moet u uw CSS een beetje verscherpen en versies van uw afbeeldingen opnemen met een dubbele resolutie. De CSS bepaalt welk beeld moet worden weergegeven op basis van het apparaat waarop uw site wordt bekeken.
De CSS-updates die u nodig hebt, zijn afhankelijk van uw doelbrowser, maar het goede nieuws is dat het nu niet erg ingewikkeld is en gemakkelijker wordt. We laten de daadwerkelijke codering over aan een andere dag.
Eén ding om in gedachten te houden: misschien wilt u een naamgevingsconventie voor uw netvliesafbeeldingen ontwikkelen, zodat u de twee versies van een afbeelding gemakkelijk kunt koppelen voor het geval ze later moeten worden bewerkt.
SVG
Een andere benadering is SVG of Scalable Vector Graphics. Zoals de naam al aangeeft, zijn deze beperkt tot vectorafbeeldingen en werken niet met fotografische afbeeldingen, maar SVG-afbeeldingen elimineren de noodzaak van twee afbeeldingsbestanden voor elke afbeelding op uw site. Nogmaals, er zijn variaties van browser tot browser, dus u zult aanvullend onderzoek willen doen, afhankelijk van uw behoeften.
En zoals hierboven vermeld, zal SVG op de meeste sites waarschijnlijk niet als uw enige oplossing werken, tenzij de site geen foto-achtige afbeeldingen bevat.
Brute kracht
Natuurlijk kunt u ook eenvoudig de bestanden met een lage resolutie dumpen en de Retina-ready-afbeeldingen net serveren. We raden dit alleen aan voor gebruik met een zeer nauw omschreven doelgroep. Als je weet dat bandbreedte geen probleem is, is dit misschien de juiste route, maar het is zeker geen best practice
Andere coderingsoplossingen
Aan de andere kant van het inspannings- en elegantie-spectrum worden coderingsmethoden gebruikt die afhankelijk zijn van bepaalde wijzigingen aan de serverzijde (zoals.htaccess-bestandsvermeldingen) samen met PHP- en Javascript-codering.
Dit is misschien de beste aanpak, hoewel de moeite die het kost, niet de moeite waard is voor kleinere projecten.
Over het algemeen hangt de benadering die u volgt af van uw publiek, de aard van de visuele aspecten van uw site en het technische kennisniveau van uw ontwikkelingsteam. Er is een goede oplossing voor bijna elke situatie. De enige slechte oplossing is het volledig negeren van Retina-schermen.
NASDAQ foto via Shutterstock
