Obrázky

V tejto kapitole sa budeme venovať obrázkom. Nie len ako ich pridať pomocou HTML, ale aj ako ich upraviť pomocou CSS.

HTML sekcia

Základný tag pre pridanie obrázku v HTML je <img>.
Pri atribúte tagu IMG a jeho alternatívou je tag PICTURE. Na img môžeme použiť nasledujúce atribúty:

 

atribút význam príklad
src zdrojová cesta k súboru obrázku <img src=“adresar/subor.jpg“>
alt alternatívny text / popisok alt=“na obrázku je niečo“
width šírka obrázku width=300px, alebo width=50%
height Výška obrázku height=100px, alebo height=50%
sizes    
border vspace vertikálny okraj
hspace horizontálny okraj  
align zarovnanie  
usemap použitie klikacej mapy  
longdesc použitie dlhého popisku  
loading určuje kedy sa obrázok stiahnuť  

src – zdrojová cesta k súboru obrázku. Môže byť zadaná buď relatívne (adresar/subor.jpg), alebo absolútne (http://www.webstranka.com/adresar/podadresar/obrazok.jpg). Ako obrázky môžu byť použité tipy .jpg, .bmp, .png, .gif, alebo napríklad vektorové obrázky .svg. Nie je dobrou voľbou používať formát .webp, pretože nie je podporovaný vo všetkých prehliadačoch.
alt – alternatívny text je dobré zapisovať z dvoch dôvodov. Ako prvý je, že ak sa náhodou obrázok nezobrazí, či už z dôvodu ztlej cesty k súboru, alebo v prípade nefunkčného serveru a za druhé pri čítačkách stránok tzv. screenreaderoch ktoré používajú napr. ľudia zrakovo postihnutý sa tento text prečíta, aby návštevník vedel, čo sa na obrázku zobrazuje.
title – Je vhodné zapísať ako titulok obrázku, avšak tento atribút sa skoro vôbec nepoužíva. Titulok sa zobrazí v žltom okne nad úrovňou článku.
width / height – šírka / výška obrázku, ktorú môžeme zadať buď v px, alebo v percentách. Ak sa zadá iba jedna hodnota, tá druhá bude dopočítaná podľa pomeru strán obrázku. Tieto hodnoty je lepšie zadávať pomocou CSS. V HTML by toto zadanie vyzeralo nasledovne: <img src=“images/obrazok.jpg“ alt=“pekný obrázok“ width=“300″ height=“100″>
srcset – sa zadáva, keď chceme nahrať rôzne obrázky podľa šírky zobrazovaného okna a šírkovými deskriptormi. Do srcset sa zadáva väčšinou viac obrázkov oddelených čiarkou. Napr. <img src=“povodny.jpg“ srcset=“small.jpg 600w, stredny.jpg 900w, velky.jpg 1200w“> , čiže ak je šírka prehliadača menšia ako 600px, zobrazí sa súbor small.jpg, ak je šírka prehliadača medzi 600px a 900px zobrazí sa stredny.jpg a ak je prehliadač v rozmedzí 900px – 1200px sa zobrazí obrázok velky.jpg.
sizes – je ako keby nadstavbou pre srcset a to keď potrebujeme povedať srcset, že sa nemá porovnávať s šírkou okna, ale hodnotu zadanú v sizes, a môže nastaviť šírku obrázku závisle na šírke okna podobne ako to vedia urobiť percentá v atribútoch width. Napr. <img src=“vychozi.png“ srcset=“ maly.png 414w,  stredni.png 600w, velky.png 1200w“ sizes=“(max-width: 900px90vw50vw„>, čo znamená, že ak šírka prehliadača je menej ako 900px použije sa hodnota 90vw – 90% šírky prehliadača. Ak je podmienka neplatná, použije sa druhá hodnota – 50vw, čiže polovica šírky prehliadača. Tieto riešenia je lepšie zadávať cez css pomocou media queries.
border – zadávame hrúbku rámiku okolo obrázku. Napr. <img src=“obrazok.jpg“ alt=“pekný obrázok“ border=“0″>. Tiež je túto hodnotu nastavovať pomocou CSS.
vspace a hspace – vertikálne a horizontálne miesto okolo obrázku ktoré sa zadáva v pixeloch a teda bez prípony px. Percentá sa počítajú z rozmeru obrázku. Aj tu platí, že lepšie je tieto hodnoty nastaviť v CSS pomocou margin.
align – zarovnanie obrázku k okolitému textu/obsahu. Môže mať hodnoty left – obrázok je umiestnený vľavo a obtekaný po pravej strane, right – obrázok je umiestnený k pravému okraju a obtekaný zľava.
vertical-align – vertikálne umiestnenie obrázku môže mať hodnoty:
top – vrch obrázku je zarovnaný s najvyšším bodom ľubovolného objektu
text-top – vrch obrázku je zarovnaný s najvyšším bodom textu
middle – obrázok je zarovnaný s stredom riadku
absmiddle – obrázok je zarovnaný s stredom riadku. Je vhodné zadať v CSS ako vertical-align: middle;
baseline – Spodok obrázku je zarovnaný na spodok riadku. Je lepšie zadať v CSS ako vertical-align: text-bottom;
bottom – spodok obrázku je zarovnaný na spodok písmá.
absbottom – Spodok obrázku bude zarovnanýna najnižšie miesto riadku. Hodnotu je lepšie zadávať v CSS ako vertical-align: bottom;
Všetky vertical-align je tiež lepšie zadávať v CSS pomocou float: left a float:right a vertical-align pre umiestnenie na riadku. Ak chcete obrázok umiestniť na stred, je dobré ho uzavrieť do <div>u a zarovnanie na stred zadať tomuto obaľovaciemu prvku.
style – tu môžeš zadať všetky hodnoty img okrem hodnôt src a alt. Preto toto by mali byť jediné hodnoty, ktoré zadávame v HTML a ostané by mali byť zadané pomocou CSS. Zadanie CSS priamo v tagu img si môžeme pozrieť na príklade:

<img src=“obrazok.jpg“ alt=“pekný obrázok“ style=“width: 100px; height: 80px; border: 1px solid; margin-left: 10px; margin-right: 20px; float: left;“>
usemap – Popis tohto atribútu bude doplnený neskôr…
ismap – Popis tohto atribútu bude doplnený neskôr…
longdesc – By mal obsahovať cestu k rozsiahlejšiemu popisu obrázku. Tento atribút sa asi už vôbec nepoužíva…
loading – Ak má atribút hodnotu „lazy“, začne sa sťahovať až keď naň naskrolujeme, čiže sa obrázok na spodnej časti stránky nezačne sťahovať automaticky. Tiež môže mať hodnoty eager – sťiahne sa s najvyššou prioritou, alebo auto, čo je to isté, akoby atribút loading zadaný vôbec nebol a teda si prehliadač rozhodne sám, kedy si ho má stiahnuť.
Alternatívou k tagu IMG je tag PICTURE, ktorý sa používa hlavne pri ďaľších typoch obrázkov. Tu je syntax následovná:

<picture>
<source srcset=“obrazek.jpg“ type=“image/jpg“>
<img src=“nahradni-img.gif“>
</picture>

alebo:

<picture>
    <source srcset=“obrazek.webp“ type=“image/webp“>
    <img src=“nahradni-img.jpg“>
</picture>
alternatívna hodnota img by mala byť vždy vyplnená, pretože inak môžeme čakať nefunkčnosť.

CSS sekcia

V CSS môžeme v dnešnej dobe upravovať pomerne dosť atribútov obrázkov. Sú to:
border-radius – zaoblenie rohov obrázku
border – rámik okolo obrázku
box-shadow – tieň okolo obrázku
width: 100%; a height: auto;
opacity – priehladnosť – zadáva sa od hodnoty 0(úplne priehľadný) po 1 (Nepriehľadný)

filter: grayscale(100% gray); – Premena na čiernobielo
transform: scaleX(-1); – zrkadlové otočenie v smere osy x

vlastnosti filter popis
none Bez filtru (základné nastavenie)
blur(px) Efekt rozmazania, základná hodnota je 0.
brightness(%) nastavuje jas obrázku
contrast(%) nastavuje kontrast obrázku. 0 = úplne čierny, 100% = originál, nad 100% prevyšuje kontrast.
drop-shadow(h-shadow v-shadow blur spread color) Nastaví drop shadow efect na obrázok
grayscale(%) Konvertuje obrázok do stupnov šedej. 0=originál a 100%=celé čiernobiele
hue-rotate(deg) Zmení farby obrázku v farebnom kruhu. Maximálna hodnota je 360deg
invert(%) Obráti farby obrázku. 0=originál, 100%=úplne otočené.
opacity(%) Priehľadnosť. 0=úplne priehľadný, 100%=originál
saturate(%) Saturácia. 0=úplne bez saturácie, 100%=originál, nad 100%=presaturovanie.
sepia(%) Sepia efekt. 0=originál, 100%=plná sepia.
url() cesta k XML súboru napríklad k špecifickému SVG filtru.
initial
inherit dedenie vlastností od svojho rodiča.

Samozrejme je možné použiť aj viac filtrov v jednom zápise: img { filter:contrast(200%) brightness(150%); }

CSS background

Priamo súvisiace v CSS s obrázkami je aj pozadie.

atribúty background hodnoty
background-image: url(images/obrazok.jpg) nastaví adresu obrázku.
background-position: right bottom, left top; alebo center
background-repeat: opakovanie pozadia (no-repeat, repeat, repeat-x, repeat-y, space, round, initial, inherit)
background-size: Veľkosť pozadia napr. v pixeloch, alebo hodnota cover
background-origin: napríklad content-box
background-color: farba pozadia
background-attachment: scroll(skróluje s stránkou), fixed(neskróluje so stránkou), local(skróluje s obsahom elementu), initial a inherit(dedenie)