Brug srcset til at lave retina billeder på din side

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.

ikretinaretina

 

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.

Vildt hurtig hosting?

Det er vigtigt at have en hurtig side, særligt til en webshop, lange loadings tider betyder som regel at kunderne bliver utålmodige og forsvinder hen på en af de andre tabs de har åbnet sammen med din side.
Amazon har udgivet mange af disse tests og de viser meget konkret at langsommere sider giver markant mindre salg. Amazon siger at 0,1sek mere load betyder 1% mindre salg.

Det er svært få hurtig hosting i Danmark. Sådan er det bare. i sær hvis du tror at hosting koster imellem 5-20kr/md. Hvis du lever af din side, og derfor tjener flere penge jo hurtigere din side er, er det vigtigt med en ordentlig host.

Der er nogen stykker som kan klare opgaven her i Danmark zitcom.dk, netgroup også er det en masse i udlandet. I danmark giver man hurtigt 1000kr/md for en host (VPS), hvorimod mere konkurrence i udlandet betyder at priserne her er lavere. Google har deres, Amazon har deres og det jeg bruger er DigitalOcean.

Først skal vi lige slå fast hvordan vi tester hastighed. Du kan teste det på din egen computer, det er også fint, men du skal være opmærksom på at din browser tager en masse backup og at dit internet ikke altid er lige hurtigt. Derfor bruger jeg Pingdom tools, jeg sætter den altid på sverige, fordi den server er tættest på. Denne viser ca. altid det samme, hvilket er godt til at teste denne slags ting.

På digital ocean kan du få din egen VPS, visuelle private server for ned til 5$/md, jeg satte en helt normal WordPress side op på sådan en, og fik en load på 0,3sek.
Til sammenligning klare min gigahost server (til 29kr/md) det på 2,1sek.

CRxogVmW0AAIDLf

Så er det min webshop. Den køre Prestashop, og det er ikke kendt som et særligt hurtigt CMS. Det er fyldt med PHP scripts, og selv om du kan sætte cache på, så virker det ikke optimalt, da deres cache ikke er så cache’y.

Vi har brugt rigtigt meget tid på at optimere loadtiden i vores design, hvilket har gjort at den loader på kun 0,5sek. Dette er den lidt mere ambitiøse 20$/md(140,84 kr) version. Det betyder flere salg og at serveren kan klare mange flere besøg.

pingdom-mackabler

Vi har ligget nogen forskellige steder, blandt andet hos zitcom(ca. 140kr/md), her loadede vi på 1,5sek, vi har også ligget på en VPS fra Unoeuro(ca. 510kr/md) her loadede vi ca. på lidt over 2sek også har vi ligget på en prohost hos Meebox(99kr/md) her loadede vi på ca. 4sek.

Cloud hosting taler alle om

Cloud hosting betyder ikke rigtigt noget, da hosting af websider ikke kan være andre steder end i en cloud, men det seje der er kommet fra med Cloud-bøjlen er servere som kan opgraderes og nedgraderes med et enkelt tryk.

Med DigitalOcean kan vi opgradere til 12 kerner og 32gb ram om et par min, fra 2 kerner og 2gb ram, hvis vi bliver ramt af for meget trafik. Vi kan også nedgraderer igen – også betaler vi kun for det vi bruger.

Med DigitalOcean kan du også lave en ny server, fx en kopi af den du har i forvejen, på et par min, DigitalOcean siger 60sek, men det passer ikke, særligt hvis du laver serveren ud fra en kopi af din online server. Det tager os ca. 5min.
På den måde kan du teste noget, med en nøjagtig kopi af din server, og hvis det virker kan du skifte til den nye server på få minutter.

Der er en hage ved det hele

Du skal selv stå for serveren, du skal selv opdatere PHP, og selv installere pyton eller Mysql hvis du har brug for det. Det kan man heldigvis betale sig fra, men bagefter er der, som med alt IT, altid noget som skal rettes. Det koster også penge.
Jeg tror man skal have lidt teknisk forståelse og det hjælper helt sikkert at have løst en masse server problemer tidligere 🙂

Hvordan gør du helt praktisk ?

Hvis du har mod på at starte dette, så kan du ligeså godt teste det, DigitalOcean giver 10$ gratis prøve tid, og på upwork (tidligere odesk) kan du hurtigt finde en meget billig sysadmin til at sætte din server op.
Du kan ligeså godt starte med den billigeste 5$/md server, også opgradere i takt med at enten trafik stiger eller du får mere blod på tanden, det kan klares uden nogen teknisk indsigt, på 2min.

create-droplet

Efter det hele er opsat kan du teste hastighederne, og se hvor meget der er at vinde, selvfølgelig stadig på et test domæne.
Din side er sikkert blevet dobbelt så hurtig hvis du kommer fra en god dansk host, til 100kr/md, eller 8x hurtigere hvis du kommer fra meebox, også skal du ansætte en dansker til at gøre din server sikker og til at stå for løbende forbedringer, dette finder du let med Amino freelancer. Nu er du klar til at opsige dit gamle, og skifte server.

Alt i alt er vi tilfredse med vores DigitalOcean server. Amazon og Google er helt sikkert også fine, men dem har jeg ikke prøvet og jeg får en lille pose penge tilføjet til min konto, hvis du køber digital ocean med et af mine links, derfor linker jeg til dem.

Du kan også bare ignorer alt det her og få dig en shoporama shop, de er vildt hurtige, og du du skal hverken have fat i freelancere eller UpWork for at få den til at blive hurtigere 🙂