Mediji: attēli un alternatīvais teksts

4. modulis: Satura veidošana · Lasīšanas laiks: 9 minūtes

Mācību mērķis: Pēc šīs nodarbības Jūs varēsiet pareizi sagatavot, augšupielādēt un aprakstīt attēlus, lai tie ātri ielādētos, izskatītos asi un būtu izmantojami ikvienam.

Galvenie jēdzieni: multivides bibliotēka, attēlu formāti, big image threshold (2560 pikseļi), JPEG, PNG, WebP, AVIF, saspiešana, srcset, lēnā ielāde (lazy loading), alternatīvais teksts (alt), faila nosaukums, autortiesības

Kas notiek, kad Jūs augšupielādējat fotoattēlu

Jūs augšupielādējat fotoattēlu no sava tālruņa: 4000 reiz 3000 pikseļi, 5 MB. WordPress tad paveic vairāk, nekā Jūs domājat:

1. Ja fotoattēls ir platāks vai augstāks par 2560 pikseļiem, WordPress izveido samazinātu versiju (ar -scaled nosaukumā) un izmanto to kā "oriģinālu". Īstais oriģināls arī tiek saglabāts. To sauc par big image threshold, un tas pastāv kopš WordPress 5.3.
2. Papildus WordPress izveido vairākus mazākus formātus: sīktēlu (pēc noklusējuma 150 x 150 pikseļi, apgriezts), vidējo (300), lielo (1024) un papildu formātus ar platumu 768, 1536 un 2048 pikseļi. Jūsu tēma un spraudņi bieži pievieno vēl savus formātus.
3. Visas versijas tiek saglabātas mapē wp-content/uploads/2026/11/ (augšupielādes gads un mēnesis).

Tā viens fotoattēls ātri vien kļūst par astoņiem vai vairāk failiem. Tāpēc mape uploads tik strauji aug (nodarbība 1.3), un tāpēc ir svarīgi, ko Jūs augšupielādējat.

Lapā WordPress pievieno attēlam srcset: sarakstu ar visiem šiem formātiem. Pārlūkprogramma pati izvēlas mazāko formātu, kas ir pietiekami ass attiecīgajam ekrānam. Tālrunis tad ielādē 768 pikseļu formātu, liels ekrāns ielādē 1536 pikseļu formātu. Tas darbojas tikai tad, ja formāti pastāv, tātad, ja augšupielādējat caur multivides bibliotēku, nevis ar FTP.

Iepriekšēja samazināšana un saspiešana

Pat ar šiem automātiskajiem formātiem ir vērts fotoattēlus samazināt jau iepriekš:

• Izmērs: fotoattēlam, kas Jūsu tīmekļa vietnē nekad netiek rādīts platāks par 1600 pikseļiem, nav jābūt 4000 pikseļu platumā. Samaziniet to iepriekš līdz aptuveni 2000 pikseļiem garākajā malā. Tas ietaupa krātuvi, rezerves kopiju apjomu un augšupielādes laiku.
• Saspiešana: JPEG ar kvalitāti no 75 līdz 85 izskatās gandrīz tāpat kā kvalitāte 100, bet bieži vien ir uz pusi mazāks.
• Meta dati: tālruņa fotoattēli bieži satur GPS atrašanās vietu, kur tie uzņemti. Ja nevēlaties, lai visi zina, kur Jūs dzīvojat, noņemiet to pirms augšupielādes. WordPress noņem daudz meta datu samazinātajos formātos, taču oriģinālā tie joprojām var būt saglabāti.

Ir spraudņi, kas saspiež attēlus augšupielādes laikā vai pārveido tos modernākā formātā. Tas ir noderīgi, taču pārbaudiet, vai spraudnis to dara Jūsu pašu serverī vai sūta fotoattēlus uz ārēju pakalpojumu (nodarbība 9.3), un vai Jums patiešām ir nepieciešams spraudnis, ja to var izdarīt arī iepriekš.

Kuru formātu izvēlēties

Ja Jūsu serveris nespēj apstrādāt kādu formātu, WordPress augšupielādes laikā parāda kļūdu vai neizveido mazākus formātus. Sadaļā Rīki > Vietnes veselība (cilne Info, zem Media-afhandeling) varat redzēt, kurus formātus Jūsu serveris atbalsta.

Lēnā ielāde (lazy loading)

Kopš WordPress 5.5 attēli automātiski saņem loading="lazy": pārlūkprogramma ielādē attēlu tikai tad, kad Jūs pie tā piescrollējat. Tas padara garu lapu ar daudz fotoattēliem daudz ātrāku. WordPress apzināti atstāj pirmo lielo attēlu lapas augšdaļā bez lēnās ielādes un bieži piešķir tam prioritāti ar fetchpriority="high", jo tam jābūt redzamam pēc iespējas ātrāk. Pie šī temata atgriezīsimies nodarbībā 6.3.

