Der er først lige nogen begreber som skal på plads.
Retina billeder er billeder i 2x opløsning, jeg kalder det retina fordi Apple gør, men idéen er den samme om det er på en Windows acer eller en Apple Mac.
På nettet viser man billeder i fx 262 x 262px (som nedenstående), dette optager noget plads på skærmen, den plads på en retina skærm svare til (262*2) 524px, derfor sætter man et billede i 4x størrelsen ind(2x på hver side) også bliver det vist skarp på en retina skærm – hvor imod det ser sløret ud på en retina skærm i den normale opløsning.
Der er nogen problemer
Sådan noget her kan enten klares på server siden eller på folks PC’er.
På server siden virker det ikke rigtigt, fordi din server ikke ved hvilken skærm dine brugere har, og du vil helst ikke sende 4x for meget billede til alle de brugere som ikke kan bruge det til noget, google kan heller ikke lide at dine billeder er for store.
Derfor skal det klares på klient siden. – eller hos dine brugere.
Dette klarede man som regel med Javascript, altså man skrev et meget lille script som erstattede alle billederne med dem som er til Retina, hvis siden skulle vises på en retina skærm. Javascript bliver altid loadet til sidst, så det betyder at alle dine brugere skal hente alle billeder også hente dem igen i retina opløsning, det dumt og er spild af din server og folks pc’er.
Det er her “srcset” kommer ind, det er noget forholdvist nyt og ikke særligt mange bruger det endnu, WordPress er dog lige begyndt at bruge det.
Lige nu bruger man “src” til at definere hvor et billede er, som dette: src=”/img/storfedko.jpg” srcset kan erstatte src, så man skriver: srcset=”/img/storfedko.jpg”, eller hvis man vil have en anden version til retina skærme skriver man det sådan:
srcset=”/img/storfedko.jpg x1 , /img/storfedko-retina.jpg x2″
Så kommer den gamle parnoide mand op i mig, fordi selv om alle moderne browsere understøtter srcset, så er der mange gamle som ikke gør, derfor kan men ligeså godt beholde det gamle “src”, som gamle browsere kan bruge. På den måde er der det gamle tag til de gamle også bliver det overskrevet af det nye hvis brugerens browser understøtter det.
Hvis man bruger srcset på den måde downloader browseren kun de rigtige billeder, google får de rigtige billeder også, så de ikke brokker sig over for store billeder.
Du må selv gætte på hvilken er retina udgaven og hvilken som ikke er.
srcset kan også en masse andre smarte ting, fx give billeder i en bestemt størrelse til bestemte telefoner, pc’er eller tablets – der er faktisk ikke nogen grænse. tagget x3 eller x4 virker også hvis skærme kommer med endnu mere opløsning i fremtiden.