/ IT-ohjeet/ Kuvat webp, suositus/

Kuvat webp, suositus

🡐 Google kuvat Bucket CDN | Ohjeet figure 🡒

01.01.0001 ·

imgwebp shortcode on suositus.

tekee kaikista kuvista webp pakatun version
tekee skaalautuvat kuvat eri päätelaitteille
tulee myös CDN kuvaplavelun käyttöä
kuvan ja linkin yhdistäminen helpompaa kuin Markdown oletuksella

imgwebp

1{{< imgwebp src="/img/building.png" alt="building" >}}

imgwebp http

1{{< imgwebp src="http://vanha.kalevanrasti.fi/wp-content/uploads/2023/03/PC040002.jpg" alt="kuva" >}}

imgwebp http Crop

1{{< imgwebp src="http://vanha.kalevanrasti.fi/wp-content/uploads/2023/03/PC040002.jpg" alt="kuva" debug="false" 
2	commands="Crop" options="200x200 smart"
3>}}

Rotation

1{{/*< imgwebp src="/img/building.png" debug="false" commands="Rotation" options="300x r90" >*/}}

Resize

1{{/*< imgwebp src="/img/building.png" debug="false" commands="Resize" options="600x" >*/}}

Fit

1{{/*< imgwebp src="/img/building.png" debug="false" commands="Fit" options="400x400" >*/}}

Crop

1{{/*< imgwebp src="/img/building.png" debug="false" classes="post_box" commands="Crop" options="100x100" >*/}}

imgwebp http width 70%

1{{< imgwebp src="http://vanha.kalevanrasti.fi/wp-content/uploads/2023/03/PC040002.jpg" 
2	cap="capkuva" width="35%" alt="Kuvateksti" debug="false" commands="x,y,z"
3>}}

imgwebp http width 200

1{{< imgwebp src="http://vanha.kalevanrasti.fi/wp-content/uploads/2023/03/PC040002.jpg" 
2	width="200" alt="Kuvateksti" debug="false" 
3>}}

imgwebp http height 200

1{{< imgwebp src="http://vanha.kalevanrasti.fi/wp-content/uploads/2023/03/PC040002.jpg" 
2	height="200" alt="Kuvateksti" debug="false"
3>}}

Kuvien käsittely kuvavarasto ja CDN yhdistelmänä

Alkuperäinen kuva

1![](/img/kr_2022.500_377.png) 425 kt

425 kt

Jaettava kuva kuvapalvelimelta

1![iili.io](https://iili.io/HNIzzUQ.png) 425 kt

- map[alt:iili.io bundle:false cap: classes:image_figure image_external debug:false diskPath:itohjeet/ file:images/HNIzzUQ_10944883337545257530.png image:images/HNIzzUQ_10944883337545257530.png webPath:/itohjeet/kuvat_webp/]

425 kt

CDN - mutta Hugo prosessoi

1![](https://aqajakcwpr.cloudimg.io/_awot/kr_2022.500_377.png) 54.4 kt - lähes 10 osa alkuperäisestä - haettu alkuperäinen kuva
2![](https://aqajakcwpr.cloudimg.io/_img/HNIzzUQ.png) 54.4 kt - lähes 10 osa alkuperäisestä

54.4 kt - lähes 10 osa alkuperäisestä - haettu alkuperäinen kuva -

54.4 kt - lähes 10 osa alkuperäisestä

CDN - mutta Hugo ei prosessoi

kuva 1

1{{< imgwebp src="cdn:https://aqajakcwpr.cloudimg.io/_awot/kr_2022.500_377.png" >}}

kuva 2

1{{< imgwebp src="cdn:https://aqajakcwpr.cloudimg.io/_img/HNIzzUQ.png" >}}

optioita käytettävissä

1{{< imgwebp src="cdn:https://aqajakcwpr.cloudimg.io/_img/HNIzzUQ.png?w=300" >}}

Avif formaatti

1{{< imgwebp src="cdn:https://aqajakcwpr.cloudimg.io/_img/HNIzzUQ.png?force_format=avif" >}}

Ko. esimerkissä webp antoi ihan saman.

Päivitetty ominaisuuksia. mm. linkin lisäys kuvaan

Normaali kuva

1{{< imgwebp src="/img/building.png" alt="building" >}}

Linkin kanssa

1{{< imgwebp src="/img/building.png" alt="building" url="https://awot.fi/" >}}

Linkin kanssa, ilman alt-tekstiä, title teksti käytössä

1{{< imgwebp src="/img/building.png" imgtitle="koe" url="https://awot.fi/" >}}

Ulkoinen kuva

CDN - mutta Hugo ei prosessoi

1{{< imgwebp src="cdn:https://aqajakcwpr.cloudimg.io/_awot/kr_2022.500_377.png" >}}

Linkin kanssa ja kuvan title

1{{< imgwebp src="cdn:https://aqajakcwpr.cloudimg.io/_awot/kr_2022.500_377.png" url="http://awot.fi" imgtitle="Kuvateksti">}}

🡐 Google kuvat Bucket CDN | Ohjeet figure 🡒