Kuvat webp, suositus
🡐 Kumppanit ylläpito | Ohjeet csv/json taulukko ulkoasu 🡒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="https://photos.smugmug.com/photos/i-bsnBQWF/0/X4/i-bsnBQWF-X4.jpg" alt="kuva" >}}
imgwebp http Crop
1{{< imgwebp src="https://photos.smugmug.com/photos/i-bsnBQWF/0/X4/i-bsnBQWF-X4.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="https://photos.smugmug.com/photos/i-bsnBQWF/0/X4/i-bsnBQWF-X4.jpg"
2 cap="capkuva" width="35%" alt="Kuvateksti" debug="false" commands="x,y,z"
3>}}
imgwebp http width 200
1{{< imgwebp src="https://photos.smugmug.com/photos/i-bsnBQWF/0/X4/i-bsnBQWF-X4.jpg"
2 width="200" alt="Kuvateksti" debug="false"
3>}}
imgwebp http height 200
1{{< imgwebp src="https://photos.smugmug.com/photos/i-bsnBQWF/0/X4/i-bsnBQWF-X4.jpg"
2 height="200" alt="Kuvateksti" debug="false"
3>}}
Kuvien käsittely kuvavarasto ja CDN yhdistelmänä
Alkuperäinen kuva
1 425 kt
- 
CDN - mutta Hugo prosessoi
1 54.4 kt - lähes 10 osa alkuperäisestä - haettu alkuperäinen kuva
2 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">}}
~