Kuvat kuntoon bloggerissa - osa 2

Ensimmäisessä osassa tutustuimme blogger kuvien perusteisiin ja siihen mitä oikeastaan tapahtuu kun lataat kuvasi blogger blogiin. Nyt onkin aika tutustua siihen mitä muuta kuville voi tehdä paitsi lätkäistä ne näkyviin blogissasi.

Bloggaja tulee aina taistelemaan kuvien kanssa ja kuten jo kerroin ensimmäisessä osassa blogger tekee html- koodin avulla muttoksia kuviisi, että ne näkyisivät blogissasi kunnolla. Blogger muutta automaattisesti mm. kuvan kokoa. Tämä tapahtuu html- koodissa kuvan "width" ja "height" arvoja muuttamalla. Width eli kuvan leveys, sekä height eli korkeus arvot annetaan pikseleinä (px).

Kuvien XHTML - määritykset

Kuvan xhtml koodissa width ja height esitetään näin: 

<img src="kuvan_nimi.jpg" width="300" height="300" />

Kuvan leveys ja korkeus ovat siis 300 pikseliä. Voit muokata näitä arvoja sellaiseksi kuin haluat, muista kuitenkin että suuremmat arvot kuin kuvan alkuperäinen leveys ja/tai korkeus muuttavat kuvaa epäselväksi ja rakeiseksi. Eli kuva muuttuu.  

Leveyden ja korkeuden määrittelyjen lisäksi voit käyttää kuvissasi muitakin atribuutteja. Hakukoneoptiomointiin hurahtaneet halunnevat varmasti lisätä kuviinsa alt- tagin. Alt on kuvaus tekstipohjaisia selaimia käyttäville ja kertoo mitä kuvassa on ilman että kuvan täytyy latautua. Esimerkiksi tähän tapaan:

<img src="kaunis_kukka.jpg" width="300" height="300" alt="Kaunis kukka" />

Hakukoneet kuten Google on ilmoittanut hakukoneiden lukevan myös kuvien alt -tagit määritellessään sivun sijoittumista hakukoneissa.

Blogger blogi lisää kuviin myös muuta tietoa kuten ensimmäisessä kirjoituksessa jo mainittiin. Puretaan siis bloggerin kuvien xhtml koodia hieman osiin.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTkgP3JIM8nxMl6hHT1yebvuPJvTHcJrNZzIKPwMqrQ2WhcCbIrzLoITz2KEHT8edB5R_WjjZJe1L9ONfkzvr8kiy6XvKftR8rVOU9dJ3kEpcBaP9Y4_DC2hbVO9PpQ5NeCcVfgmxwtWfT/s1600/555_SuomenLeijonat.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTkgP3JIM8nxMl6hHT1yebvuPJvTHcJrNZzIKPwMqrQ2WhcCbIrzLoITz2KEHT8edB5R_WjjZJe1L9ONfkzvr8kiy6XvKftR8rVOU9dJ3kEpcBaP9Y4_DC2hbVO9PpQ5NeCcVfgmxwtWfT/s1600/555_SuomenLeijonat.jpg" /></a></div>

Blogger:in kuva koodi on oman Div taginsa sisällä tagissa määritellään kuvan sijäinti sivulla (vasen keskellä oikea). Se sisältää linkin alkuperäiseen kuvaan(a href=) ja tyyli määrittelyhä kuten margin-left/right jossa määritellään paljonki tyhjää tilaa kuvan vasemmalla / oikealla puolelle jätetään. Sillä suoraan tekstissä kiinni oleva kuva näyttää tökeröltä. img border määrittelee kuvalle kehyksen (0= ei kehystä 1,2,3,jne = leveys).

Nämä määrittelyt voivat olla omassa blogger blogissasi hieman erilaisia ja näköisiä, koska ne riippuvat myös käyttämästäsi teemasta. Eli kuviin voi tehdä muutoksia myös käyttämäsi teema ei pelkästään blogger. Erilaiset teemat saaattavat muuttaa omassa CSS koodissaan kuvien kehystä, sitä miten kuvat sijoittuvat tekstiin nähden jne. Jotta saat kaiken mahdollisen irti joudut tutustumaan myös blogisi lähdekoodiin josko siellä piilee jotain kuviisi liittyvää. 

Xhtml ja CSS koodin lisäksi blogger tarjoaa vielä yhden mahdollisuuden kuvien kanssa toimimiseen, nimittäin kuvien muokkaus ohjelman nimeltä Picnik. Tämä nopea ja helppokäyttöisen ohjelman löydät helposti klikkamalla jotakin lisäämääsi kuvaa ja valitsemalla sen jälkeen  Muokkaa kuvaa.

Picnik palvelu on siis selainpohjainen kuvien muokkaus ohjelma jolla voit tehdä kevyitä muokkauksia ja lisäyksiä kuviisi. Voit käännellä, rajata jne. Voit lisätä erilaisia tehosteita ja tekstiä jne. Kaikki onnistuu helposti ja todella nopeasti etkä siis tarvitse mitään erillistä kuvankäsittelyohjelmaa. 

Loppusanat

Kuvat ovat voimakas keino tehostaa omaa blogiasi vaikket olisikkaan ennen kiinnittänyt kuviisi yhtä suurta huomiota kuin blogisi muuhun sisältöön kannattaa muistaa se että visuaalinen ilme ratkaisee hyvin paljon. Ihminen saa ensivaikutelman blogistasi muutamassa sekunnissa ja erityisesti kuvat ovat silloin ratkaisevassa asemassa. 

Kirjoittaminen on edelleen blogeissa tärkeä seikka mutta kuviin ja niiden asetteluun sekä muokkaamiseen käytetty aika on yhtä tärkeää. Kuvat ovat osa jokaista blogia ja ellei sinulla niitä jo ole kannattaa laittaa harkintaan josko blogiasi piristäisivät asiaankuuluvat kuvat. Kannattaa myös opetella muutamia yksinkertaisia xhtml ja css komentoja joiden avulla saat kuvasi siihen kohtaan kuin haluat sen kokoisina ja näköisinä kuin haluat. Oikein kirjoitettu koodi myös auttaa hakukoneoptimoinnissa joten kaikenlainen opiskelu tässäkin asiassa on pelkästään kotiinpäin.