Joomla Responsive Image Korzystanie z srcset i kompresji

Optymalizacja? Sprawdzać. Lazy loading ? Sprawdź ponownie. Mimo to, Twoja Joomla! strona internetowa jest nieporęczna, a jej ładowanie na urządzeniach mobilnych i powolne połączenia trwają zbyt długo. 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 bawiłeś się HTML, wiesz, że obrazy są definiowane przez atrybut źródła — src . Źródłem obrazu jest lokalizacja, z której przeglądarki ładują obrazy do wyświetlenia w Joomla! użytkowników. Problem z używaniem spójnego źródła dla konkretnego obrazu polega na tym, że zawsze zostanie załadowany ten sam plik, bez względu na jego wielkość.

Na przykład, jeśli masz baner bohatera u góry artykułu, ten sam obraz zostanie załadowany na wszystkich urządzeniach. Przeglądarki pobierają obraz, a następnie zmniejszają go, czasami drastycznie, zwłaszcza na urządzeniach mobilnych. W nowoczesnych przeglądarkach możesz zdefiniować nie tylko źródło obrazów, ale 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! blogu, najpierw musisz go aktywować poprzez konfigurację Droppics. do głównych parametrów w opcjach Droppics i włącz responsywne obrazy spośród pierwszych opcji. Zapisz zmiany, aby zatwierdzić nowe ustawienia.

Jak informuje podpowiedź opcji responsywnych obrazów obraz, który masz. Te miniatury są same w sobie responsywnymi obrazami, które renderują się w zależności od urządzenia używanego do uzyskania dostępu do Joomla! blog.

Kiedy tworzysz post i wstawiasz obraz Droppics, rozszerzenie automatycznie ustawia srcset za Ciebie. Nie wierzysz nam? Sprawdź 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 jest tylko tyle, co mogą 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 pokonania długich czasów ładowania.

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

Kompresuj obrazy srcset na 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 , aby automatycznie kompresował obrazy, przechodząc do konfiguracji rozszerzenia w Joomla! Stamtąd przejdź do Zaawansowane i włącz optymalizację multimediów po zapisaniu . Alternatywnie możesz ręcznie wybrać obrazy do optymalizacji za ImageRecycle .

Czasy ładowania to problem wielopłaszczyznowy. Musisz jednocześnie minimalizować rozmiary plików, zachowując jakość i oszczędzając miejsce na dysku. Z magicznym zestawem źródeł ImageRecycle i kompresją ImageRecycle nie tylko jest to możliwe, ale może to być łatwy, zautomatyzowany proces.