Medija: paveikslėliai ir alt tekstas

4 modulis: Turinio kūrimas · Skaitymo trukmė: 9 min.

Mokymosi tikslas: Po šios pamokos galėsite tinkamai paruošti, įkelti ir aprašyti paveikslėlius, kad jie greitai įsikeltų, atrodytų aiškiai ir būtų naudingi visiems.

Pagrindinės sąvokos: failų saugykla, paveikslėlių formatai, big image threshold (2560 pikselių), JPEG, PNG, WebP, AVIF, glaudinimas (kompresija), srcset, lazy loading, alt tekstas, failo pavadinimas, autorių teisės

Kas nutinka, kai įkeliate nuotrauką

Įkeliate nuotrauką iš savo telefono: 4 000 x 3 000 pikselių, 5 MB. WordPress tuomet atlieka daugiau darbo, nei galvojate:

1. Jei nuotrauka yra platesnė arba aukštesnė nei 2 560 pikselių, WordPress sukuria sumažintą versiją (su -scaled pavadinime) ir naudoja ją kaip „originalą“. Tikrasis originalas taip pat išsaugomas. Tai vadinama big image threshold ir egzistuoja nuo WordPress 5.3 versijos.
2. Be to, WordPress sukuria eilę mažesnių formatų: miniatiūrą (numatytasis dydis 150 x 150 pikselių, apkarpytą), vidutinį (300), didelį (1024) ir papildomus 768, 1536 bei 2048 pikselių pločio formatus. Jūsų tema ir įskiepiai dažnai prideda ir savų formatų.
3. Visos versijos patenka į wp-content/uploads/2026/11/ (įkėlimo metai ir mėnuo).

Taip viena nuotrauka greitai tampa aštuoniais ar daugiau failų. Štai kodėl aplankas uploads taip sparčiai auga (3 pamoka), ir štai kodėl svarbu, ką įkeliate.

Puslapyje prie paveikslėlio WordPress prideda srcset: sąrašą visų tų formatų. Naršyklė pati pasirenka mažiausią formatą, kuris yra pakankamai aiškus ekranui. Telefonas tuomet įkelia 768 pikselių formatą, didelis ekranas, 1536 pikselių. Tai gerai veikia tik tuomet, jei formatai yra sukurti, taigi, jei įkeliate per failų saugyklą, o ne per FTP.

Išankstinis sumažinimas ir glaudinimas (kompresija)

Net ir turint tuos automatinius formatus, verta nuotraukas sumažinti iš anksto:

• Dydis: nuotrauka, kuri Jūsų svetainėje niekada nerodoma platesnė nei 1 600 pikselių, neturi būti 4 000 pikselių pločio. Sumažinkite ją iš anksto iki maždaug 2 000 pikselių ilgesnėje pusėje. Tai sutaupo vietą saugykloje, atsarginės kopijos dydį ir įkėlimo laiką.
• Glaudinimas (kompresija): JPEG su kokybe nuo 75 iki 85 atrodo akiai beveik taip pat kaip kokybė 100, tačiau dažnai yra perpus mažesnis.
• Metaduomenys: telefonu darytos nuotraukos dažnai turi GPS vietos duomenis, kur jos buvo padarytos. Jei nenorite, kad visi žinotų, kur gyvenate, pašalinkite juos prieš įkeldami. WordPress pašalina daug metaduomenų sumažintuose formatuose, tačiau originalas gali juos vis dar turėti.

Yra įskiepių, kurie suglaudina paveikslėlius įkeliant arba konvertuoja juos į modernesnį formatą. Tai patogu, tačiau patikrinkite, ar jie tai atlieka Jūsų pačių serveryje, ar siunčia nuotraukas į išorinę paslaugą (9.3 pamoka), ir ar Jums tikrai reikia įskiepio, jei galite tai atlikti ir iš anksto.

Koks formatas

Jei Jūsų serveris negali apdoroti formato, WordPress įkeliant praneš klaidą arba nesukurs mažesnių formatų. Priemonės > Tinklalapio būklė (skirtukas Informacija, dalyje Media-afhandeling) matysite, kokius formatus palaiko Jūsų serveris.

Lazy loading

Nuo WordPress 5.5 versijos paveikslėliai automatiškai gauna loading="lazy": naršyklė įkelia paveikslėlį tik tuomet, kai iki jo priskrolinama. Tai žymiai paspartina ilgą puslapį su daugybe nuotraukų. WordPress sąmoningai palieka pirmąjį didelį paveikslėlį puslapio viršuje be lazy loading ir dažnai jam suteikia pirmenybę su fetchpriority="high", nes jis turi būti matomas kuo greičiau. Prie to grįšite 6.3 pamokoje.

Taip pat visada nustatykite paveikslėlio plotį ir aukštį (WordPress tai atlieka failų saugyklos paveikslėliams). Tuomet naršyklė iš anksto palieka vietos ir tekstas nepašoka, kai nuotrauka įsikelia.

