Vis korrekt skalerede billeder på din WordPress- eller Joomla-hjemmeside

Tag et hvilket som helst billede på din WordPress- eller Joomla-blog. Hvis du vurderer kvaliteten, er der stor sandsynlighed for, at billedet er stort nok til, at det skal skaleres ned, så det passer til dine læseres stationære enheder, for slet ikke at tale om mobile enheder. Kvalitet er jo fint, men tilfælde som dette kommer med en høj pris.

For at kunne vise så mange forskellige billeder som muligt på ét enkelt billede, skal du bruge et stort billede. Det betyder igen store filer, der skal downloades i deres helhed, selv på små enheder. Der er en løsning: at vise billeder skaleret afhængigt af skærmenheden, uanset om det er desktop, tablet eller mobil.

Visning af skalerede billeder på WordPress og Joomla med CSS

Hvor meget plads fylder billeder på websider? Der er ingen faste regler, men i betragtning af deres betydning og allestedsnærværelse er svaret helt sikkert meget. Hvis du viser billeder, som du alligevel ender med at skulle skalere, giver det kun mening at være økonomisk og vise dine WordPress- eller Joomla-brugere billeder, der allerede er nedskaleret, for at fremskynde indlæsningstiden for dit websted.

CSS er der for at hjælpe med et sæt relativt ukendte, men uvurderlige attributter: srcset , sizes og media . Disse attributter – som alle understøttes af de fleste moderne webbrowsere – giver dig mulighed for at angive, hvilke billedversioner der skal vises, afhængigt af størrelsen på viewporten.

srcset supplerer den sædvanlige src- fane. Som attributnavnet antyder, bruger du det i stedet for at angive et enkelt billede til at angive en liste over skalerede billeder og bredden, når hvert billede skal bruges. Sammen med det bruges attributten sizes , som du kan bruge til at definere, hvornår billeder skal vises baseret på visningsbredden.

Du kan læse mere om disse attributter her , men den gode nyhed er, at WordPress i de seneste par år automatisk har omskaleret dine billeder og vist de passende størrelser til dine læsere. Resultatet er forbløffende: et portrætbillede med 511 kb reduceres til 42 kb på mobile enheder.

Automatisk omskalering og optimering med ImageRecycle

Når det kommer til billedstørrelser, jo mindre jo bedre, så længe kvaliteten ikke kompromitteres. Selvom WordPress hjælper dig ved at bruge srcset , er der mere, du kan gøre for at minimere billedstørrelser, især ved at skalere og komprimere billeder.

ImageRecycle er et plugin, der kan skalere og komprimere billeder for dig på samme tid, og det er tilgængeligt på både WordPress og Joomla. Bedst af alt, du kan bruge ImageRecycle til at skalere og komprimere billeder automatisk.

Skalering er især nyttigt, hvis du bruger stockbilleder i din WordPress- eller Joomla-blog. Disse billeder er ofte uforholdsmæssigt store i forhold til al brug, inklusive trykte medier. På nettet er det meget usandsynligt, at du nogensinde får brug for at bruge hele deres opløsning. Med ImageRecyclekan du automatisk skalere store billeder ned til en maksimal højde eller bredde ved upload.

Som supplement til reskalering er komprimering, som optimerer billedstørrelsen uden at gå på kompromis med kvaliteten. Med tabsgivende komprimering kan du reducere billedpladsen med op til 80%. Dette gælder ikke kun for de originale billeder, men også for de billeder, der er reskaleret af WordPress. Endnu engang kan ImageRecycle gøre dette automatisk for dig.

Det, du ser som et par ekstra kilobyte, kan betyde værdifuld tabt tid for dine læsere. Den gode nyhed er, at du ikke behøver at ofre kvalitet for indlæsningstider. Med smartere brug af CSS og ImageRecyclereskalering og optimering kan du få billeder i høj kvalitet, der tilpasser sig dine læseres enheder.