Wyświetlaj obrazy o odpowiedniej skali na swojej stronie WordPress lub Joomla

Weź dowolny obraz na swoim blogu WordPress lub Joomla. Jeśli cenisz jakość, prawdopodobnie jest on na tyle duży, że trzeba go pomniejszyć, aby zmieścił się na komputerach stacjonarnych czytelników, nie mówiąc już o urządzeniach mobilnych. Jakość jest ważna, ale takie przypadki wiążą się z wysoką ceną.

Aby pomieścić jak najwięcej różnych wyświetlaczy za pomocą jednego obrazu, trzeba użyć dużego obrazu. To z kolei przekłada się na duże pliki, które trzeba 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 – komputera stacjonarnego, tabletu czy telefonu komórkowego.

Obsługa skalowanych obrazów w WordPressie i Joomla za pomocą CSS

Ile miejsca zajmują obrazy na stronach internetowych? Nie ma sztywnych reguł, ale biorąc pod uwagę ich znaczenie i wszechobecność, odpowiedź brzmi: zdecydowanie dużo. Jeśli udostępniasz obrazy, które i tak będziesz musiał przeskalować, warto zachować oszczędność i udostępniać użytkownikom WordPressa lub Joomla obrazy już przeskalowane, aby przyspieszyć ładowanie witryny.

CSS pomaga w obsłudze zestawu stosunkowo mało znanych, ale bezcennych atrybutów: srcset , sizes i media . Atrybuty te – wszystkie obsługiwane przez większość nowoczesnych przeglądarek internetowych – pozwalają określić, które wersje obrazu mają być wyświetlane w zależności od rozmiaru obszaru wyświetlania.

Atrybut srcset uzupełnia standardową src . Jak sama nazwa wskazuje, zamiast określać pojedynczy obraz, używa się go do określenia listy skalowanych obrazów i ich szerokości, gdy każdy z nich ma być używany. W połączeniu z nim używany jest sizes , za pomocą którego można zdefiniować, kiedy wyświetlać obrazy na podstawie szerokości obszaru widoku.

Możesz przeczytać więcej o tych atrybutach tutaj , ale dobrą wiadomością jest to, że od kilku lat WordPress automatycznie skaluje obrazy i wyświetla je w odpowiednich rozmiarach, dopasowanych do Twoich odbiorców. Rezultat jest oszałamiający: obraz w orientacji pionowej o rozmiarze 511 KB jest zmniejszany do 42 KB na urządzeniach mobilnych.

Automatyczne skalowanie i optymalizacja za pomocą ImageRecycle

Jeśli chodzi o rozmiary obrazów, im mniejsze, tym lepiej, o ile nie wpływa to negatywnie na jakość. Chociaż WordPress pomaga, używając srcset , można zrobić więcej, aby zminimalizować rozmiary obrazów, w szczególności poprzez zmianę skali i kompresję obrazów.

ImageRecycle to wtyczka, która umożliwia jednoczesne skalowanie i kompresowanie obrazów. Jest dostępna zarówno dla WordPressa, jak i Joomli. Co najważniejsze, ImageRecycle umożliwia automatyczne skalowanie i kompresowanie 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ł wykorzystać całą ich rozdzielczość. Dzięki ImageRecyclemożesz automatycznie zmniejszyć duże obrazy do maksymalnej wysokości lub szerokości podczas przesyłania.

Uzupełnieniem przeskalowania jest kompresja, która optymalizuje rozmiar obrazu bez utraty jakości. Dzięki kompresji stratnej możesz zmniejszyć rozmiar obrazu nawet o 80%. Dotyczy to nie tylko obrazów oryginalnych, ale także tych przeskalowanych przez WordPressa. Ponownie, ImageRecycle może zrobić to automatycznie za Ciebie.

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 inteligentniejszemu wykorzystaniu CSS oraz funkcji skalowania i optymalizacji ImageRecyclemożesz mieć wysokiej jakości obrazy, które dostosowują się do urządzeń Twoich czytelników.