Failai: paveikslėliai ir alternatyvusis tekstas (alt)

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ų ryškūs ir būtų prieinami visiems.

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

Kas vyksta, kai įkeliate nuotrauką

Įkeliate nuotrauką iš savo telefono: 4000 x 3000 pikselių, 5 MB. WordPress tada padaro daugiau, nei galite manyti:

1. Jei nuotrauka platesnė arba aukštesnė nei 2560 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 veikia nuo WordPress 5.3.
2. Be to, WordPress sukuria keletą mažesnių dydžių: miniatiūrą (pagal numatytuosius nustatymus 150 x 150 pikselių, apkirptą), vidutinį (300), didelį (1024) ir papildomus 768, 1536 bei 2048 pikselių pločio dydžius. Jūsų tema ir įskiepiai dažnai prideda dar ir savų dydžių.
3. Visos versijos patenka į wp-content/uploads/2026/11/ (įkėlimo metai ir mėnuo).

Taip viena nuotrauka greitai virsta aštuoniais ar daugiau failų. Todėl aplankas uploads taip sparčiai auga (pamoka 1.3), ir todėl svarbu, ką įkeliate.

Puslapyje WordPress prie paveikslėlio prideda srcset: visų tų dydžių sąrašą. Naršyklė pati pasirenka mažiausią dydį, kuris ekranui yra pakankamai ryškus. Telefonas tada įkelia 768 pikselių dydį, didelis ekranas 1536 pikselių. Tai gerai veikia tik tada, kai tie dydžiai yra sukurti, t. y. kai įkeliate per failų saugyklą, o ne per FTP.

Sumažinkite ir suglaudinkite iš anksto

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

• Matmenys: nuotrauka, kuri Jūsų svetainėje niekada nerodoma platesnė nei 1600 pikselių, neturi būti 4000 pikselių pločio. Iš anksto sumažinkite ją iki maždaug 2000 pikselių ilgojoje kraštinėje. Taip sutaupysite vietos, sumažinsite atsarginės kopijos dydį ir įkėlimo laiką.
• Glaudinimas: 75-85 kokybės JPEG akiai atrodo beveik taip pat kaip 100 kokybės, tačiau dažnai būna perpus mažesnis.
• Metaduomenys: telefonu darytose nuotraukose dažnai yra GPS vieta, kurioje jos buvo padarytos. Jei nenorite, kad visi žinotų, kur gyvenate, pašalinkite ją prieš įkeldami. WordPress sumažintuose dydžiuose pašalina daug metaduomenų, tačiau originale jų vis dar gali būti.

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

Kurį formatą rinktis

Jei Jūsų serveris negali apdoroti tam tikro formato, WordPress įkeliant parodo klaidą arba nesukuria mažesnių dydžių. Skiltyje Įrankiai > Tinklalapio būklė, kortelėje Informacija, medijos apdorojimo (Media Handling) skyriuje matysite, kuriuos formatus palaiko Jūsų serveris.

Lazy loading

Nuo WordPress 5.5 paveikslėliai automatiškai gauna loading="lazy": naršyklė paveikslėlį įkelia tik tada, kai prie jo nuslenkate. Dėl to ilgas puslapis su daug nuotraukų tampa daug greitesnis. Pirmąjį didelį paveikslėlį puslapio viršuje WordPress sąmoningai palieka be lazy loading ir dažnai suteikia jam pirmenybę su fetchpriority="high", nes jis turi būti matomas kuo greičiau. Prie to grįšite pamokoje 6.3.

Paveikslėliui taip pat visada nurodykite plotį ir aukštį (WordPress tai daro paveikslėliams iš failų saugyklos). Tada naršyklė iš anksto palieka vietos, ir tekstas nenušoka, kai nuotrauka įsikelia.

Alternatyvusis tekstas: tiems, kurie paveikslėlio nemato

Alternatyvusis tekstas (alt) aprašo, kas pavaizduota paveikslėlyje. Ekrano skaitytuvai jį perskaito akliems ir silpnaregiams lankytojams, be to, jis parodomas, kai paveikslėlis neįsikelia. Paieškos sistemos jį naudoja, kad suprastų paveikslėlį.

Geras alternatyvusis tekstas aprašo, ką paveikslėlis sako šiame kontekste:

