Kuvien optimointi

Haluatko optimoida valokuvia? Kuvien optimointi työkalumme avulla saat optimoitua kuvasi joko yksitellen tai maksimissaan 10 kuvaa kerralla. Työkalumme tukee vain PNG ja JPG tiedostoja ja kuvan koko saa olla maksimissaan 2mb. 

Miksi optimoida kotisivun kuvat?

Usealla kotisivulla on valokuvia ja muita kuvia jotka saattavat hidastaa sivuston latautumista, tällöin kuvat tulee optimoida eli siis pakata kuvasta ylimääräinen pois ilman että kuvan laatu kärsii. Valokuvaajilla kuvat ovat usein isoja tiedostoja (raaka kuvia) jolloin niiden käyttö suoraan kotisivuilla olisi huono kun ison kuva tiedoston lataaminen kestää melko pitkään. Kuvat voi onneksi optimoida eli pakata helposti jolloin sama kuva voidaan näyttää paljon pienemmällä tiedosto koolla ilman että laatu kärsii. Ylläoleva työkalumme optimoi kuvasi selaimesi kautta, kuvia ei tallenneta meidän palvelimelle joten se on turvallinen käyttää. 

Mikä ihmeen next gen kuva?

NEXTGen image eli siis suomeksi seuraavan sukupolven kuva on kuvasta pakattu versio joka voi olla jopa 80-90% pienempi kuin perinteinen JPG/PNG tiedosto. Kotisivuille on mahdollista ottaa käyttöön googlen 2010 luoma webP kuva muoto joka pakkaa kuvasi pienemmäksi jolloin kuva latautuu nopeammin. Apple tunnetusti hidastelee kehitystä ja odottaa yleensä vuosia ennenkuin ottaa jonkun asian käyttöönsä, näin kävi myös webP kanssa apple otti webP tuen käyttöönsä vasta safari 14 versiossa eli vasta 09/2020 kun taas esimerkiksi muissa selaimissa on ollut webP tuki alusta lähtien katso yhteensopivuus tästä. webP kuvia voit luoda joko tietokoneellasi esimerkiksi paint.net sovelluksella tai sitten käyttää netistä löytyviä generaattoreita kuten webP-converter.com. Kun lataat webP kuvia palvelimellesi muista myös määrittää webP kuva näkymään png tai jpg muodossa jos selain ei tue webP:tä se tapahtuu näin:

<picture>
 <source srcset="webp-kuvan-osoite.webp" type="image/webp">
 <img src="sama-kuva-jpg/png-muodossa.png" alt="KUVAUS TÄHÄN">
</picture>

Tämän lisäksi meidän tulee määrittää .htaccess tiedostossa toiminto joka ensin tarkistaa tukeeko selain webP:tä ja jos selain ei tue se vaihtaa PNG/JPG kuvan webP kuvan tilalle:

<IfModule mod_setenvif.c>
  SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

Mitä tarkoittaa lazy load ja miten teen lazy loadin kuvilleni?

Lazy Load on kuville tarkoitettu lataustyyppi jolloin kuva ladataan vasta kun käyttäjän selaimen alaosa osuu kuvan kohdalle, tämä auttaa sivustoa latautumaan nopeammin. Ylläolevia webP kuvia ei tarvitse ladata lazy load komennon kautta vaan tämä ominaisuus on tarkoitettu nopeuttamaan PNG/JPG kuvien latautumista. 

<img class="lazy" data-src="KUVANOSOITE.jpg" alt="kuvaus" />

Kun luodaan lazy load efekti kuville käytämme src sijaan data-src komentoa jonka avulla me voidaan taas määrittää lazy load kuville. Lazy load luodaan javascriptillä:

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;
  
  function lazyload () {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }    
    
    lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
    }, 20);
  }
  
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

CSS osioon määritetään kuvan tyyli, mutta meidän pitää lisätä kuvaan tausta väri jotta käyttäjä ymmärtää että kuva tulee hieman jäljessä (nopeat selaajat näkevät "tyhjän" kohdan kuvan tilalla ennenkuin kuva ladataan) tässä CSS koodi kuville:

img {
  background: #F1F1FA;
  display: block;
  border: 0;
}

Haluatko pyöreät kuvat? Tällöin CSS:ään lisätään border-radius: ARVOpx; näin saamme kuvan reunat pyöristettyä, kokeile 10, 25, 50px arvoja niin näet miten ne vaikuttavat kuvan kehykseen, muista myös määrittää borderin raja 1px levyiseksi. 

Lue myös artikkeli: Kotisivun latausnopeuden parantaminen
Lue myös artikkeli: WordPress sivuston latausnopeuden parantaminen