Share
Het maken van uw website voor Retina-weergave hoeft geen gedoe te zijn. Of u nu een nieuwe website aan het bouwen bent of een bestaande website wilt upgraden, deze gids is ontworpen om u te helpen de klus vlot te laten verlopen.
Trouwens, als je op zoek bent naar een snelle oplossing, bekijk dan de Retina-ready thema's op Envato Market, zoals Rebound - Responsive Multipurpose Retina Theme.
Rebound - Responsive Multipurpose Retina-thema De eenvoudigste en meest tijdbesparende manier om Retina-ondersteuning toe te voegen, is één afbeelding te maken die is geoptimaliseerd voor Retina-apparaten en deze ook te gebruiken voor niet-Retina-apparaten.
Inmiddels gebruikt elke moderne browser bicubische resampling en doet het uitstekend werk met downsampling-afbeeldingen. Dit is een vergelijking van downsampling in Photoshop met Google Chrome, met behulp van een afbeelding van onze Growth Engineering 101-website.
Er zijn twee manieren om de browser gedownsamplede afbeeldingen voor je te laten: img tags of CSS achtergrondafbeeldingen.
Je kan hebben img tags dienen de voor Retina geoptimaliseerde afbeelding en stellen de breedte- en hoogtekenmerken in op de helft van de resolutie van de daadwerkelijke afbeelding (bijv. 400x300 als de afmetingen van de afbeelding zijn 800x600).
Als u afbeeldingen als CSS-achtergronden gebruikt, kunt u CSS3 gebruiken background-size eigenschap om de afbeelding te downsamplen voor niet-Retina-apparaten.
.foto background-image: url (Retina-image-800x600-2x.png); achtergrondformaat: 400 px 300 px; achtergrondherhaling: geen herhaling; weergave: blok; breedte: 400 px; hoogte: 300 px;
Gebruik in beide gevallen even getallen in beide dimensies om verplaatsing van pixels te voorkomen wanneer de afbeelding gedownsampled wordt door de browser.
Gewoonlijk zou downsampling van browsers redelijk goed werken. Dat gezegd hebbende, zijn er enkele situaties waarin downsampling in de browser beelden wazig kan maken.
Hier hebben we een aantal 32px sociale pictogrammen.
En hier is hoe ze zullen verschijnen als ze worden gedownsampled 16px door de bicubische filter van Photoshop en Google Chrome. Het lijkt erop dat we in dit geval betere resultaten behalen met Photoshop.
Om de beste resultaten te krijgen voor onze gebruikers, kunnen we twee versies van dezelfde afbeelding maken: een voor Retina-apparaten en een andere die is gedownsampled door Photoshop voor niet-Retina-apparaten.
U kunt nu CSS-mediaquery's gebruiken om Retina- of niet-Retina-afbeeldingen weer te geven, afhankelijk van de pixeldichtheid van het apparaat.
/ * CSS voor apparaten met normale schermen * / .icons background-image: url (icon-sprite.png); achtergrondherhaling: geen herhaling;
/ * CSS voor apparaten met een hoge resolutie * / @media only-scherm en (-Webkit-min-device-pixel-ratio: 1.5), alleen scherm en (-moz-min-device-pixel-ratio: 1.5), alleen scherm en (-o-min-device-pixel-ratio: 3/2), alleen scherm en (min-apparaat-pixel-ratio: 1,5) .icons background-image: url (icon-sprite-2x.png) ; achtergrondgrootte: 200 px 100 px; achtergrondherhaling: geen herhaling;
Als u een achtergrondkleur gebruikt voor kleine pictogrammen, werkt downsampling door de browser daarentegen behoorlijk goed. Hier is hetzelfde voorbeeld van een downsampling met een witte achtergrond.
Als u nog steeds niet tevreden bent met de resultaten van de downsampling van Photoshop, kunt u een extra stapje verder gaan hand optimaliseren de niet-Retina-versie voor superscherpe resultaten.
Hieronder staan enkele voorbeelden van afbeeldingen van de Blossom-productwebsite die ik Hand geoptimaliseerde voor degenen die nog steeds op niet-Retina-apparaten zitten.
Hier is een voorbeeld van downsamplingproblemen met haarlijnen, waarbij ik de lijnen van de gedownsamplede afbeelding opnieuw teken.
Bekijk de Retina-versie van deze afbeelding op dribbelen.
Vervolgens komen we bij een voorbeeld van downsampling-problemen met tekst. In dit geval heb ik handmatig de tekst "Feature Pipeline" opnieuw geschreven om het resultaat zo helder mogelijk te maken.
Wanneer details, scherpe lettertypen en schone haarlijnen belangrijk zijn, wilt u misschien een stapje extra doen.
De belangrijkste nadelen van gerasterde afbeeldingen zijn hun aanzienlijke bestandsgrootte en ze schalen niet goed naar verschillende formaten zonder de beeldkwaliteit te beïnvloeden. Goede alternatieven voor gerasterde afbeeldingen zijn CSS, Scalable Vector Graphics (SVG) en pictogramlettertypen.
Als je de kans hebt om de grafische elementen voor je website in CSS te bouwen, ga ervoor. Het kan worden gebruikt voor het toevoegen van verlopen, randen, afgeronde hoeken, schaduwen, pijlen, elementen roteren en nog veel meer.
Hier zijn enkele voorbeelden van interactie-elementen in Blossom die zijn geïmplementeerd in CSS. Het subtiele verloop wordt mogelijk gemaakt door CSS-gradiënten en het aangepaste lettertype dat op deze knop wordt gebruikt, is Kievit, dat wordt aangeboden via Typekit. Geen afbeeldingen.
In de volgende schermafbeelding zijn de enige twee gebruikte afbeeldingen de gebruikersavatar en de blauwe stempel. Al het andere - het omcirkelde vraagteken, de donkergrijze pijl ernaast, de popover, de schaduw ervan en de pijl erboven - is pure HTML en CSS.
Hier kunt u zien hoe projecten in Blossom worden weergegeven. Het is een screenshot van de website van een project die wordt gebruikt als omslag op een stapel vellen papier. De papieren bladen zijn geïmplementeerd met divs die worden geroteerd met behulp van CSS.
De omcirkelde pijl aan de rechterkant van de schermafbeelding hieronder is ook pure CSS.
Hier zijn een aantal geweldige tools die u helpen tijd te besparen bij het maken van effecten met CSS.
Het belangrijkste voordeel van SVG is dat deze, in tegenstelling tot gerasterde afbeeldingen, redelijk goed schalen naar verschillende grootten. Als u met eenvoudige vormen werkt, zijn deze meestal kleiner dan PNG's. Vaak worden ze gebruikt voor zaken als diagrammen.
Pictogram Fonts worden vaak gebruikt als vervanging voor image sprites. Vergelijkbaar met SVG kunnen ze oneindig worden opgeschaald zonder kwaliteitsverlies en zijn ze meestal kleiner in vergelijking met afbeeldingen. Bovendien kunt u CSS gebruiken om hun grootte, kleur en zelfs effecten, zoals schaduwen, aan te passen.
Zowel SVG- als pictogramlettertypen worden goed ondersteund door moderne browsers.
Favicons zijn erg belangrijk voor gebruikers die een gemakkelijke manier nodig hebben om te onthouden welke website bij welk browsertabblad hoort. Een voor retina geschikt Favicon zal niet alleen gemakkelijker te identificeren zijn, maar het zal ook opvallen tussen een menigte gepixelde Favicons die nog niet zijn geoptimaliseerd.
Om je Favicon Retina-klaar te maken, raad ik X-Icon Editor ten zeerste aan. U kunt een enkele afbeelding uploaden en de editor de grootte ervan wijzigen voor verschillende dimensies, of u kunt afzonderlijke afbeeldingen uploaden die zijn geoptimaliseerd voor elke grootte om de beste resultaten te krijgen.
Als u een website wilt upgraden met bestaande afbeeldingen, is wat meer werk vereist, omdat u alle afbeeldingen opnieuw moet maken om ze klaar te maken voor Retina, maar dit hoeft niet te veel tijd te verspillen.
Probeer eerst afbeeldingen te identificeren die u kunt vermijden door alternatieven zoals CSS, SVG en Image Fonts te gebruiken, zoals eerder vermeld. Knoppen, pictogrammen en andere veelgebruikte UI-widgets kunnen meestal worden vervangen door moderne oplossingen waarvoor geen afbeeldingen nodig zijn.
In het geval dat u rasterafbeeldingen opnieuw wilt maken, wilt u natuurlijk terugkeren naar de bronbestanden. Zoals je misschien zou denken, wordt het eenvoudigweg aanpassen van je gerasterde bitmapafbeeldingen tot twee keer zo groot, niet de klus geklaard, omdat alle details en randen gepixeld raken.
Geen behoefte aan wanhoop - beeldcomposities die meestal vectoren bevatten (bijv. In Adobe Photoshop of Illustrator) zijn vrij eenvoudig op te schalen. Dat gezegd hebbende, vergeet niet om te verifiëren of uw Photoshop-effecten in de overvloei-opties, zoals lijnen, schaduwen en afschuinen, nog steeds verschijnen zoals u van plan was.
Over het algemeen maakt u Photoshop-composities rechtstreeks uit vectoren (vormen) en uit Photoshop Slimme objecten zal u in de toekomst veel tijd besparen.
Last but not least zou het optimaliseren van de bestandsgrootte van alle afbeeldingen in een toepassing of website tot 90% van de laadtijd van afbeeldingen kunnen besparen. Als het gaat om Retina-afbeeldingen, wordt de bestandsreductie nog belangrijker, omdat ze een hogere pixeldichtheid hebben waardoor hun respectieve bestandsgroottes toenemen.
In Photoshop kunt u de bestandsgrootte van de afbeelding optimaliseren via de functie "Opslaan voor web". Bovendien is er een uitstekende gratis tool, genaamd ImageAlpha, die de grootte van uw afbeeldingen nog meer kan verminderen met slechts een klein kwaliteitsverlies.
In tegenstelling tot Photoshop, kan ImageApha 24-bits alfakanaal-PNG's converteren naar 8-bits PNG's met alfakanaalondersteuning. De kers op de taart is dat deze geoptimaliseerde afbeeldingen compatibel zijn met meerdere browsers en zelfs werken voor IE6!
U kunt in ImageAlpha verschillende instellingen gebruiken om de juiste afweging te maken tussen kwaliteit en bestandsgrootte. In het onderstaande geval kunnen we de bestandsgrootte met bijna 80% verminderen.
Wanneer u klaar bent met het instellen van de gewenste compressieniveaus, biedt het opslagvenster van ImageAlpha ook "Optimize with ImageOptim" - nog een geweldig en gratis hulpmiddel.
ImageOptim kiest automatisch de beste compressie-opties voor uw afbeelding en verwijdert onnodige meta-informatie en kleurprofielen. In het geval van ons stempelbestand kon ImageOptim de bestandsgrootte met nog eens 34% verminderen.
Nadat we alle activa bij Blossom.io hadden bijgewerkt voor schermen met een hoge resolutie en ImageAlpha en ImageOptim gebruikten om de bestandsgrootte te optimaliseren, hebben we uiteindelijk een paar kilobytes bespaard in vergelijking met de activa die we eerder hadden.
Als je meer wilt weten over hoe je je apps en websites klaar kunt maken voor Retina-schermen, raad ik ten zeerste aan om "Retinafy your web sites & apps" van Thomas Fuchs. Het is een eenvoudige stap voor stap handleiding die me veel tijd en zenuwen heeft bespaard.
Bedankt voor het lezen! Nog vragen?
Accentsconagua