Optimering af billeder til mobil

Normalt når man vil vise et billede på en webshop, kan koden se sådan ud

Her angiver src (der er en forkortelse for source – altså "kilde") adressen til billedet. Her har vi angivet et billede i størrelsen 800 x 800 pixels.

Men hvis du sidder på en lille mobil skærm, er det slet ikke nødvendigt at hente så stort et billede. Derfor blev der indført en mulighed for at angive en anden source til mobiler. Hvis man f.eks. nøjes med at hente et billede, der er kvart størrelse, så skal mobilen (der typisk er på en dårligere forbindelse), loade færre data og dermed loader siden hurtigere. Og hvis der er noget, vi kan lide er det hurtige hjemmesider.

Derfor har vi lavet muligheden for at aktivere "mobilbilleder" i backend. Du finder indstillingen under Indstillinger -> Optimering. Sæt flueben i "Slå mobilbilleder til".

Nu vil vi tage dit image element, som du ser heroppe og lave om til dette

Altså ganske simpelt:

Vi viser browseren, at den har mulighed for at hente et mindre billede. Browseren på moderne mobiler ved godt, at der nogle gange er muligt at hente et mindre billede og vil gøre det.

Så hvad betyder det?

Du kan ikke sådan umiddelbart se forskel. Men du kan spare noget loadhastighed på de mobiler, der understøtter det. Browseren kan selv regne ud, hvilket billede, den skal hente for den bedste oplevelse for brugeren. Altså ganske kort: Den henter ikke mere end den skal bruge.