Euromind
  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • 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

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • 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

      C#

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

      11. august, 2019

  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • 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

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • 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

      C#

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

      11. august, 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

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

Barebone AMP i Codepen

9. juli, 2019

Sund javascript

7. juli, 2019

Efterlad en kommentar Afbryd svar

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

Seneste indlæg

  • Dansk evighedskalender

    7. december, 2020
  • Automatisk køreafstand i Excel

    17. august, 2020
  • Headless browser på 10 minutter

    25. juli, 2020

Kategorier

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

Om mig

Om mig

Per Lindsø Larsen

Freelance fullstack developer bo9sat 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

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • 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

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • 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

      C#

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

      11. august, 2019

Populære indlæg

  • 1

    Stylometri i C# – del 2

    7. juni, 2019
  • 2

    Send email fra Javascript med Gmail API

    21. juni, 2019
  • 3

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

    11. august, 2019
  • 4

    Gmail, Yahoo og Outlook som SMTP-server

    18. april, 2019
  • 5

    Registrer Gmail API til brug i javascript

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

Læs ogsåx

Sund javascript

7. juli, 2019

Dansk evighedskalender

7. december, 2020

Console.log() på stereoider

7. april, 2019