• Blogai: IMG_4032.jpg arba nuotrauka.
• Blogai: dviračių parduotuvė dviratis elektrinis dviratis pirkti pigiai dviratis (raktinių žodžių krūva niekam nepadeda).
• Gerai: Mechanikas dirbtuvėse reguliuoja mėlyno elektrinio dviračio stabdžius.

Jei paveikslėlis yra tik puošmena (linija, fono raštas), alternatyvųjį tekstą palikite tuščią. Tada ekrano skaitytuvas jį praleis. Tuščias tekstas nėra tas pats, kas jo nebuvimas: jei paveikslėlis neturi alt, ekrano skaitytuvas dažnai perskaito failo pavadinimą. Paveikslėlis, kuris yra nuoroda (pavyzdžiui, logotipas, vedantis į pradinį puslapį), aprašo, kur nuoroda veda: I dviraciu parduotuves Stipinas pradini puslapi („Į dviračių parduotuvės „Stipinas“ pradinį puslapį“).

Failų saugykloje alternatyvųjį tekstą nurodote prie paties paveikslėlio, o blokų redaktoriuje prie paveikslėlio bloko. Atkreipkite dėmesį: failų saugykloje įvestas alternatyvusis tekstas savaime nepasikeičia paveikslėliuose, kurie jau yra puslapiuose.

Failų pavadinimai ir autorių teisės

• Failo pavadinimas: e-bike-stabdziu-reguliavimas.jpg pasako daugiau nei IMG_4032.jpg ir patenka į paveikslėlio adresą. Mažosios raidės, brūkšneliai, jokių tarpų.
• Autorių teisės: paveikslėlio iš Google paveikslėlių negalima laisvai naudoti. Fotografai ir nuotraukų bankai neretai siunčia sąskaitas už naudojimą be licencijos. Naudokite savo nuotraukas, nuotraukas su aiškia licencija arba nuotraukų banką, kurio sąlygas žinote, ir saugokite savo licencijos įrodymą.

Saugojimas ir tvarkymas

Failų saugykla savaime nesitvarko. Paveikslėlis, kurį pašalinate iš puslapio, lieka saugykloje ir aplanke uploads su visais savo dydžiais. Svetainėje, kurioje turinys kaupiamas metų metus, tai susideda. Retkarčiais apsitvarkykite, tačiau atsargiai: paveikslėlis gali būti naudojamas vietoje, kurios saugykla nemato (temos nustatyme, valdiklyje ar laiške). Pirmiausia pasidarykite atsarginę kopiją.

Santrauka

• WordPress iš kiekvieno įkelto failo sukuria kelis dydžius ir dideles nuotraukas sumažina iki 2560 pikselių; naršyklė per srcset pasirenka tinkamą dydį.
• Nuotraukas iš anksto sumažinkite, suglaudinkite ir pašalinkite vietos duomenis.
• Nuotraukoms naudokite JPEG arba WebP, logotipams ir ekrano nuotraukoms PNG; SVG tik su įskiepiu, kuris failą išvalo.
• Lazy loading veikia automatiškai, išskyrus pirmąjį didelį paveikslėlį; plotis ir aukštis apsaugo nuo turinio šokinėjimo.
• Alternatyvusis tekstas aprašo, ką paveikslėlis sako kontekste; grynai dekoratyvus paveikslėlis gauna tuščią alternatyvųjį tekstą.

Testas (quiz)

Užduotis

Užduotis A4.4: Nuotraukos Jūsų pagrindiniame puslapyje. Įveskite savo svetainės adresą. Programa nuskaito pradinį puslapį ir patikrina pirmuosius 20 paveikslėlių: ar jie turi alt atributą (tuščias leidžiamas, trūkstamas ne), ar nurodytas jų plotis ir aukštis, ir koks kiekvieno failo dydis (per HEAD užklausą)? Paveikslėliai, didesni nei 300 kB, pažymimi. Ištaisykite, kas pažymėta raudonai, savo failų saugykloje arba puslapyje ir patikrinkite dar kartą.

Papildoma literatūra

Šiuose straipsniuose aprašomi veiksmai WebOké valdymo skydeliuose; kituose skydeliuose jie atliekami 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
• Failų saugykla (wordpress.org, anglų k.): https://wordpress.org/documentation/article/media-library-screen/
• Alternatyviųjų tekstų rašymas (W3C, anglų k.): https://www.w3.org/WAI/tutorials/images/decision-tree/