Responsywny obraz Joomla z wykorzystaniem srcset i kompresji

Optymalizacja? Sprawdź. Lazy loading ? Sprawdź ponownie. Twoja witryna Joomla! nadal działa topornie i ładuje się zbyt długo na urządzeniach mobilnych i przy wolnym połączeniu. Nie trać nadziei – w takich sytuacjach z pomocą przychodzi struktura HTML; a dokładniej, ustawienia źródła obrazu, czyli srcset .

Być może Twój blog w Joomla! korzysta z wysokiej jakości obrazów i po prostu nie możesz – lub nie chcesz – z nich zrezygnować. Nie ma powodu do obaw. Dzięki wtyczce Droppics do Joomla! możesz nie tylko zastosować ogólną optymalizację obrazów, ale także serwować różne pliki w zależności od urządzeń użytkowników.

Responsywne obrazy z kodem HTML srcset

Jeśli kiedykolwiek bawiłeś się HTML-em, wiesz, że obrazy są definiowane przez atrybut źródłowy — src . Źródło obrazu to lokalizacja, z której przeglądarki ładują obrazy do wyświetlenia użytkownikom Joomla!. Problem z używaniem spójnego źródła dla konkretnego obrazu polega na tym, że zawsze będzie ładowany ten sam plik, niezależnie od jego rozmiaru.

Na przykład, jeśli na górze artykułu znajduje się baner główny, ten sam obraz będzie ładowany na wszystkich urządzeniach. Przeglądarki pobierają obraz, a następnie go zmniejszają, czasami 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ł to lista źródeł, a nie pojedyncze źródło. Każde źródło jest powiązane z szerokością przeglądarki, dzięki czemu urządzenia mobilne pobierają małe obrazy, a użytkownicy odwiedzający bloga Joomla! z komputerów stacjonarnych pobierają obraz w pełnej rozdzielczości. Innymi słowy, zestaw źródeł obrazów przekształca obrazy w obrazy responsywne.

Efektem korzystania z zestawów źródłowych jest nie tylko szybszy czas ładowania, ale także lepsze wyniki SEO. Wszystko to ma swoją cenę – kopie tego samego obrazu w różnych rozdzielczościach są łatwo dostępne, gdy użytkownicy ich potrzebują. Więcej o atrybucie srcset i innych aspektach zestawów źródłowych tutaj , ale jeśli nie możesz się doczekać, aby zacząć ich używać na swoim blogu Joomla!, czytaj dalej.

Obsługa skalowanych obrazów w Joomla! za pomocą Droppics

Droppics może być znany jedynie jako rozszerzenie do zarządzania galeriami Joomla!, ale kryje się za tym wiele rzeczy, o których możesz nie wiedzieć. Na przykład: Droppics korzysta teraz z zestawu źródłowego, aby ładować odpowiednie obrazy dla użytkowników. Jeśli nie znasz tej funkcji, możliwe, że po prostu jej nie wykorzystujesz.

Aby użyć atrybutu srcset na blogu Joomla!, najpierw musisz go aktywować w konfiguracji Droppics. Przejdź do „Parametry główne ” w opcjach Droppics i włącz responsywne obrazy jako jedną z pierwszych opcji. Zapisz zmiany, aby zatwierdzić nowe ustawienia.

Jak responsywnych obrazów , po jej włączeniu Droppics tworzy dwie nowe miniatury dla każdego obrazu Joomla!. Te miniatury to responsywne obrazy, które renderują się w zależności od urządzenia używanego do logowania się do bloga Joomla!.

Gdy tworzysz post i wstawiasz obraz Droppics, rozszerzenie automatycznie ustawia atrybut srcset . Nie wierzysz? 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 możliwości są ograniczone. W niektórych przypadkach kluczem do przezwyciężenia długiego czasu ładowania może być użycie nowoczesnej techniki HTML, polegającej na dostarczaniu zestawów źródeł obrazów zamiast pojedynczych źródeł.

Ale to nie wszystko. Wciąż brakuje jednego elementu układanki.

Kompresja obrazów 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 obawiasz się, że nowe obrazy będą się kumulować. 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żna go bezproblemowo zintegrować z Droppics. Można go nawet skonfigurować tak, aby automatycznie kompresował obrazy źródłowe Joomla! zaraz po ich wygenerowaniu. Możesz zaoszczędzić do 80% dzięki kompresji stratnej (Best Savings) i do 20% dzięki kompresji bezstratnej (Original). Więcej informacji na temat różnic znajdziesz tutaj .

Możesz ustawić ImageRecycle tak, aby automatycznie kompresował obrazy, przechodząc do konfiguracji rozszerzenia w Joomla! Następnie przejdź do „Zaawansowane” i włącz opcję „Optymalizacja multimediów podczas zapisywania ”. Możesz również ręcznie wybrać obrazy do optymalizacji za pomocą interfejsu ImageRecycle ImageRecycle

Czas ładowania to złożony problem. Trzeba jednocześnie minimalizować rozmiary plików, zachowując jednocześnie ich jakość i oszczędzając miejsce na dysku. Dzięki magicznemu zestawowi źródeł Droppics i kompresji ImageRecycle, to wszystko jest nie tylko możliwe, ale może stać się prostym, zautomatyzowanym procesem.