Podaj odpowiednio skalowane obrazy na swojej stronie WordPress lub Joomla

Zrób dowolne zdjęcie na swoim blogu WordPress lub Joomla. Jeśli oceniasz jakość, istnieje prawdopodobieństwo, że obraz jest na tyle duży, że należy go zmniejszyć, aby zmieścił się na urządzeniach stacjonarnych czytelników, a tym bardziej na urządzeniach mobilnych. Jakość jest dobra i dobra, ale przypadki takie jak ten mają wysoką cenę.

Aby pomieścić jak najwięcej różnych wyświetlaczy za pomocą jednego obrazu, musisz użyć dużego. To z kolei przekłada się na duże pliki, które należy pobrać w całości, nawet na małe urządzenia. Istnieje rozwiązanie: wyświetlanie obrazów skalowanych w zależności od urządzenia wyświetlającego, na komputerze, tablecie lub telefonie komórkowym.

Udostępnianie skalowanych obrazów w WordPress i Joomla z CSS

Ile miejsca zajmują obrazy na stronach internetowych? Nie ma sztywnych i szybkich zasad, ale biorąc pod uwagę ich wagę i wszechobecność, odpowiedź jest zdecydowanie duża. Jeśli podajesz obrazy, które i tak ostatecznie przeskalujesz, sensowne jest jedynie oszczędność i obsługa użytkowników WordPress lub Joomla za pomocą obrazów, które zostały już zmniejszone, aby przyspieszyć ładowanie strony.

CSS ma pomóc w zestawie stosunkowo nieznanych, ale bezcennych atrybutów: srcset , size i media . Te atrybuty — z których wszystkie są obsługiwane przez większość nowoczesnych przeglądarek — pozwalają określić, które wersje obrazu mają być wyświetlane w zależności od rozmiaru widocznego obszaru.

Srcset uzupełnia zwykły src kartę. Jak sugeruje nazwa atrybutu, zamiast określać pojedynczy obraz, możesz użyć go do określenia listy skalowanych obrazów i szerokości, kiedy każdy z nich powinien być używany. Używany w połączeniu z nim jest atrybutem rozmiarów , za pomocą którego można zdefiniować, kiedy wyświetlać obrazy na podstawie szerokości rzutni.

Możesz przeczytać więcej o tych atrybutach tutaj , ale dobrą wiadomością jest to, że przez ostatnie kilka lat WordPress automatycznie przeskalowuje twoje obrazy i udostępnia odpowiednie rozmiary twoim czytelnikom. Rezultat jest oszałamiający: obraz portretowy o wielkości 511 KB jest zmniejszany do 42 KB na urządzeniach mobilnych.

Automatyczne skalowanie i optymalizacja dzięki ImageRecycle

Jeśli chodzi o rozmiary obrazu, im mniejszy, tym lepiej, o ile jakość nie zostanie obniżona. Chociaż WordPress pomaga ci za pomocą srcset , możesz zrobić więcej, aby zminimalizować rozmiary obrazu, w szczególności przez ponowne skalowanie i kompresowanie obrazów.

ImageRecycle to wtyczka, która może jednocześnie przeskalować i kompresować obrazy i jest dostępna zarówno na WordPress, jak i Joomla. Co najlepsze, możesz użyć ImageRecycle do automatycznego ImageRecycle i kompresji obrazów.

Zmiana skali jest szczególnie przydatna, jeśli używasz obrazów stockowych na swoim blogu WordPress lub Joomla. Obrazy te są często nieproporcjonalnie duże, aby uwzględnić wszystkie zastosowania, w tym media drukowane. W Internecie jest bardzo mało prawdopodobne, że kiedykolwiek będziesz musiał używać całej ich rozdzielczości. Dzięki ImageRecycle możesz automatycznie przeskalować duże obrazy do maksymalnej wysokości lub szerokości po przesłaniu.

Uzupełnieniem przeskalowania jest kompresja, która optymalizuje rozmiar obrazu bez utraty jakości. Dzięki kompresji stratnej można ograniczyć przestrzeń obrazu nawet o 80%. Dotyczy to nie tylko oryginalnych obrazów, ale także obrazów przeskalowanych przez WordPress. Jeszcze raz ImageRecycle może to zrobić automatycznie.

To, co widzisz jako kilka dodatkowych kilobajtów, może oznaczać cenny stracony czas dla Twoich czytelników. Dobra wiastrona głównaość jest taka, że ​​nie musisz poświęcać jakości na czas ładowania. Dzięki inteligentniejszemu wykorzystaniu ImageRecycle i optymalizacji CSS i ImageRecycle możesz mieć wysokiej jakości obrazy, które dostosowują się do urządzeń Twoich czytelników.