Joomla Responsive Image Korzystanie z srcset i kompresji

Optymalizacja? Sprawdzać. Lazy loading ? Sprawdź ponownie. Mimo to Twoja Joomla! witryna wydaje się nieporęczna, ładuje się zbyt długo na urządzeniach mobilnych, a połączenia są wolne. Nie rozpaczaj — wtedy przydaje się struktura HTML; dokładniej, zestawy źródeł obrazu lub srcset .

Być może twoja Joomla! blog używa obrazów wysokiej jakości i po prostu nie możesz - lub nie chcesz - z nich zrezygnować. To nie jest powód do niepokoju. Dzięki wtyczce Droppics Joomla !, możesz zastosować nie tylko ogólną optymalizację obrazów, ale także obsługiwać różne pliki w zależności od urządzeń użytkowników.

Responsive Images with HTML srcset

Jeśli kiedykolwiek miałeś do czynienia z HTML, wiesz, że obrazy są definiowane przez atrybut źródłowy — src . Źródło obrazu to miejsce, z którego przeglądarki ładują obrazy i wyświetlają je w Joomla! użytkownicy. Problem z użyciem spójnego źródła dla konkretnego obrazu polega na tym, że zawsze ładowany będzie ten sam plik, niezależnie od jego wielkości.

Na przykład, jeśli masz baner główny na górze artykułu, ten sam obraz będzie ładowany na wszystkich urządzeniach. Przeglądarki pobierają obraz, a następnie go zmniejszają, czasem drastycznie, szczególnie na urządzeniach mobilnych. W nowoczesnych przeglądarkach można zdefiniować nie tylko źródło obrazów, ale także zestaw źródeł — zestaw źródeł srcset .

Jak sama nazwa wskazuje, zestaw źródeł jest listą źródeł, a nie pojedynczym źródłem. Każde źródło jest powiązane z szerokością przeglądarki, dzięki czemu urządzenia mobilne pobierają małe obrazy i użytkownicy uzyskują dostęp do Twojej Joomla! blog z komputerów stacjonarnych pobierz obraz w pełnej rozdzielczości. Innymi słowy, srcset obrazu przekształca obrazy w responsywne obrazy.

Rezultatem korzystania z zestawów źródeł jest nie tylko szybsze ładowanie, ale także lepsze wyniki SEO. Wszystko to za niewielką cenę posiadania kopii tego samego obrazu w różnych rozdzielczościach, łatwo dostępnych, gdy użytkownicy ich potrzebują. Możesz przeczytać więcej o atrybucie srcset i wszystkim innym związanym ze źródłami tutaj , ale jeśli nie możesz się doczekać, aby zacząć ich używać w swojej Joomla! blog, czytaj dalej.

Udostępnianie skalowanych obrazów w Joomla! z Droppics

Możesz znać Droppics jako po prostu Joomla! rozszerzenie menedżera galerii, ale pod maską dzieje się wiele rzeczy, których możesz nie być świastrona głównay. Przykład: Droppics używa teraz zestawu źródeł, aby załadować odpowiednie obrazy dla użytkowników. Jeśli nie wiesz o tej funkcji, możliwe, że jej nie wykorzystujesz.

Aby użyć atrybutu srcset w Joomla! blog, najpierw musisz go aktywować poprzez konfigurację Droppics. Przejdź do głównej zakładki parametrów w opcjach Droppics i włącz responsywne obrazy spośród pierwszych opcji. Zapisz zmiany, aby zatwierdzić nowe ustawienia.

Jak informuje podpowiedź dotycząca opcji obrazów responsywnych obraz, który posiadasz. Miniatury te same w sobie są responsywnymi obrazami, które renderują się w zależności od urządzenia używanego do uzyskania dostępu do Joomla! blogu.

Kiedy tworzysz post i wstawiasz obraz Droppics, rozszerzenie automatycznie ustawia dla Ciebie zestaw srcset Nie wierzysz nam? Sprawdź kod HTML w interfejsie, a znajdziesz wiele źródeł dla różnych rozmiarów urządzeń.

Ogólna optymalizacja jest w porządku, podobnie jak lazy loading, ale czasami niewiele można zrobić. W niektórych przypadkach użycie nowoczesnej techniki HTML polegającej na dostarczaniu zestawów źródeł obrazów zamiast pojedynczych źródeł może być kluczem do przezwyciężenia długiego czasu ładowania.

Ale czekaj, to nie wszystko. W łamigłówce nadal brakuje elementu.

Kompresuj obrazy srcset w Joomla!

Być może zastanawiasz się, czy warto mieć wiele kopii tego samego obrazu. Być może chcesz zaoszczędzić miejsce na serwerze lub boisz się, że nowe obrazy będą się układać. To, że korzystasz z zestawu źródłowego, nie oznacza, że ​​nie możesz go połączyć z innymi technikami optymalizacji, takimi jak kompresja.

ImageRecycle jest również dostępny w Joomla! i możesz go bezproblemowo zintegrować z Droppics. W rzeczywistości możesz nawet skonfigurować go tak, aby automatycznie kompresował Joomla! obrazy zestawu źródłowego natychmiast po ich wygenerowaniu. Możesz zaoszczędzić do 80% przy kompresji stratnej lub najlepszej kompresji i do 20% przy kompresji bezstratnej lub oryginalnej. Możesz przeczytać więcej o różnicy tutaj .

Możesz ustawić ImageRecycle tak, aby automatycznie kompresował obrazy, przechodząc do konfiguracji rozszerzenia w Joomla! Stamtąd przejdź do zaawansowane i włącz optymalizację multimediów podczas zapisywania plików . Alternatywnie możesz ręcznie wybrać obrazy do optymalizacji za pomocą interfejsu ImageRecycle ImageRecycle

Czasy ładowania to problem wieloaspektowy. Musisz jednocześnie minimalizować rozmiary plików, zachowując jednocześnie jakość i oszczędzając miejsce na dysku. Dzięki magicznemu zestawowi źródeł Droppics i kompresji ImageRecyclejest to nie tylko możliwe, ale może być łatwym, zautomatyzowanym procesem.