Server korrekt skalerede billeder på dit WordPress- eller Joomla-websted

Tag ethvert billede på din WordPress- eller Joomla-blog. Hvis du bedømmer kvaliteten, er oddsen for, at billedet er stort nok til, at det skal skaleres ned for at passe på dine læsers skrivebordsenheder, så slet ikke på mobile enheder. Kvalitet er alt sammen godt og godt, men sager som denne kommer til en heftig pris.

For at rumme så mange forskellige skærme som muligt med et enkelt billede, skal du bruge et stort. Til gengæld oversættes det til store filer, der skal downloades i deres helhed, selv på små enheder. Der er en løsning: at servere billeder skaleret afhængigt af skærmenheden, uanset om der er desktop, tablet eller mobil.

Serverer skalerede billeder på WordPress og Joomla med CSS

Hvor meget plads tager billeder på websider? Der er ingen hårde og hurtige regler, men i betragtning af deres betydning og allestedsnærværende er svaret bestemt meget. Hvis du serverer billeder, som du alligevel vil ende med at omskalere, giver det kun mening at være økonomisk og betjene dine WordPress- eller Joomla-brugere med billeder, der allerede er nedskaleret for at fremskynde dit websteds indlæsningstid.

CSS er der for at hjælpe med et sæt relativt ukendte, men uvurderlige attributter: srcset , størrelser og medier . 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 af ​​viewporten.

Den srcset supplerer den sædvanlige src fane. Som attributnavnet antyder, i stedet for at angive et enkelt billede, bruger du det til at angive en liste over skalerede billeder og bredden, hvornår hvert skal bruges. Brugt sammen med det er attributten størrelser , som du kan definere, hvornår billeder skal vises baseret på visningsportbredden.

Du kan læse mere om disse attributter her , men den gode nyhed er, at WordPress i de sidste par år automatisk omskalerer dine billeder og serverer de passende størrelser til din læserskare. 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 samtidig kan omskalere og komprimere billeder for dig og er tilgængeligt på både WordPress og Joomla. Bedst af alt kan du bruge ImageRecycle til automatisk at skalere og komprimere billeder.

Omskalering er især nyttig, hvis du finder dig selv ved hjælp af stockbilleder i din WordPress- eller Joomla-blog. Disse billeder er ofte uforholdsmæssigt store til at tage højde for al brug, inklusive trykte medier. På nettet er det meget usandsynligt, at du nogensinde har brug for hele deres opløsning. Med ImageRecycle kan du automatisk omskalere store billeder til en maksimal højde eller bredde ved upload.

Komplementering af skalering er komprimering, som optimerer billedstørrelse uden at gå på kompromis med kvaliteten. Med tabsfri komprimering kan du begrænse billedpladsen med op til 80%. Dette gælder ikke kun de originale billeder, men også de billeder, der er skaleret af WordPress. Endnu en gang kan ImageRecycle gøre dette automatisk for dig.

Hvad du ser som et par ekstra kilobyte kan betyde dyrebar tabt tid for din læserskare. Den gode nyhed er, at du ikke behøver at ofre kvaliteten for indlæsningstider. Med smartere brug af CSS og ImageRecycle 's skalering og optimering kan du have billeder i høj kvalitet, der tilpasser sig dine læseres enheder.