Media: obrazki i tekst alternatywny

Moduł 4: Tworzenie treści · Czas czytania: 9 minut

Cel lekcji: Po tej lekcji będą Państwo potrafili prawidłowo przygotowywać, przesyłać i opisywać obrazki, tak aby szybko się ładowały, wyglądały ostro i były użyteczne dla wszystkich.

Kluczowe pojęcia: biblioteka mediów, formaty obrazków, big image threshold (2560 pikseli), JPEG, PNG, WebP, AVIF, kompresja, srcset, lazy loading, tekst alternatywny, nazwa pliku, prawa autorskie

Co się dzieje, gdy przesyłają Państwo zdjęcie

Przesyłają Państwo zdjęcie z telefonu: 4.000 na 3.000 pikseli, 5 MB. WordPress robi wtedy więcej, niż mogłoby się wydawać:

1. Jeśli zdjęcie jest szersze lub wyższe niż 2.560 pikseli, WordPress tworzy pomniejszoną wersję (z dopiskiem -scaled w nazwie) i używa jej jako „oryginału”. Prawdziwy oryginał również pozostaje zachowany. Nazywa się to big image threshold i istnieje od wersji WordPress 5.3.
2. WordPress tworzy ponadto szereg mniejszych formatów: miniaturę (domyślnie 150 na 150 pikseli, przycięta), średni (300), duży (1024) oraz dodatkowe formaty o szerokości 768, 1536 i 2048 pikseli. Motyw i wtyczki często dodają do tego własne formaty.
3. Wszystkie wersje trafiają do katalogu wp-content/uploads/2026/11/ (rok i miesiąc przesłania).

Jedno zdjęcie szybko staje się w ten sposób ośmioma lub więcej plikami. Dlatego katalog uploads rośnie tak szybko (lekcja 1.3) i dlatego ma znaczenie, co Państwo przesyłają.

Na stronie WordPress umieszcza przy obrazku atrybut srcset: listę wszystkich tych formatów. Przeglądarka sama wybiera najmniejszy format, który jest wystarczająco ostry dla danego ekranu. Telefon załaduje wtedy format 768 pikseli, a duży ekran format 1536 pikseli. Działa to dobrze tylko wtedy, gdy formaty rzeczywiście istnieją, czyli gdy przesyłają Państwo pliki przez bibliotekę mediów, a nie przez FTP.

Wcześniejsze pomniejszanie i kompresja

Nawet przy tych automatycznych formatach warto pomniejszyć zdjęcia wcześniej:

• Rozmiar: zdjęcie, które na Państwa stronie nigdy nie jest wyświetlane szersze niż 1.600 pikseli, nie musi mieć szerokości 4.000 pikseli. Proszę pomniejszyć je wcześniej do około 2.000 pikseli po dłuższym boku. Zmniejsza to zużycie miejsca, rozmiar kopii zapasowej i czas przesyłania.
• Kompresja: plik JPEG z jakością 75 do 85 wygląda dla oka niemal tak samo jak przy jakości 100, ale jest często o połowę mniejszy.
• Metadane: zdjęcia z telefonu często zawierają lokalizację GPS, w której zostały zrobione. Jeśli nie chcą Państwo, by wszyscy wiedzieli, gdzie Państwo mieszkają, proszę usunąć te dane przed przesłaniem. WordPress usuwa wiele metadanych w pomniejszonych formatach, ale oryginał może je nadal zawierać.

Istnieją wtyczki, które kompresują obrazki podczas przesyłania lub konwertują je na nowocześniejszy format. Przydatne, ale proszę sprawdzić, czy robią to na własnym serwerze, czy wysyłają zdjęcia do zewnętrznej usługi (lekcja 9.3), oraz czy rzeczywiście potrzebują Państwo wtyczki, skoro można to zrobić wcześniej samodzielnie.

Który format

Jeśli Państwa serwer nie potrafi przetworzyć danego formatu, WordPress zgłasza błąd podczas przesyłania lub nie tworzy mniejszych formatów. W Narzędzia > Stan witryny (zakładka Informacje, sekcja Obsługa mediów) widać, jakie formaty obsługuje Państwa serwer.

Lazy loading

Od wersji WordPress 5.5 obrazki automatycznie otrzymują atrybut loading="lazy": przeglądarka ładuje obrazek dopiero wtedy, gdy przewiną Państwo do niego stronę. Dzięki temu długa strona z wieloma zdjęciami ładuje się znacznie szybciej. WordPress celowo pozostawia pierwszy duży obrazek na górze strony bez lazy loading i często nadaje mu priorytet za pomocą fetchpriority="high", ponieważ powinien być widoczny jak najszybciej. Wrócimy do tego w lekcji 6.3.

Proszę zawsze ustawiać także szerokość i wysokość obrazka (WordPress robi to automatycznie w przypadku obrazków z biblioteki mediów). Dzięki temu przeglądarka rezerwuje wcześniej odpowiednie miejsce i tekst nie przeskakuje, gdy zdjęcie się ładuje.

