index.html — matmenys ir padėkos nuoroda

Du pakeitimai index.html, abu nedideli ir abu iš ką tik perskaitytos teorijos.

Duok kiekvienam paveikslėliui jo tikrus matmenis

Kiekvienas kortelės paveikslėlis gauna width ir height — tikrą paveikslėlio dydį pikseliais, kad naršyklė rezervuotų reikiamą vietą dar prieš atkeliaujant failui ir niekas nešoktelėtų kraunantis puslapiui. loading="lazy" jau yra iš anksčiau; matmenys prisijungia prie jo:

<img src="…/DustAngelNebula_rba1024.jpg" alt="A Dust Angel Nebula"
     width="1024" height="664" loading="lazy">
<img src="…/moonhalo_mccay.jpg" alt="A Halo Around the Moon"
     width="500" height="743" loading="lazy">
<img src="…/burnscliff_opportunity.jpg" alt="Burns Cliff on Mars"
     width="640" height="480" loading="lazy">

Naudok kiekvieno paveikslėlio tikrą dydį, ne spėjimą — 1024×664, 500×743, 640×480. Tai trys skirtingos formos (viena net aukštesnė nei platesnė), ir skaičiai tai sako sąžiningai; object-fit: cover vis tiek apkerpa juos visus iki tos pačios plytelės. Ir atkreipk dėmesį į kiekvieno alt: jis įvardija, kas yra paveikslėlis, ne failo vardą.

Jokio srcset. Perskaitei kodėl: vienintelės dvi NASA duodamos kopijos abi kur kas didesnės už kortelės plytelę, o spėtas pločio deskriptorius pasunkintų puslapį telefone. Trys aukščiau esantys atributai — tie, kurie iš tikrųjų padeda, tad būtent jie ir įdiegiami.

Tvarkinga padėkos nuoroda

Hero blokas gauna vieną eilutę — įterptinę nuorodą, kreditą NASA, su .text-link klase, kurią apiforminsi toliau:

<p>Powered by NASA's <a href="https://apod.nasa.gov/apod/" class="text-link">Astronomy Picture of the Day</a>.</p>

Jos href yra absoliutus, nes rodo į NASA svetainę, ne tavo. Tai ir sąžininga: rodai NASA nuotraukas, tad įvardiji šaltinį tekstu, kurį skaitytojas gali atsekti. Stebėk šią nuorodą kurdamas — ramybės būsenoje ji pažymėta vien spalva, o tai tiksliai „niekada vien spalva" atvejis iš teorijos. Stebėk, ar tau tai atrodo įskaitoma; tokį sprendimą priiminėsi prie kiekvienos įterptinės nuorodos.