Euromind
  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

Euromind
CSS/SCSSHTMLWebdesign

WEBP billedformatet

af Per Lindsø Larsen 19. juni, 2019
skrevet af Per Lindsø Larsen 19. juni, 2019
WEBP billedformatet

Oktober 2018 blev en god måned for .webp billedformatet, idet både Firefox og Edge melder at formatet vil blive understøttet. Det efterlader Safari-browserne tilbage som den eneste af de betydelige, der ikke vil vedkende sig formatet, skønt det i en kort periode var understøttet i IOS 10. Apple har som bekendt en betydelig skepsis over for skibe, som de ikke selv har sat i søen.

Siden 2012 har formatet været understøttet i Opera og Chrome og Google Android-browsere. Det betyder, at ca, 80% af markedet tilgår nettet via browsere, der understøttet WebP.

WebP blev lanceret af Google tilbage i 2010 og yder en  bedre kompression end png og jpeg. Angiveligt er en webP-fil 26% mindre end png og 25-34% mindre end jpg. Det gør formatet interessant i en tid, hvor verden skriger på Accelerated Mobile Pages, Progressive Web App og krav om “instant loading”.

Du kan konvertere dine eksisterende billeder (jpg og PNG) til webP med Googles kommandolinje konverter:

Med  Chocolatey

choco install webp

Har du ikke Chocolatey installeret, så overvej at gøre det:

PS>Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Alternativt kan du også hente den seneste version af WebP-konverteren frisk fra fad:

I al sin enkelthed konverterer du billede ud fra formen:

cwebp -q 80 image.png -o image.webp

-q indikerer den valgte billedkvalitet (1-100 hvor 75)  er default.
-o output filnavn.

En lang række andre parametre kan sættes. se dokumentation for en nærmere udredning.

Der er også flere online konvertere, f.eks Convert Image to WebP eller WebP Converter.

Adobe Photoshop understøtter ikke WebP out-of-the-box, men der er lavet et velfungerende plugin til at løse opgaven: WebP Plugin for Photoshop. Kopier .8bi filen til Photoshops plugin-bibliotek (f.eks. C:\Program Files\Adobe\Adobe Photoshop CC 2019\Plug-ins) og du kan nu åbne og gemme dine billeder i WebP-format.

Endelig kan du bruge node.js – hvilket er et førstevalg til batch-konvertering. 

npm install imagemin imagemin-webp

opret en konfigureringsfil, feks. webp.json (parametre se: imagemin-webp):

var imagemin = require("imagemin"),  
webp = require("imagemin-webp"),   
outputFolder = "./img",
PNGImages = "./img/*.png",    
JPEGImages = "./img/*.jpg";     
imagemin([PNGImages], outputFolder, {plugins: [webp({lossless: true })]}); imagemin([JPEGImages], outputFolder, {plugins: [webp({quality: 65 })]});

Herefter  kan du konvertere billedfilerne med:

PS>Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Til brug i C# er en wrapper (Imazen.WebP tilgængelig for libwebp.dll:

PM> Install-Package Imazen.WebP -Version 10.0.1

Herefter kan billedfiler konverteres til WEBP-format med f.eks.:

       public static void ConvertToWebP(string jpgFileName, string webpFileName, int quality)
        {
            using (var bitmap = new Bitmap(jpgFileName,true))
            {
                using (var saveImageStream = System.IO.File.Open(webpFileName, FileMode.Create))
                {
                    var encoder = new SimpleEncoder();
                    encoder.Encode(bitmap, saveImageStream, quality);
                }
            }
        }
BilledformaterBilledoptimering
0 Kommentarer
1
FacebookTwitterPinterestEmail
forrige post
GULP møder AMP – del 2
næste post
Send email fra Javascript med Gmail API

Relaterede indlæg

Historiske administrative geografier i Google Maps

20. april, 2022

Kierkegaard injiceret med Javascript

15. april, 2022

Dansk evighedskalender

7. december, 2020

Headless browser på 10 minutter

25. juli, 2020

API til Statistikbanken

21. september, 2019

Variable fonte med dansk tegnsæt i open source

11. august, 2019

Progressbar for dokumentposition

31. juli, 2019

Navngivne RegEx-grupper i ECMAScript 2018

29. juli, 2019

Media Query i 2019

18. juli, 2019

Danske Adressers Web API

17. juli, 2019

Efterlad en kommentar Afbryd svar

Gem mit navn, email, og website i denne browser til senere kommentarer.

Seneste indlæg

  • Historiske administrative geografier i Google Maps

    20. april, 2022
  • Kierkegaard injiceret med Javascript

    15. april, 2022
  • Dansk evighedskalender

    7. december, 2020

Kategorier

  • C#
  • CSS/SCSS
  • Excel
  • HTML
  • Javascript
  • Mobile
  • Webdesign
  • Xamarin

Om mig

Om mig

Per Lindsø Larsen

Freelance fullstack developer bosat i Aarhus.

Du kan hyre mig til korterevarende projekter eller konkrete opgaveløsninger.

Pæn rabat til non-profit organisationer og foreninger.

Når jeg ikke koder, deltager jeg løbende i diverse spændende forskningsprojekter om alt andet end kodning.

Keep in touch

Facebook Twitter Email Github

Tags

Adresser AMP AMP Story Android API Billedformater Billedoptimering Brand C# Codepen Cordova CPR Crome DevTools CSS Debug Ecmascript Excel Fonte Gmail Gulp HTML Ikoner IOS Javascript JsFiddle Machine Learning Mail Mediaquery ML.NET Mobile RegEx SCSS SMTP Stylometri Visual Studio Webdesign Xamarin

Nyhedsbrev

Timeld nyhedsbrev for info om nye blog-indlæg, tips m.v.

  • Facebook
  • Twitter
  • Email
  • Github

@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273


Tilbage til top
Euromind
  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

Populære indlæg

  • 1

    Stylometri i C# – del 2

    7. juni, 2019
  • 2

    Andersen, Grundvig, Kierkegaard og ML.NET – del 1

    11. august, 2019
  • 3

    Send email fra Javascript med Gmail API

    21. juni, 2019
  • 4

    Gmail, Yahoo og Outlook som SMTP-server

    18. april, 2019
  • 5

    API til Statistikbanken

    21. september, 2019
@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273

Læs ogsåx

Progressbar for dokumentposition

31. juli, 2019

Barebone AMP i Codepen

9. juli, 2019

Historiske administrative geografier i Google Maps

20. april, 2022