Media: obrazy i tekst alternatywny

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

Cel lekcji: Po tej lekcji będą Państwo potrafili dobrze przygotować, przesłać i opisać obrazy tak, aby szybko się ładowały, wyglądały ostro i były dostępne dla wszystkich.

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

Co się dzieje po przesłaniu zdjęcia

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 jego pomniejszoną wersję (z -scaled w nazwie) i używa jej jako „oryginału”. Prawdziwy oryginał również zostaje zachowany. Nazywa się to big image threshold i istnieje od WordPressa 5.3.
2. Oprócz tego WordPress tworzy serię mniejszych rozmiarów: miniaturę (domyślnie 150 x 150 pikseli, przyciętą), średni (300), duży (1024) oraz dodatkowe rozmiary o szerokości 768, 1536 i 2048 pikseli. Motyw i wtyczki często dodają jeszcze własne rozmiary.
3. Wszystkie wersje trafiają do wp-content/uploads/2026/11/ (rok i miesiąc przesłania).

Jedno zdjęcie szybko zamienia się więc w osiem lub więcej plików. Dlatego katalog uploads tak szybko rośnie (lekcja 1.3) i dlatego ma znaczenie, co Państwo przesyłają.

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

Zmniejszanie i kompresja przed przesłaniem

Nawet przy automatycznie tworzonych rozmiarach opłaca się zmniejszyć zdjęcia przed przesłaniem:

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

Istnieją wtyczki, które kompresują obrazy podczas przesyłania lub konwertują je do nowocześniejszego formatu. To wygodne, ale warto sprawdzić, czy robią to na Państwa własnym serwerze, czy wysyłają zdjęcia do zewnętrznej usługi (lekcja 9.3), oraz czy wtyczka jest naprawdę potrzebna, skoro można to zrobić wcześniej samodzielnie.

Jaki format

Jeśli serwer nie potrafi przetworzyć danego formatu, WordPress podczas przesyłania zgłosi błąd albo nie utworzy mniejszych rozmiarów. W Narzędzia > Stan witryny, na karcie Informacje, w sekcji Obsługa multimediów, widać, jakie formaty obsługuje Państwa serwer.

Lazy loading

Od WordPressa 5.5 obrazy automatycznie otrzymują loading="lazy": przeglądarka ładuje obraz dopiero wtedy, gdy użytkownik do niego przewinie. Dzięki temu długa strona z wieloma zdjęciami działa znacznie szybciej. WordPress celowo pozostawia pierwszy duży obraz na górze strony bez lazy loading i często nadaje mu pierwszeństwo za pomocą fetchpriority="high", ponieważ musi on być widoczny jak najszybciej. Wrócimy do tego w lekcji 6.3.

Proszę też zawsze podawać szerokość i wysokość obrazka (WordPress robi to w przypadku obrazów z biblioteki mediów). Wtedy przeglądarka z góry rezerwuje miejsce i tekst nie przeskakuje, gdy zdjęcie się wczyta.

Tekst alternatywny: dla tych, którzy nie widzą obrazka

Tekst alternatywny (alt) opisuje, co przedstawia obraz. Czytniki ekranu odczytują go osobom niewidomym i słabowidzącym, a pojawia się on również wtedy, gdy obraz się nie załaduje. Wyszukiwarki wykorzystują go, aby zrozumieć obraz.

Dobry tekst alternatywny opisuje, co obraz przekazuje w tym konkretnym kontekście:

• Źle: IMG_4032.jpg lub foto („zdjęcie”).
• Źle: fietsenwinkel fiets e-bike kopen goedkoop fiets („sklep rowerowy rower e-bike kupić tanio rower”; upychanie słów kluczowych nikomu nie pomaga).
• Dobrze: Monteur stelt de remmen af van een blauwe e-bike in de werkplaats („Mechanik reguluje hamulce niebieskiego roweru elektrycznego w warsztacie”).

Jeśli obraz jest wyłącznie ozdobą (linia, wzór w tle), proszę pozostawić tekst alternatywny pusty. Wtedy czytnik ekranu go pominie. Pusty to nie to samo co brakujący: przy obrazku bez atrybutu alt czytnik ekranu często odczytuje nazwę pliku. Obraz, który jest linkiem (na przykład logo prowadzące do strony głównej), opisuje, dokąd prowadzi link: Naar de homepage van Fietsenwinkel De Spaak („Do strony głównej sklepu rowerowego De Spaak”).

W bibliotece mediów tekst alternatywny ustawia się przy samym obrazku, a w edytorze blokowym przy bloku obrazka. Uwaga: tekst alternatywny wpisany w bibliotece mediów nie zmienia się automatycznie w obrazach, które już są umieszczone na stronach.

Nazwy plików i prawo autorskie

• Nazwa pliku: e-bike-remmen-afstellen.jpg mówi więcej niż IMG_4032.jpg i trafia do adresu obrazka. Małe litery, myślniki, bez spacji.
• Prawo autorskie: obrazu z Grafiki Google nie można swobodnie wykorzystywać. Fotografowie i banki zdjęć regularnie wystawiają faktury za użycie bez licencji. Proszę korzystać z własnych zdjęć, zdjęć z jasno określoną licencją lub z banku zdjęć, którego warunki Państwo znają, i przechowywać dowód posiadania licencji.

Miejsce na dysku i porządkowanie

Biblioteka mediów sama się nie porządkuje. Obraz usunięty ze strony pozostaje w bibliotece i w katalogu uploads, razem ze wszystkimi swoimi rozmiarami. Na stronie internetowej z treściami z wielu lat to się sumuje. Warto od czasu do czasu zrobić porządki, ale ostrożnie: obraz może być używany w miejscu, którego biblioteka nie widzi (w ustawieniach motywu, w widżecie lub w e-mailu). Najpierw proszę wykonać kopię zapasową.

Podsumowanie

• WordPress tworzy z każdego przesłanego pliku kilka rozmiarów i zmniejsza duże zdjęcia do 2.560 pikseli; przeglądarka wybiera odpowiedni rozmiar dzięki srcset.
• Proszę zmniejszać i kompresować zdjęcia przed przesłaniem oraz usuwać z nich dane o lokalizacji.
• Do zdjęć proszę używać JPEG lub WebP, do logo i zrzutów ekranu PNG; SVG tylko z wtyczką, która oczyszcza plik.
• Lazy loading działa automatycznie, z wyjątkiem pierwszego dużego obrazu; szerokość i wysokość zapobiegają przeskakiwaniu treści.
• Tekst alternatywny opisuje, co obraz przekazuje w danym kontekście; czysta ozdoba otrzymuje pusty tekst alternatywny.

Quiz

Zadanie

Zadanie A4.4: Obrazy na Państwa stronie głównej. Proszę wpisać adres swojej strony internetowej. Program odczytuje stronę główną i sprawdza pierwszych 20 obrazów: czy mają atrybut alt (może być pusty, ale nie może go brakować), czy mają określoną szerokość i wysokość oraz jak duży jest każdy plik (za pomocą żądania HEAD). Obrazy większe niż 300 kB są zgłaszane. Proszę poprawić to, co jest oznaczone na czerwono, w bibliotece mediów lub na stronie, a następnie sprawdzić ponownie.

Dalsza lektura

Te artykuły opisują kroki w panelach WebOké; w innych panelach działa to podobnie.

• 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, po angielsku): https://wordpress.org/documentation/article/media-library-screen/
• Pisanie tekstów alternatywnych (W3C, po angielsku): https://www.w3.org/WAI/tutorials/images/decision-tree/