Tekst alternatywny: dla osób, które nie widzą obrazka

Tekst alternatywny (alt) opisuje, co znajduje się na obrazku. Czytniki ekranu odczytują go na głos niewidomym i słabowidzącym odwiedzającym, a pojawia się on także wtedy, gdy obrazek się nie załaduje. Wyszukiwarki wykorzystują go, aby zrozumieć treść obrazka.

Dobry tekst alternatywny opisuje, co obrazek oznacza w danym kontekście:

• Źle: IMG_4032.jpg lub foto.
• Źle: sklep rowerowy rower e-bike kupić tani rower (nagromadzenie słów kluczowych nikomu nie pomaga).
• Dobrze: Mechanik reguluje hamulce niebieskiego e-bike'a w warsztacie.

Jeśli obrazek jest czysto dekoracyjny (linia, wzór tła), proszę pozostawić tekst alternatywny pusty. Wtedy czytnik ekranu go pomija. Pusty to co innego niż brakujący: w przypadku obrazka bez atrybutu alt czytnik ekranu często odczytuje nazwę pliku. Obrazek, który jest jednocześnie linkiem (na przykład logo prowadzące do strony głównej), opisuje, dokąd prowadzi link: Do strony głównej Fietsenwinkel De Spaak.

W bibliotece mediów tekst alternatywny wpisuje się przy samym obrazku, a w edytorze blokowym przy bloku obrazka. Proszę pamiętać: tekst alternatywny wprowadzony w bibliotece mediów nie zmienia się automatycznie przy obrazkach, które już znajdują się na stronach.

Nazwy plików i prawa autorskie

• Nazwa pliku: e-bike-remmen-afstellen.jpg mówi więcej niż IMG_4032.jpg i pojawia się w adresie obrazka. Małe litery, myślniki, bez spacji.
• Prawa autorskie: obrazek z Grafiki Google nie jest wolny do użycia. Fotografowie i banki zdjęć regularnie wysyłają faktury za korzystanie z obrazków bez licencji. Proszę używać własnych zdjęć, zdjęć z jasną licencją lub banku zdjęć, którego warunki Państwo znają, i zachować dowód posiadanej licencji.

Przechowywanie i porządkowanie

Biblioteka mediów nie porządkuje się sama. Obrazek usunięty ze strony pozostaje w bibliotece i w katalogu uploads, wraz ze wszystkimi swoimi formatami. Przy stronie z wieloletnią zawartością narasta to z czasem. Proszę od czasu do czasu robić porządki, ale ostrożnie: obrazek może być używany w miejscu, którego biblioteka nie widzi (w ustawieniu motywu, widżecie lub e-mailu). Przed tym proszę wykonać kopię zapasową.

Podsumowanie

• WordPress tworzy z każdego przesłanego pliku kilka formatów i pomniejsza duże zdjęcia do 2.560 pikseli; przeglądarka wybiera przez srcset odpowiedni format.
• Proszę pomniejszać i kompresować zdjęcia wcześniej oraz usuwać dane o lokalizacji.
• Proszę używać JPEG lub WebP do zdjęć, PNG do logo i zrzutów ekranu; SVG tylko z wtyczką, która je oczyszcza.
• Lazy loading działa automatycznie, z wyjątkiem pierwszego dużego obrazka; szerokość i wysokość zapobiegają przeskakiwaniu układu.
• Tekst alternatywny opisuje, co obrazek oznacza w danym kontekście; czysta dekoracja otrzymuje pusty tekst alternatywny.

Quiz

Zadanie

Zadanie A4.4: Obrazki na Państwa stronie głównej. Proszę wpisać adres swojej strony. Program odczyta stronę główną i sprawdzi pierwsze 20 obrazków: czy mają atrybut alt (pusty może być, brak nie), czy mają ustawioną szerokość i wysokość oraz jaki jest rozmiar każdego pliku (przez zapytanie HEAD)? Obrazki powyżej 300 kB zostaną zgłoszone. Proszę poprawić to, co jest oznaczone na czerwono, w bibliotece mediów lub na stronie, a następnie sprawdzić ponownie.

Dalsza lektura

Poniższe artykuły opisują kroki w panelach WebOké; w innych panelach działają one w podobny sposób.

• Instrukcja DirectAdmin 18.5: Zbyt duży plik do przesłania (błąd 413) lub przekroczenie czasu oczekiwania
• Przesyłanie pliku nie powiodło się: prosimy zwiększyć wartości upload_max_filesize oraz max_execution_time
• Biblioteka mediów (wordpress.org, w języku angielskim): https://wordpress.org/documentation/article/media-library-screen/
• Pisanie tekstów alternatywnych (W3C, w języku angielskim): https://www.w3.org/WAI/tutorials/images/decision-tree/