• Etusivu
  • SEO Työkalut
  • Sivu VS Sivu
  • Blogi
  • Viimeisimmät
  • Ota yhteyttä
  • Kirjaudu sisään
  • Rekisteröidy
Ilmainen hakukoneoptimointi testi
  • Etusivu
  • SEO Työkalut
  • Sivu VS Sivu
  • Blogi
  • Viimeisimmät
  • Ota yhteyttä
  • Kirjaudu sisään
  • Rekisteröidy

Seuraa meitä somessa:

Kannattaa seurata sivustoamme sosiaallisessa mediassa, seuraamalla saat aina tietoosi uusimmat oppaamme ja muuta sisältöä.

Facebook

Twitter

AXNDatan SEO Työkalut: Kuvien optimointi

AXNDatan SEO tykalut - Kuvien optimointi eli pakkaaminen ja lazy load

Kuvien optimointi



Add up to 10 multiple image files
Koko rajoitus 2mb per tiedosto. JPG/PNG tiedostot sallittu.


Syötä toinen kuva tiedosto



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



Meistä

Haluamme auttaa sinua ilmaiseksi kehittämään oman kotisivusi hakukoneoptimointia, tee täysin ilmainen SEO testi joka mittaa sen kuinka hyvin kotisivusi on hakukoneoptimoitu jopa yksi sivu kerrallaan! Voit myös kokeilla meidän hakukoneoptimointi työkaluja ja lukea blogistamme uusimmat vinkit ja oppaat miten sivustot tulisi hakukoneoptimoida ja mitä kannattaa ottaa huomioon kun teet hakukoneoptimointia! Voit myös jakaa testin ystävällesi sosiaallisessa mediassa kätevästi sivustolta löytyvien nappien avulla.

Copyright © 2022 AXNData.fi - Kaikki oikeudet pidetään!

Yhteystiedot

Gzira, Malta

info AXNData.fi

Navigointi

  • Etusivu
  • Ota yhteyttä
  • Käyttöehdot
  • Yksityisyydensuojatiedote
  • Mainostajat

Copyright © 2022 AXNData.fi - Kaikki oikeudet pidetään!

Kirjaudu sisään

Kirjaudu sisään käyttäen käyttäjänimeäsi

Salasana unohtunut
Lähetä uudelleen vahvistussähköposti

Rekisteröidy

Rekisteröidy sähköpostiosoitteellasi

Ota meidän somet haltuun

Seuraamalla meitä sosiaallisessa mediassa saat tietoosi aina uusimmat vinkit, työkalut ja oppaat.

Seuraa meitä Facebookissa:

Seuraa meitä Twitterissä:

Poista 24 tunniksi: