Nedan följer ett litet tekniktest med animerade WEBP istället för GIF, vilket gör att man kan få lite bättre kvalitet på de animerade vyer jag ibland publicerar för olika artiklar. Synpunkter mottages.
GIF är som bekant bara åttabitars och stöder bara bilder upp till 640x480p, vilket på moderna klienter kanske är lite i underkant. Jag använder än så länge GIF-bilder för att ha lite diskreta animerade foton till en del artiklar där jag har sådana, men skulle gärna vilja ha högre kvalitet.
Ovanstående bild finns även med mediumkvalitet och 24 FPS nedan.
Slutligen har vi denna bild som GIF också.
Ett annat motiv.
Ytterligare ett exempel.
Man kan förstås köra ännu högre kvalitet, men det blir kanske onödigt stora filer. Några exempel nedan.
Tar gärna era synpunkter på hur detta fungerar på såväl mobil som desktop. Fungerar exempelvis bra på min desktopdator, men går trögt på mobil annat än för 720p med lägsta kvalitet. Kan iofs också bero på att sidan är fullastad med dessa, i verkligheten skulle jag bara använda en enda.
Lutar mot att om det ska göras blir det WEBP lägsta kvalitet 24 fps 960x720p. Bilden på förstasidan får bli GIF, verkade inte ta som WEBP då något lade sig emellan och gjorde den till en stillbild.
Tillägg. Det finns också nyare formatet AVIF, som ska stödjas av nyare webläsare. De är mycket hårdare komprimerade än WEBP och fick sidan att gå på knäna. Raderade.
Tillägg 2: Autospelande MOV-fil i 1080p. Fungerar eventuellt bara på Appleplattformar.
Tillägg 3: Autospelande MP4. Ska stödjas av alla. Förmodligen bästa lösningen och så kör man GIF på framsidan. Nackdelen är ett litet hack när den startar om medan bildfilerna ser ut att hålla på för evigt.
43 kommentarer
På mobil (iPhone 15 PRO Max) ser alla väldigt bra ut. Små nyansskillnader som förmodligen inte motiverar de tyngre filstorlekarna.
Bilderna kommer se oroliga ut så länge du inte matchar fps med hertz.
Eftersom du inte vet vad mottagaren kör för hertz så är sannolikt 20 fps bättre än 24 fps då 20 är delbart med tre för de som kör 60 hertz.
Man måste upp i 120 hertz på skärmen för att 24 fps ska se bra ut (delbart med 5).
Håller med, de blir nästan lite störande, speciellt Omberg bilderna. Sjö glittrandet.
Glad påsk alla!
Iphone 13
Alla funkar fint på min Galaxy S24, men ser ingen skillnad om jag inte zoomar in. På datorn med 28″ 4K börjar det bli små skillnader även när man läser sidan normalt men jag tar hellre de mindre filerna och får en sida som laddar snabbare.
Sorry. Skrivet från mobil och skulle varit en egen post.
För mig som bara läser på mobil är WEBP i lägsta kvalitet mer än nog, nyansskillnaderna ger inte mervärde för mig – uppskattar mer att sidan drar mindre data då jag ibland läser från länder med dataanvändning och uppkopplingen ibland är skakig.
Alla funkar på min padda, en Samsung Galaxy Tab A8, som i sig är en förhållandevis billig “budgetvariant” (men den är ändå ok, paddan funkar bra för mig).
Animationerna i högre kvalitet är naturligtvis bäst, de ser mycket bra ut.
De i lägst kvalitet är lite “pixliga” (hög videokompression ju, för att få ner filstorleken), men de ser väl ändå ok ut.
(Förresten, brinnande ryska raffinaderier ser bra ut i alla videoformat och kompressioner 😁).
F.ö. gillade jag verkligen animationen med Skeppet Göteborg i Göteborg, mycket vackert fartyg, jag älskar sådana gamla fartyg. 🙂
Ser jag själv ett gammalt fartyg och har kameran med mig, så plåtar jag det direkt. 🙂
Alla funkar bra på min laptop (MacBook Pro M1 med Chrome) men de lägre kvaliteterna får en lite obehaglig suddighet som om de körts genom ett gauss-filter eller skalats upp en aning.
På min mobil (iPhone 14 Pro) flyter giffarna på bäst, därefter webp med lägst kvalitet medan medium och hög kvalitet är som sirap och hackar sig fram.
Inga problem här med Windows/Edge eller Android/Firefox (Samsung s22 ultra) .
Högre upplösning uppskattas alltid.
Laptop 17″ W11/Firefox.
gif blir alltid lite suddigt, alla WEBP ser ok ut.
Sitter på mobilen men märker ingen skillnad alls faktiskt
Macbook Pro 13″ Chrome & Safari:
• WEBP definitivt bättre än GIF.
• WEBP medium mer än dugligt, men onekligen gör högsta kvaliteten skillnad. Från bra till perfekt.
Gif ser bättre ut på min MBP M1 när det gäller glittret på vattnet i första bilden än WEBP lägsta, kanske bättre även än medium WEBP men inte märkbart som det används.
Samma här, gissar på att gif’ens sämre kvalitet jämnar ut detaljerna så det inte blir lika tydligt med glittret på vattnet.
Medium funkade bäst för mig med kvalitet/storlek som utgångspunkt.
Om det är lätt ordnat så finns alltid möjligheten att köra -elementet och erbjuda medium/hög på mycket större upplösningar (större sannolikhet för bättre uppkoppling då också).
picture-elementet*
den snodde mina större än/mindre än- tecken
Orkar inte smådutta. Jag laddar upp bilderna och publicerar dem. Inget CSS-hackande här.
Det viktigaste först: det är alltid trevligt med bilder från Göteborg!
Med det avklarat kan jag konstatera att alla bilder med upplösning under 1000 på bredden ser bra ut och animerar fint medan de två bilderna med upplösning på över 1000 på bredden båda ser ut som stillbilder (snygga sådana men ändå ingen animering).
Detta med webbläsaren Chrome på en Samsung Galaxy 22+.
Samma här (chrome på Samsung Note20 Ultra).
På mobil: 1080p blir stillbilder för mig. Anser att 720p medium ger bäst effekt över GIF. WEBP på lägsta nivå gav mest bättre färger jämfört med GIF, men tydliga komprimeringsartefakter vid lite zoom.
På min lilla äppelskrutts padda ser det lite bättre ut.
Men jag vill påstå att bildkvalitén i det här fallet inte har någon som helst betydelse. Ser man bara det bilden ska illustrera så duger det.
Det är kombination av bild och text som är viktigt.
Min padda, som ändå är en M2 iPad Air vill inte animera WEBP alls.
Testade på min gamla reserv, en iPad 4(?) från 2013 och den kan inte heller animera WEBP-bilderna medan GIF funkar.
På min stationära dator är WEBP definitivt bättre, testat i olika webb-läsare. På min mobiltelefon, Android 14 så är gif-bilderna bättre, i det att animationen inte går fram särdeles bra ( om än alls!) i WEBP-bilderna. Testat med Chrome och Firefox på mobilen. Samma resultat.
Min slutsats blir dock att bloggaren kör det som han finner lämpligt. Skulle jag tvingas göra justeringar på mina tekniska plattformar, för att kunna följa bloggen, så gör jag det.
Det var länge sedan jag poängterade detta, vilket är litet off-topic i denna tråd, men ändå:
Detta är en VIKTIG blogg på en strategisk nivå. Bloggarens, och K hustrus, arbete är extremt värdefullt för vår framtid!
Tack för era insatser!
Detta tack riktar sig ävensom till ALLA er andra som bidrar i stort som smått och efter förmåga!!
För övrigt anser jag att Kreml skall besegras.
“Det spelar ingen roll hur viktig man är, om man inte ser bra ut när man gör det!” – Lars Wilderäng felciterar Andy Warhol
WEBP medium fungerar på min gamla mobil medan högsta upplösningen är statisk.
iPhone SE 2020
GIF funkar
WEBP statisk/stillbild
Tydligen har iPadOS och iOS dåligt stöd för animerad WEBP och det fungerar inte under alla omständigheter.
Mobil Samsung S22. Ingen märkbar skillnad på gif webp.
Även med läsglasögonen på.
På min mobil, Sony Xperia 10 V, och min gamla Windows PC, så fungerar alla bilder utom de två WEBP med högsta upplösning. De blir statiska bilder.
På min Galaxy Tab A9 går det vid noggrann granskning se en viss tydligare skärpa vid inzoomning jämfört med GIF. Hade aldrig noterat skillnad om jag inte blev anmodad att leta. Kanske går att ana en annan färgskiftning, men det innebär inte nödvändigtvis att det är liktydigt med bättre. Så för min del tycker jag att du ska fortsätta använda det format som passar dig bäst.
Ingen eller väldigt liten skillnad på en åtta år gammal Samsung Galaxy tab någonting.
De medt högupplösta animeringarna blev ingen animering.
960 är nog högsta meningsfulla bredden. Medium komprimering ser ut att räcka. Lägsta kvalitet såg irriterande ut.
@LW, nya tillägg av LW:
“Tillägg 2: Autospelande MOV-fil i 1080p. Fungerar eventuellt bara på Appleplattformar.”
Funkar på min gamla Samsung Galaxy Tab A8 (Android).
“Tillägg 3: Autospelande MP4. Ska stödjas av alla. Förmodligen bästa lösningen och så kör man GIF på framsidan. Nackdelen är ett litet hack när den startar om medan bildfilerna ser ut att hålla på för evigt.”
Funkar också på min gamla Samsung Galaxy Tab A8 (Android).
iPhone15 utan läsglasögon. Ser ingen skillnad på bilderna. Tveksamt om jag änns kan se att de är animerade….
De har fin färg tycker jag. Men med defekt färgseende så kan man kanske inte gå på för mycket jag säger.
Kör på minsta storleken tycker jag. Jag är här för din text 😉
Tyvärr rör sig inte WebP på iPhone 8 / iOS 17.7.2.
Jag är inte så intresserad av rörliga bilder på webbsidor för rörighetens egen skull. Snarare tvärtom. Jag tycker att det är störande med en animerad GIF (eller motsvarande modernitet) på en webbsida som ska förmedla en berättelse. Det är något som verkar ha blivit mer frekvent.
Video är något helt annat. En video avnjutes bäst i så hög kvalitet som server, bandbredd och webbklient mäktar med.
Dina exempel så alla helt OK ut på min datorskärm. En 27-tums Dell (2560 × 1440), driven av en MacBook 14″ 2024, men även om det inte hade sett så bra ut hade jag bara blivit störd om det hade handlat om en intressant video.
WEBP är för mättade och vibrerande i färgerna.
Alla bilder rör på sig utom de två på huset juvelen.
Men de på skeppet rör sig vattnet betydligt långsammare på WEBP.
iPhone senaste iOS versionen.
Firefox Dev. Version 138.0b9 på Linux.
Allt funkar bra, även MOV. MP4 får inget hack för mig vid restart.
Win11, Chrome. Upplever att bilderna “flimrar”, särskilt blå himmel, när webp försöker “animera” de minimala rörelserna i videon. Känns som att få en lätt stöt genom tänderna… dvs ok eftersom att det finns värre saker i livet.
Något slags Google-telefon med norsk/kinesisk webbläsare:
Gif/webp anumerar bara för bilder under 1000 i bredd. Mov/mp4 spelar inte konsekvent (verkar bero på vilken reklam som visas) . På telefon ser man knappt skillnad mellan olika upplösningar men de sista “filmformaten” glittrar snyggare när de funkar.