Vienmēr norādiet arī platumu un augstumu attēlam (WordPress to dara automātiski attēliem no multivides bibliotēkas). Tad pārlūkprogramma iepriekš atstāj brīvu vietu, un teksts nelec, kad fotoattēls ielādējas.

Alternatīvais teksts: tiem, kas attēlu neredz

Alternatīvais teksts (alt) apraksta, kas attēlots attēlā. Ekrāna lasītāji to nolasa neredzīgiem un vājredzīgiem apmeklētājiem, un tas parādās, ja attēls neielādējas. Meklētājprogrammas to izmanto, lai izprastu attēlu.

Labs alternatīvais teksts apraksta, ko attēls nozīmē šajā kontekstā:

• Slikti: IMG_4032.jpg vai foto.
• Slikti: velosipēdu veikals velosipēds e-velosipēds pirkt lēts velosipēds (atslēgvārdu krāvums nevienam nepalīdz).
• Labi: Mehāniķis regulē zila e-velosipēda bremzes darbnīcā.

Ja attēls ir tikai dekoratīvs (līnija, fona raksts), atstājiet alternatīvo tekstu tukšu. Tad ekrāna lasītājs to izlaiž. Tukšs atšķiras no trūkstoša: attēlam bez alt atribūta ekrāna lasītājs bieži nolasa faila nosaukumu. Attēls, kas ir saite (piemēram, logotips, kas ved uz sākumlapu), apraksta, uz kurieni saite ved: Uz Fietsenwinkel De Spaak sākumlapu.

Multivides bibliotēkā alternatīvo tekstu ievadāt pie paša attēla, bet bloku redaktorā, attēla blokā. Ņemiet vērā: alternatīvais teksts, ko ievadāt multivides bibliotēkā, automātiski nemainās attēliem, kas jau izvietoti lapās.

Failu nosaukumi un autortiesības

• Faila nosaukums: e-bike-remmen-afstellen.jpg pasaka vairāk nekā IMG_4032.jpg un tiek iekļauts attēla adresē. Mazie burti, defises, bez atstarpēm.
• Autortiesības: attēlu no Google attēlu meklēšanas nevar brīvi izmantot. Fotogrāfi un bilžu bankas regulāri sūta rēķinus par izmantošanu bez licences. Izmantojiet savus fotoattēlus, fotoattēlus ar skaidru licenci vai bilžu banku, kuras noteikumus zināt, un saglabājiet licences apliecinājumu.

Krātuve un sakopšana

Multivides bibliotēka pati sevi nesakopj. Attēls, ko noņemat no lapas, paliek bibliotēkā un uploads mapē kopā ar visiem saviem formātiem. Tīmekļa vietnē ar gadiem uzkrāto saturu tas uzkrājas. Reizēm sakopiet, taču uzmanīgi: attēls var tikt izmantots vietā, ko bibliotēka neredz (tēmas iestatījumā, sīkrīkā vai e-pastā). Vispirms izveidojiet rezerves kopiju.

Kopsavilkums

• WordPress no katras augšupielādes izveido vairākus formātus un samazina lielus fotoattēlus līdz 2560 pikseļiem; pārlūkprogramma ar srcset izvēlas piemēroto formātu.
• Iepriekš samaziniet un saspiediet fotoattēlus un noņemiet atrašanās vietas datus.
• Izmantojiet JPEG vai WebP fotoattēliem, PNG logotipiem un ekrānuzņēmumiem; SVG tikai ar spraudni, kas attīra failu.
• Lēnā ielāde notiek automātiski, izņemot pirmo lielo attēlu; platums un augstums novērš satura lēkāšanu.
• Alternatīvais teksts apraksta, ko attēls nozīmē kontekstā; tīri dekoratīvam attēlam ir tukšs alternatīvais teksts.

Tests (quiz)

Uzdevums

Uzdevums A4.4: Attēli Jūsu sākumlapā. Ievadiet savas tīmekļa vietnes adresi. Programma nolasa sākumlapu un pārbauda pirmos 20 attēlus: vai tiem ir alt atribūts (tukšs drīkst, trūkstošs nedrīkst), vai tiem ir platums un augstums, un cik liels ir katrs fails (ar HEAD pieprasījumu)? Attēli, kas lielāki par 300 kB, tiek atzīmēti. Uzlabojiet to, kas atzīmēts sarkanā krāsā, savā multivides bibliotēkā vai lapā, un pārbaudiet vēlreiz.

Papildu lasāmviela

Šajos rakstos aprakstītas darbības WebOké paneļos; citos paneļos tās darbojas līdzīgi.

• DirectAdmin rokasgrāmata 18.5: Augšupielāde pārāk liela (kļūda 413) vai taimauts
• Augšupielāde neizdodas: palieliniet upload_max_filesize un max_execution_time
• Mediju bibliotēka (wordpress.org, angļu valodā): https://wordpress.org/documentation/article/media-library-screen/
• Alternatīvo tekstu rakstīšana (W3C, angļu valodā): https://www.w3.org/WAI/tutorials/images/decision-tree/