Joomla responsivt billede ved hjælp af srcset og komprimering

Optimering? Tjek. Lazy loading ? Tjek igen. Alligevel føles din Joomla! hjemmeside klodset, og den tager for lang tid at indlæse på mobile enheder og langsomme forbindelser. Fortvivl ikke - det er her, HTML-strukturen kommer i brug; mere præcist, billedkildesættene eller srcset- attributten.

Måske bruger din Joomla!-blog billeder af høj kvalitet, og du kan bare ikke – eller ønsker ikke – at slippe af med dem. Det er ingen grund til bekymring. Med Joomla!s Droppics-plugin kan du ikke blot anvende generel optimering til billeder, men også vise forskellige filer afhængigt af brugernes enheder.

Responsive billeder med HTML srcset

Hvis du nogensinde har prøvet noget med HTML, ved du, at billeder defineres af en kildeattribut – src . Billedkilden er det sted, hvorfra browsere indlæser billeder, som skal vises til dine Joomla!-brugere. Problemet med at bruge en ensartet kilde til et bestemt billede er, at den samme fil altid vil blive indlæst, uanset hvor stor den er.

Hvis du for eksempel har et hero-banner øverst i en artikel, vil det samme billede blive indlæst på tværs af alle enheder. Browsere downloader billedet og skalerer det derefter ned, nogle gange drastisk, især på mobile enheder. Med moderne browsere kan du definere ikke blot en kilde til billeder, men et sæt af kilder – kildesættet srcset .

Som navnet antyder, er kildesættet en liste over kilder i stedet for en enkelt kilde. Hver kilde er knyttet til en browserbredde, så mobile enheder kan downloade små billeder, og brugere, der tilgår din Joomla!-blog fra desktops, kan downloade billedet i fuld opløsning. Med andre ord transformerer billed-srcsettet billeder til responsive billeder.

Resultatet af at bruge kildesæt er ikke blot hurtigere indlæsningstider, men også forbedrede SEO-scorer. Alt dette kommer til den lille pris, at der er kopier af det samme billede med forskellige opløsninger, der er let tilgængelige, når brugerne har brug for dem. Du kan læse mere om srcset- attributten og alt andet relateret til kildesæt her , men hvis du er utålmodig efter at begynde at bruge dem på din Joomla!-blog, så læs videre.

Visning af skalerede billeder på Joomla! med Droppics

Du kender måske Droppics som en simpel Joomla! gallerihåndteringsudvidelse, men der sker meget under motorhjelmen, som du måske ikke er klar over. Et godt eksempel: Droppics bruger nu kildekoden til at indlæse de rigtige billeder til dine brugere. Hvis du ikke er klar over denne funktion, er det muligt, at du heller ikke udnytter den.

For at bruge srcset-attributten på din Joomla!-blog skal du først aktivere den via din Droppics-konfiguration. Gå til hovedparameterfanen i Droppics' indstillinger og aktiver responsive billeder blandt de første muligheder. Gem ændringerne for at gemme de nye indstillinger.

Som responsive billeder fortæller dig, opretter Droppics to nye miniaturebilleder for hvert Joomla!-billede, du har, når du aktiverer indstillingen. Disse miniaturebilleder er selve de responsive billeder, som gengives afhængigt af den enhed, der bruges til at tilgå din Joomla!-blog.

Når du opretter et opslag og indsætter et Droppics-billede, indstiller udvidelsen automatisk srcset for dig. Tror du ikke på os? Undersøg HTML-koden i frontend, og du vil finde flere kilder til forskellige enhedsstørrelser.

Generel optimering er fint nok, ligesom lazy loading, men nogle gange er der kun en grænse for, hvad de kan gøre. I nogle tilfælde kan brugen af ​​den moderne HTML-teknik med at levere billedkildesæt i stedet for enkeltstående kilder være nøglen til at overvinde langsomme indlæsningstider.

Men vent, det er ikke alt. Der mangler stadig en brik i puslespillet.

Komprimer srcset-billeder i Joomla!

Du spekulerer måske på, om det er umagen værd at have flere kopier af det samme billede. Måske vil du spare plads på serveren, eller du er bange for, at de nye billeder vil hobe sig op. Bare fordi du bruger kildesættet, betyder det ikke, at du ikke kan kombinere det med andre optimeringsteknikker, såsom komprimering.

ImageRecycle er også tilgængelig på Joomla!, og du kan integrere det problemfrit med Droppics. Faktisk kan du endda konfigurere det til automatisk at komprimere dine Joomla!-kildekodebilleder med det samme, når de genereres. Du kan spare op til 80 % med tabsgivende, eller bedste sparekomprimering, og op til 20 % med tabsfri, eller original, komprimering. Du kan læse mere om forskellen her .

Du kan indstille ImageRecycle til automatisk at komprimere billeder ved at gå til udvidelsens konfiguration i Joomla! Derfra skal du gå til Avanceret og aktivere optimer medier ved lagring . Alternativt kan du manuelt vælge, hvilke billeder der skal optimeres, via ImageRecycle brugerflade.

Indlæsningstider er et mangesidet problem. Du skal samtidig minimere filstørrelser, samtidig med at du opretholder kvaliteten og sparer lagerplads. Med det magiske Droppics' kildekodesæt og ImageRecyclekomprimering er det ikke kun muligt, men det kan også være en nem, automatiseret proces.