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.

Opsætning af CloudFlare

Jeg har tidligere skrevet om hvorfor man skal vælge CloudFlare, det kan du læse der.

Her er en guide til hvordan man sætter det op og hvordan man får SSL til at virke, jeg bruger mit domæne Bagnefoto.dk, fordi det ikke endnu er på SSL eller Cloudflare.

Det er vigtigt at vide at du ikke skifter din hosting ud, så lad endelig vær med at droppe den.

Guiden til at sætte et domæne op, med SSL og Cloudflare:

1. Opret en konto hos Cloudflare:

cloudflare

2. Tilføj dit site til Cloudflare

Dette gøre ved at trykke “add site” fra Dashboardet når du lige er logget ind. Hvorefter du trykker “Begin Scan”.

scanning-med-cloudflare

3. Så skal du tjekke dine DNS indstillinger

Cloudflare gennemgår de indstillinger den kan finde, så side delen virker helt sikkert med det samme, men hvad angår emails og andre ting du selv har tilføjet kan det være de ikke kommer med, sammenligne den med de indstillinger du har på din nuværende DNS udbyder. (Jeg har gjort dette med 20 domæner nu, og har aldrig skulle ændre noget).

scanning-færdig-med-cloudflare

4. Vælg den plan og få navne server indstillinger

Vælg den gratis plan med det samme, du kan altid opgradere på 1min senere, og hvis gratis er godt nok, så kan du lige så godt nøjes med det.

Bagefter får du navne server indstillinger, dem skal du skrive ind i DK-hostmaster, hvis du har et .dk domæne, og hvis du har et andet skal du skrive dem ind i domæne håndteringen det sted du købte dit domæne.

navneservere-cloudflare

5. Skift navne server

Jeg går ud fra de fleste her har et dk domæne, så jeg viser hvordan man gør hos Dk-hostmaster.

Hos DK-hostmaster skal du logge ind med din bruger og kodeord.

På hoved menuen skal du ind på: Redeleger domænenavn

Her skriver du dit domæne ind også det første felt fra Cloudflare, som i mit tilfælde var ‘abby.ns.cloudflare.com’.

Derefter trykker du videre, og bekræfter.
Dk-hostmaster tager tit langt tid om at virke, så det kan godt være at du skal holde en times pause også forsøge igen.
Efter du har bekræftet kan der også let gå 3-4 timer før det bliver vist rigtigt.
For at være sikker på at du får cloudflare versionen, så brug en ny browser eller forsøg i inkognito mode samt forsøg med “rigtig refresh”.
cmd+r er normal refresh, mens rigtig refresh er cmd+shift+r.

dk-hostmaster

6. Så virker Cloudflare

Hvis cloudflare siger der ikke er nogen fejl, så virker alt nu.

cloudflare-virker
7. Nu skal vi have SSL på domænet

Det virker allerede, med standard indstillingerne. Men lige for at tjekke, du skal ind i dashboadet hvor du kan se alle dine domæner, også trykke på det domæne du vil have SSL på. Her skal SSL stå til “Flexible” som neden for:

cloudflare-backend

8. WordPress plugins

Nu skal du ind i din WordPress backend og installere et par plugins.

A. Du skal bruge et til at rette en redirect loop som WordPress laver, det hedder: CloudFlare Flexible SSL hvis det ikke virker så brug: WordPress HTTPS (SSL)

B. Test om dit domæne virker med SSL? Sæt https:// foran dit domæne og se om den laver en fejl. Hvis den laver en Cloudflare fejl, så har jeg oplevet at det var fordi SSL stod til “Full” og ikke “Flexible”. Det er Ok at den lave en gul fejl, det klare vi senere.

C. Så skal du bruge et plugin til at sikre dig at alle bliver sendt videre til SSL i stedet for den normale kedelige http:// -version:

Jeg bruger WP Force SSL men på et domæne hvor dette ikke virker bruger jeg: Force SSL.

D. Du skal nu ind i “indstillinger” og “Generelle indstillinger”, hvor du finder et felt til din domæne navn, her skal du ændre feltet til https://xxx.dk i stedet for http://xxx.dk. Dette skal du kun gøre hvis domænet faktisk virker med SSL (test B), ellers virker dit domæne ikke mere, og du skal ind i databasen for at ændre dette tilbage.

Dette behøver du faktisk ikke, og det gør det svært at rette SSL fejl, så lad vær.

wp-ssl-indstillinger

9. Nu kommer SSL problemerne

Særligt Chrome har et kæmpe problem med SSL problemer, de, som de eneste, kræver at man henter alt igennem SSL, før du får en grøn lås.

Men det er bare at komme igang.

SSL-problemer

10. Sådan løser du SSL problemerne

Det er meget enkelt, du skal ind i Chrome, ind på din side også skal du ind i udvikler værktøjet. Du kan finde det under “vis”, “udvikler” også “udviklerværktøjer” i menuen eller bruge genvejen: alt+cmd+i.

Under fanen “Console” kan du se de fleste af de fejl din side laver, fx SSL fejl.

På billedet nede for, opstillet som det tydeligt er, kan du se en enkelt SSL fejl, Chrome vil have at billedet “857847_1015180676527101…” ikke bliver hentet med https men bare normalt http, så alt du skal gøre at at rette linket til billedet til enten:
https://bagnegaard.dk/wp-content/uploads/2015/02/857847_1….jpg
Eller
/wp-content/uploads/2015/02/857847_1….jpg

Også bliver alting grønt igen.

Du skal gøre dette på alle dine sider, hele vejen igennem dit website, og det kan godt tage tid, det kan nok betale sig at lave en lille script til MySQL databasen som kan gøre det for dig, hvis du har mange indlæg.

Det er meget normalt at en side har 5-10 SSL fejl, men det er bare at gå igang.

ssl-fejl

11. Også virker alt.

Så virker det