keskiviikko 2. toukokuuta 2018

Netin kuvatiedostot ja optimointi

Kuvittelin, että nykyään kuvien pakkaus ei olisi verkossa erityinen ongelma verkkonopeuksien kasvaessa, mutta toisin näyttää olevan, paikoitellen. Tosin samaa tahmausta saadaan aikaan myös ja edelleen videoilla ja Flash-introilla, jotka rajoittavat sivujen käyttötehokkuutta. Asiakas haluaa mahdollismman nopeasti päästä kiinni haluamaansa tietoon, hän ei suinkaan tule katselemaan upeita introja (normaalisti).

Useat ohjelmistot osaavat pakata lennossa verkkokelpoisia kuvia MUTTA näin ei ole asianlaita aina.
Varsinkin suuria kuvamääriä sisältäville sivuille on syytä tehdä hallitua kuvaoptimointia. Tämä oli verkon alkuaikoina ihan MUST.

Verkossa kulkevat kuvastandardit ovat GIF, JPG ja PNG. Muitakin kuvamuotoja saattavat selaimet osata esittää mutta näitä suosittelen ehdottomasti.

GIF oli ensimmäinen vakiintunut verkkokuvien standardi ja se on edelleen voimissaan varsinkin pakka-animaatioissa (animaatio joka koostuu kuvasarjasta). GIF hävittää kuvadataa ja se myös rasteroi kuvat, eli kaikkein kauneinta kuvalaatua sillä ei saa aikaiseksi, kaikkein keventä, kenties.

JPG tai JPEG kuvat voidaan pakata hyvin täyssävyisen kaltaisiksi, koska sen pakkaumenetelmä perustuu vähiten merkittävän kuvainformaation "hukkaamiseen". Pakkaustehokkuustasoja löytyy useita. PhotoShop tarjoaa 12 eri pakkaustehokkuusvaihtoehtoa. Verkkosivuille seiskalla saa jo upeaa jälkeä ja jos intoa riittää, tehokkuutta voi edelleen lisätä, tarkastelemalla pakkaustehonlisäyksen vaikutusta kuvalaatuun. GIF kuvassa taustan voi poistaa, valitsemalla taustaväri transparentiksi.

PNG tekee pakkauksen omavaltaisesti, eli sen pakkaustehokkuuteen ei ainakaan PhotoShopissa pysty vaikuttamaan. Pakkaus teho on heikompi kuin JPG:n. 2,7 Mt:n JPG kuvasta saattaa tulla 9,7 Mt:n kuva PNG:nä. PNG-muotoa kannattaa käyttää vain pienissä kuvissa, grafiikassa ja logoissa ym. tästä syystä.

Tärkeää on myös (vastoin tapoja), että verkossa esitettävä kuva pienennetään asiallisen kokoiseksi, eli suoraan digikamerasta tuotu kuva on ehdottomasti liian suuri. Nykyaikana kamerakuva voi olla kooltaan esim. 3264 x 2448 pixeliä, kun verkkosivun leveyteen mahtuu 1:1 koossa ainoastaan n. 1200 x 900 pixelin kokoinen kuva, joka siis peittäisi jo koko sivun pienemmissä näytöissä. Lue aikaisempi artikkelini standardiverkkosivun kokovaatimuksista. http://hannukuukkanen.blogspot.fi/2015/
Kuvan latausaika putoaa huomattavsti pienempikokoisena. Kuva koolla alkaa olla suurempaakin merkitystä, jos samalla sivulla on useita kuvia.

JA muistakaa kuvien oikea nimeämistapa verkkosivuille. Lue edellinen artikkeli.
http://hannukuukkanen.blogspot.fi/2018/05/kansioiden-ja-linkkien-nimista-varoitus.html

Kansioiden ja linkkien nimistä varoitus

Olen havainnut, että edelleen löytyy verkosta sellaisia linkkejä, joiden tiedostonimissä  tai poluissa (kansiot) esiintyy ääkkösiä tai välilyöntejä (sanaväli). Näitä eivät kaikki palvelimet ymmärrä ja kaikki selaimet tai verkkosivueditorit, eivät osaa niitä palvelimelle koodata. Linkki ei löydä koskaan perille.

Esimerkiksi: https://www.facebook.com/notes/verkonvaarat-sivuston-tukiryhmä/prismaviestien-poisto-ohje/prismat ja muut.html
(Esimerkkiin olen tarkoituksella lisännyt myös virheellisen tiedostonimen).

Linkin tulisi olla muodossa:
https://www.facebook.com/notes/verkonvaarat-sivuston-tukiryhma/prismaviestien-poisto-ohje/prismat_ja_muut.html
ELI ääkköset korvataan a:lla ja o:lla ta myös ruotsalainen å korvataan a:lla, tavuviivat sanajakoina ovat OK tai alaviivat, kuten lisätyssä tiedostonimessä malliksi on laitettu.

Tiedostonimissä ei tule käyttää kansallisia merkkejä å, ä ja ö (eikä saksalaisten ü-merkkiä), koska näitä merkkejä ei käytetä englannin kielessä ja käyttöjärjestelmät on kehitelty englanninkielisissä maissa. Kansallisista merkeistä tulee yleensä aina ongelmia.

Pisteitä ei tule käyttää erottimena myöskään, koska ne ovat pelvelimien järjestelmien omia standardi erottimia (mm. tiedoston tunnuksen erottimena). Myös kaksoispiste on varattu vain tiettyihin tarkoituksiin. Tiedoston nimi koostuu yleensä varsinaisesta nimestä sekä pisteen jälkeisestä tarkentimesta. Kaksoispistettä käytetään mm. verkko-osoitteissa.

Sallittuja merkkejä nimiosassa ovat englanninkielisen merkistön mukaan kirjaimet A-Z (tai a-z), numerot 0-9 ja erikoismerkit $ (dollari), %, ,-,_ (alleviivaus), ^ (hattu), @ (kissanhäntä tai miumau), {, }, ~ (mato), `, !, # (risuaita), (, ) ja &-merkki. Erikoismerkkien käyttö ei ole, alleviivausmerkkiä lukuunottamatta, suositeltavaa.

Verkon alkuaikoina oli syytä käyttää tiedostonimissä ainoastaan pieniä kirjaimia. Nykyään sekatekstit menevät ja tulevat läpi verkon MUTTA kansioiden ja tiedostojen kirjoitusasun tulee olla HTML-koodissa aina sama kuin itse tiedostonimessä. Tämä virhe syntyy vain jos koodaa käsin linkkejä.
Nykyään, kun verkkosivujen koodaus tehdään ohjelmistoilla, näitä lapsuksia pääsee verkkoon harvemmin enää MUTTA jos noudattaa aina palvelin standardin mukaista kirjoitusasua tiedostoissa, koskaan ei tule ongelmia myöskään palvelin puolella. Varsinkin Mac tietokoneiden käyttäjille tämä vaikuttaa olevan ylipääsemätön ongelma.

Windows 95 oli ensimmäinen Windows-versio, jossa voitiin käyttää ns. pitkiä 255:n merkin pituisia tiedostonimiä. Pitkät tiedostonimet eivät ole edelleenkään suositeltavia verkkokäytössä.