Jednym z najczęściej popełnianych błędów przy prowadzeniu strony www jest brak dbałości o zdjęcia umieszczane w witrynie internetowej. Problem ten ma dwa wymiary – techniczny i wizualny. My zajmiemy się pierwszym, wpływającym bezpośrednio na szybkość strony, czyli tym, jak przygotować zdjęcia na stronę WordPress.
#1 Jaka rozdzielność zdjęć na stronę www?
Prawidłowy rozmiar zdjęć umieszczanych na stronie zależy od ich przeznaczenia. Co do zasady, powinniśmy umieszczać zdjęcia w takich rozmiarach, w jakich będą prezentowane na stronie. Dla przykładu – logo w nagłówku i stopce będzie mieć wymiary 128 x 64 px. więc plik umieszczany na stronie nie powinien być dużo większy.
Natomiast jeżeli zamierzamy użyć zdjęcia jako tła sekcji rozciągniętej na całą szerokość strony, powinniśmy zadbać o odpowiednią jakość i rozdzielczość pliku. Tu rozmiar zdjęcia powinien być w miarę duży, przy czym dłuższy bok zdjęcia powinien mieć nie więcej niż 2560px. Wbudowane mechanizmy WordPress skalują większe zdjęcia do właśnie takiego rozmiaru. Jeżeli przesłany plik jest większy, oryginał zostanie zachowany jako kopia na serwerze, a na stronie zostanie umieszczona przeskalowana kopia. Przy większej ilości zdjęć przekraczających ten rozmiar, oryginały zaczną niepotrzebnie zajmować miejsce. Zdjęcia na stronę nie powinny mieć więcej niż 72dpi.
#2 Jaki format zdjęć na stronę www?
Najpopularniejszym formatem graficznym, głównie ze względu na swoje małe rozmiary w stosunku do jakości i wagi obrazu, jest JPEG. Drugim formatem jest PNG, używany głównie kiedy chcemy otrzymać efekt przezroczystości, np. “wycięte” tło za jakimś przedmiotem lub innym obiektem. Popularnym formatem, za sprawą swoich możliwości animacyjnych, był też GIF. Jego sukcesy przypadały na przełom lat ’90 i ’00.
Współczesny standardy przewidują jednak używanie bardziej wydajnych formatów obrazów. Są to AVIF oraz WEBP, które oferują znacznie mniejszy rozmiar pliku przy zachowaniu wysokiej jakości obrazu, w porównaniu do standardowych plików JPEG. Są też kompatybilne ze wszystkimi współczesnymi przeglądarkami internetowymi.
#3 Jaka waga zdjęć na stronę www?
Tu odpowiedź jest dość oczywista – najmniejsza jak to możliwe. Oczywiście mając na uwadze odpowiednią jakość wizualną obrazu! Waga zdjęcia uzależniona jest od formatu, rozdzielczości i ilości danych. Dlatego, aby mieć pewność, że zdjęcie waży najmniej jak to możliwe, warto je skompresować przed umieszczeniem na stronie. Dobrym wyborem jest użycie narzędzia TinyPNG, dzięki któremu zmniejszymy wagę zdjęcia, zachowując jego rozdzielczość oraz, wciąż odpowiednią, jakość wizualną.
#4 Kompresja zdjęć na WordPress
W bazie pluginów WordPress dostępnych jest ogrom wtyczek oferujących optymalizację zdjęć. Wiele z nich oferuje płatne opcje, z reguły zależne od ilości przetwarzanych w miesiącu zdjęć, ich wagi czy poszczególnych opcji kompresji. Wiele z nich to dobre narzędzia jednak proces optymalizacji zdjęć można uprościć, stosując się do kilku zasad, dzięki którym możliwe jest ograniczenie narzędzi i kosztów do minimum.
Upewnij się, że Twoje zdjęcia nie przekraczają wymiaru 2560px dla dłuższego boku, oraz że wszystkie są przeskalowane do wielkości, w jakiej docelowo chcesz ich użyć na stronie. Zaoszczędzisz dzięki temu nieco przestrzeni na swoim serwerze, a przy większej ilości zdjęć taka oszczędność miejsca będzie znacząca.
Przed umieszczeniem zdjęć na stronie skorzystaj z narzędzia TinyPNG online. Dzięki temu użyte na stronie zdjęcia nie będą potrzebowały dodatkowej kompresji. Jeżeli jednak chcesz zachować metadane EXIF / IPTC, warto użyć wtyczki TinyPNG, dostępnej bezpośrednio w WordPress. Wymaga ona jednak skonfigurowania i podania klucza API.
Aby zapewnić najwydajniejszy format obrazów na stronie, możesz użyć wtyczki Converter for Media autorstwa Mateusza Gbiorczyka, która konwertuje pliki graficzne do formatu WEBP. Oferuje ona wiele przydatnych opcji, w tym wybór metody konwertowania (Imagick / GD) oraz możliwość zachowania metadanych EXIF / IPTC.
Wyświetlanie zdjęć na stronie WordPress – na co zwrócić uwagę?
Warto wziąć pod uwagę to, w jaki sposób dana strona na WordPress wyświetla zdjęcia. Nie jest to bowiem tak oczywiste, jak mogłoby się wydawać.
Po pierwsze: zdjęcia muszą być responsywne. To znaczy, że do wyświetlenia jednego zdjęcia może zostać użytych kilka wariantów, a wykorzystywane będą do tego atrybuty srcset oraz sizes w tagu img. Więcej o responsywnych zdjęciach możesz przeczytać, klikając tutaj.
Po drugie: warto zadbać o to, aby zdjęcia były ładowane, dopiero kiedy będą widoczne w obrębie okna przeglądarki, co pozwoli przyśpieszyć ładowanie strony. Jest to tzw. “leniwie ładowanie obrazków” (ang. “lazy loading”), a natywnie służy do tego atrybut loading=“lazy” w tagu img, wspierany przez większość przeglądarek. Alternatywą dla natywnego sposobu, jest użycie odpowiedniego skryptu JavaScript, który wykrywa, kiedy obszar strony z obrazkiem zaczyna być widoczny w oknie przeglądarki, po czym automatycznie pobiera obrazek. Ostatecznie możliwe jest tu użycie dodatkowej wtyczki (np. a3 Lazy Load), jednak większość współczesnych motywów powinna wspierać leniwe ładowanie obrazków automatycznie.
Podsumowanie: jak przygotować zdjęcia na stronę WordPress?
Jak widać, nie trzeba wielu narzędzi i nakładu pracy, aby zdjęcia na stronie internetowej utrzymać w odpowiednim porządku. Dbając o odpowiednie przygotowanie zdjęć mamy wpływ na wydajność strony oraz jej bezpieczeństwo. Nie zawsze trzeba używać narzędzi, które wymagają łączenia z zewnętrznymi zasobami i serwerami. Brak zoptymalizowanych zdjęć na stronie to jeden z najczęstszych błędów prowadzących do zwolnienia działania witryny.
Warto także dbać o wizualną atrakcyjność zdjęć. Wszystko zależy od założeń graficznych, jednak warto pamiętać, aby zdjęcia zostały zrobione przez profesjonalistę, który zadba o każdy aspekt – oświetlenie, jakość, ostrość czy kadr. Znaczenie bowiem ma każdy aspekt wizualny strony, nie tylko rozmiar, ale też jakość dodawanych zdjęć.
