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 w jednym obrazie, musisz użyć dużego. To z kolei przekłada się na duże pliki, które nawet na małe urządzenia trzeba pobrać w całości. Istnieje rozwiązanie: serwowanie obrazów skalowanych w zależności od urządzenia wyświetlającego, czy to komputera stacjonarnego, tabletu czy telefonu komórkowego.

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

Ile miejsca zajmują obrazy na stronach internetowych? Nie ma sztywnych zasad, ale biorąc pod uwagę ich znaczenie i wszechobecność, odpowiedzi jest zdecydowanie dużo. Jeśli serwujesz obrazy, które i tak będziesz musiał przeskalować, rozsądnie jest zachować ostrożność i oferować użytkownikom WordPress lub Joomla obrazy, które są już zmniejszone, aby przyspieszyć czas ładowania witryny.

CSS ma pomóc w przypadku zestawu stosunkowo nieznanych, ale bezcennych atrybutów: srcset , sizes i media . Te atrybuty — wszystkie obsługiwane przez większość nowoczesnych przeglądarek internetowych — pozwalają określić, które wersje obrazów 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 ImageRecyclemoż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 postrzegasz 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 rzecz czasu ładowania. Dzięki mądrzejszemu wykorzystaniu CSS oraz przeskalowaniu i optymalizacji ImageRecyclemożesz uzyskać wysokiej jakości obrazy, które dostosowują się do urządzeń Twoich czytelników.