Alt tekstas: tiems, kas paveikslėlio nemato

Alt tekstas (alternatyvus tekstas) apibūdina, kas pavaizduota paveikslėlyje. Ekrano skaitytuvai jį perskaito aklų ir silpnaregių lankytojų, o jis rodomas, jei paveikslėlis neįsikelia. Paieškos sistemos naudoja jį, kad suprastų, kas yra paveikslėlyje.

Geras alt tekstas apibūdina, ką paveikslėlis sako šiame kontekste:

• Blogai: IMG_4032.jpg arba nuotrauka.
• Blogai: dviraciu parduotuve dviratis e-dviratis pirkti pigus dviratis (raktažodžių krūva niekam nepadeda).
• Gerai: Meistras reguliuoja mėlyno elektrinio dviračio stabdžius dirbtuvėje.

Jei paveikslėlis yra tik dekoratyvinis elementas (linija, fono raštas), palikite alt tekstą tuščią. Tuomet ekrano skaitytuvas jį praleis. Tuščias reiškia ką kita nei nebuvimas: paveikslėlis be alt dažnai priverčia ekrano skaitytuvą perskaityti failo pavadinimą. Paveikslėlis, kuris yra nuoroda (pavyzdžiui, logotipas, vedantis į pradinį puslapį), turi apibūdinti, kur nuoroda veda: Į Fietsenwinkel De Spaak pradinį puslapį.

Failų saugykloje alt tekstą nurodote prie paties paveikslėlio, o blokų redaktoriuje, paveikslėlio bloke. Atkreipkite dėmesį: failų saugykloje įvestas alt tekstas automatiškai nepasikeičia paveikslėliuose, kurie jau yra puslapiuose.

Failų pavadinimai ir autorių teisės

• Failo pavadinimas: e-bike-remmen-afstellen.jpg sako daugiau nei IMG_4032.jpg ir patenka į paveikslėlio adresą. Mažosios raidės, brūkšneliai, jokių tarpų.
• Autorių teisės: paveikslėlis iš Google Images nėra laisvai naudojamas. Fotografai ir vaizdų bankai reguliariai siunčia sąskaitas už naudojimą be licencijos. Naudokite savo nuotraukas, nuotraukas su aiškia licencija arba vaizdų banką, kurio sąlygas žinote, ir saugokite savo licencijos įrodymą.

Vietos saugykloje ir sutvarkymas

Failų saugykla pati savęs netvarko. Paveikslėlis, kurį pašalinate iš puslapio, lieka saugykloje ir aplanke uploads su visais savo formatais. Svetainėje su metų metais sukauptu turiniu tai susikaupia. Retkarčiais susitvarkykite, tačiau atsargiai: paveikslėlis gali būti naudojamas vietoje, kurios saugykla nemato (temos nustatyme, valdiklyje arba laiške). Pirmiausia pasidarykite atsarginę kopiją.

Santrauka

• WordPress iš kiekvieno įkėlimo sukuria kelis formatus ir sumažina dideles nuotraukas iki 2 560 pikselių; naršyklė per srcset pasirenka tinkamą formatą.
• Sumažinkite ir suglaudinkite nuotraukas iš anksto bei pašalinkite vietos duomenis.
• Nuotraukoms naudokite JPEG arba WebP, logotipams ir ekrano nuotraukoms, PNG; SVG tik su įskiepiu, kuris jį išvalo.
• Lazy loading veikia automatiškai, išskyrus pirmąjį didelį paveikslėlį; plotis ir aukštis apsaugo nuo teksto pašokimo.
• Alt tekstas apibūdina, ką paveikslėlis sako kontekste; grynai dekoratyviniam elementui priskiriamas tuščias alt tekstas.

Testas (quiz)

Užduotis

Užduotis A4.4: Paveikslėliai Jūsų pradiniame puslapyje. Įveskite savo svetainės adresą. Programa perskaitys pradinį puslapį ir patikrins pirmuosius 20 paveikslėlių: ar jie turi alt atributą (gali būti tuščias, bet ne nebuvimas), ar jie turi plotį ir aukštį, ir koks yra kiekvieno failo dydis (per HEAD užklausą)? Paveikslėliai, didesni nei 300 kB, bus paminėti. Pataisykite tai, kas raudona, Jūsų failų saugykloje arba puslapyje, ir patikrinkite iš naujo.

Papildoma literatūra

Šie straipsniai aprašo veiksmus WebOké skydeliuose; kituose skydeliuose jie veikia panašiai.

• DirectAdmin vadovas 18.5: Per didelis įkeliamas failas (klaida 413) arba laiko limito viršijimas
• Nepavyksta įkelti failo: padidinkite upload_max_filesize ir max_execution_time reikšmes
• Mediabibliotheek (wordpress.org, Anglų): https://wordpress.org/documentation/article/media-library-screen/
• Alt-teksten schrijven (W3C, Anglų): https://www.w3.org/WAI/tutorials/images/decision-tree/