Kuvien optimointi

Silktide lataa sivujesi kuvat ja testaa, voitaisiinko niiden kokoa pienentää merkittävästi ilman näkyviä muutoksia. Pienennettävissä olevat kuvat raportoidaan yhdessä mahdollisen säästön kanssa, jotta voit priorisoida suurimmat hyödyt.

Miksi tämä on tärkeää

Kuvat muodostavat yleensä suurimman osan verkkosivun koosta, joten ne ovat tavallisesti suurin yksittäinen mahdollisuus parantaa suorituskykyä. Liian suuret kuvat hidastavat sivujen avautumista, mikä lisää mitattavasti keskeyttämisiä – erityisesti mobiiliyhteyksillä – ja kuluttaa kävijöidesi kaistanleveyttä ja akkua. Sivunopeus vaikuttaa myös hakusijoituksiin -mittareiden kautta.

Toisin kuin useimpiin suorituskyvyn parannuksiin, kuvien optimointiin liittyy harvoin kompromisseja: oikein pakattu kuva näyttää samalta ja toimii samalla tavalla. Se on lähes ilmaista suorituskykyä.

Korjaaminen

Pakkaa raportoidut kuvat. Lähes kaikilla kuvankäsittelytyökaluilla tämä onnistuu viennin yhteydessä; valokuvien tulisi yleensä olla JPEG-muodossa noin 85 %:n laadulla, mikä säästää paljon tiedostokokoa näkyvän laadun heikentyessä vain vähän.
Käytä oikeaa muotoa: JPEG (tai WebP/AVIF) valokuville; PNG tai SVG logoille, kuvakkeille ja muille tasavärisille kuville. Nykyaikaiset muodot, kuten WebP ja AVIF, ovat molempia parempia, jos alustasi tukee niitä.
Automatisoi se. Useimmat , koontiputket ja voivat pakata ja muuntaa kuvia latauksen tai toimituksen yhteydessä – putken korjaaminen estää ongelman toistumisen.
Toimita kuvat siinä koossa, jossa ne näytetään, käyttämällä responsiivisia kuvia (srcset) sen sijaan, että lähetät yhden valtavan kuvan jokaiselle laitteelle:

<img src="hero-800.jpg"
     srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     alt="Viinitarha auringonlaskussa">

Miten Silktide testaa tämän

Kerää kuvat, jotka kukin sivu todella lataa.
Pakkaa jokainen kuva uudelleen sen muodolle sopivilla tekniikoilla: progressiivinen JPEG 85 %:n laadulla, häviöllinen ja häviötön PNG-uudelleenpakkaus, SVG:n sekä GIF-kuvien uudelleenoptimointi.
Vertaa parasta tulosta alkuperäiseen. Kuva raportoidaan vain, kun säästö on merkittävä: koko on yli 20 % pienempi ja säästöä kertyy yli 40 kt.
Raportoi kunkin kuvan mahdollinen pienennys, jotta suurimmat säästöt erottuvat.

Vianmääritys

Kuva näyttää jo pakatulta

Raportoitu säästö on mitattu, ei arvioitu – Silktide tuotti todella pienemmän tiedoston. Yleisiä syitä sille, että näennäisesti optimoitu kuva on silti 20 % suurempi, ovat upotetut metatiedot, ei-progressiivinen JPEG-koodaus ja valokuvissa käytetyt PNG-tiedostot.

Käytämme kuvia optimoivaa CDN:ää

Silktide testaa sen, mitä sivu todella toimitti, joten jos raportoitu kuva kulki CDN:si kautta, optimointia ei joko käytetty tai se ei ollut riittävä. Tarkista CDN:n asetukset kyseisten polkujen tai muotojen osalta.

Säästö vaikuttaa pieneltä

Kuvia, jotka ovat 20 %:n tai 40 kt:n sisällä optimaalisesta, ei raportoida. Jos raportoitu säästö vaikuttaa vähäiseltä, muista, että se koskee jokaista jokaisen kävijän sivulatausta.