Odpowiedzialne skalowanie obrazków w WordPressie

Nie cierpię marnotrawstwa. Wczoraj natknęłam się w śmietniku na osiedlu na całą masę czystych i poskładanych ubrań. A ja akurat wrzucałam tam rolkę papieru, która wpadła mojemu dziecku do toalety. Prosto w świeżo zrobioną kupę. Kupa razem z czystymi ciuchami powędrowała na wysypisko śmieci. Okropne marnotrawstwo zasobów! I oczywiście nie chodzi tu o kupę.

Nie tylko w świecie rzeczywistym marnujemy na potęgę. Ostatnio skupiam się w pracy na odpowiednim skalowaniu obrazków, aby dostosować ich rozmiar do rozdzielczości urządzenia, na którym przegląda się stronę. Jest to upierdliwe, ale WordPress ma w tym zakresie wspaniałe możliwości i warto je wykorzystywać, aby nie przesyłać na komórkę obrazka o szerokości 4000 px, skoro wystarczy 400 px, a tym samym nie marnować energii na jego przesyłanie (im większy obrazek, tym więcej energii potrzeba do jego przesłania).

Jak dostosować w WordPressie obraz w tle

WordPress skaluje obrazki przy ich wgrywaniu na serwer ♥ ♥ ♥. Z miejsca dysponujemy więc obrazkami 'thumbnail’, 'medium’, 'large’ i 'full’, a ich rozmiary (za wyjątkiem 'full’) ustawiamy w panelu administratora. Aby ustawić obraz w tle w zależności od rozdzielczości urządzenia, możemy skorzystać z funkcji the_post_thumbnail_url():

<style>
    .bg-image {background-image: url('<?php the_post_thumbnail_url('thumbnail'); ?>'); }
    @media (min-width: 401px) { .bg-image {background-image: url('<?php the_post_thumbnail_url('medium'); ?>'); } }
    @media (min-width: 801px) { .bg-image {background-image: url('<?php the_post_thumbnail_url('large'); ?>'); } }
</style>

Odradzam korzystanie z obrazka w wersji 'full’, czyli obrazka w oryginalnym rozmiarze, bo bywa, że jego rozmiar jest gigantyczny. Lepiej użyć pomniejszonej wersji.

Jak dostosować w WordPressie obraz img

Obraz img również możemy dostosować za pomocą funkcji the_post_thumbnail_url wykorzystanej w JavaScript:

<script>
    var screen_width = screen.width;
    var post_img = document.getElementById("post-img");
    if (post_img) {
        if (screen_width > 1024) {
            post_img.src = "<?php echo the_post_thumbnail_url('large'); ?>";
        } else {
            post_img.src = "<?php echo the_post_thumbnail_url('thumbnail'); ?>";
        }
    }
</script>

Oczywiście można zastosować dodatkowe warunki else if, aby wykorzystać do maksimum możliwości WordPressa.

A co gdy nie wystarczają nam domyślne rozmiary obrazków w WordPressie?

I na to WordPress ma lekarstwo. W pliku functions.php definiujemy potrzebny rozmiar wraz z jego nazwą:

add_image_size( 'small', 200, 200);

Piękne, prawda? Jeszcze chwila i pokocham WordPressa 😉

Zalety odpowiedniego i odpowiedzialnego skalowania obrazków

1. Nie marnujemy niepotrzebnie energii.
2. Wypadamy dobrze w Google PageSpeed Insights, bo strona z dobrze dobranymi rozmiarami obrazków jest szybsza.
3. Nasza strona uzyskuje lepszą pozycję w wynikach wyszukiwania, ponieważ jest szybka.