Joomla responsivt billede ved hjælp af srcset og komprimering

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

Måske din Joomla! blog bruger billeder i høj kvalitet, og du kan bare ikke - eller ikke vil - fjerne dem. Det er ingen grund til bekymring. Med Joomla! S Droppics-plugin kan du ikke blot anvende generel optimering til billeder, men tjene forskellige filer afhængigt af brugernes enheder.

Modtagelige billeder med HTML srcset

Hvis du nogensinde har prøvet HTML, vil du vide, at billeder er defineret af en kildeattribut - src . Billedkilden er det sted, hvorfra browsere indlæser billeder for at vise dem til din Joomla! brugere. Problemet med at bruge en konsistent kilde til et bestemt billede er, at den samme fil altid vil blive indlæst, uanset hvor stor den er.

For eksempel, hvis du har et heltebanner øverst i en artikel, vil det samme billede blive indlæst på 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 kun en kilde til billeder, men et sæt 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 henter små billeder og brugere, der får adgang til din Joomla! blog fra desktops download billedet i fuld opløsning. Med andre ord omdanner billedsrcset billeder til lydhør billeder.

Resultatet af brugen af ​​kildesæt er ikke kun hurtigere indlæsningstider, men også forbedrede SEO-scores. Alt dette kommer til den lille pris at have 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 med at begynde at bruge dem på din Joomla! blog, bliv ved med at læse.

Serverer skalerede billeder på Joomla! med Droppics

Du kender måske Droppics som blot en Joomla! gallery manager-udvidelse, men der er meget, der sker under hætten, som du muligvis ikke er opmærksom på. Tilfælde: Droppics bruger nu kildesættet til at indlæse de rigtige billeder til dine brugere. Hvis du ikke er opmærksom på denne funktion, kan det muligvis bare være muligt, at du heller ikke udnytter den.

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

Som responsive billeder -indstillingen fortæller dig, ved at aktivere indstillingen opretter Droppics to nye miniaturebilleder for hver Joomla! billede du har. Disse thumbnails er selve de responsive billeder, som gengives afhængigt af den enhed, der bruges til at få adgang til din Joomla! blog.

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

Generel optimering er alt godt og godt, ligesom lazy loading , men nogle gange er der kun så meget de kan gøre. I nogle tilfælde kan brugen af ​​den moderne HTML-teknik til at levere billedkildesæt i stedet for entalskilder være nøglen til at overvinde langsomme indlæsningstider.

Men vent, det er ikke alt. Der er stadig et manglende stykke til puslespillet.

Komprimere srcset-billeder på 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 på serverpladsen, eller du er bange for, at de nye billeder stables 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 din Joomla! kildesæt billeder med det samme, når de genereres. Du kan spare op til 80% med tabsfri eller bedst gemt komprimering 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 den avancerede fane og aktivere optimere medier ved at gemme . Alternativt kan du manuelt vælge, hvilke billeder der skal optimeres via ImageRecycle grænseflade.

Indlæsningstider er et mangesidigt problem. Du skal samtidig minimere filstørrelser, samtidig med at du opretholder kvaliteten og sparer lagerplads. Med det magiske Droppics 'kildesæt og ImageRecycle 's komprimering er det ikke kun alt muligt, men det kan være en let, automatiseret proces.