惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

S
Secure Thoughts
P
Proofpoint News Feed
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Project Zero
Project Zero
Cyberwarzone
Cyberwarzone
K
Kaspersky official blog
AWS News Blog
AWS News Blog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
News | PayPal Newsroom
S
Schneier on Security
O
OpenAI News
S
Security @ Cisco Blogs
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
月光博客
月光博客
GbyAI
GbyAI
T
Tenable Blog
B
Blog
人人都是产品经理
人人都是产品经理
Engineering at Meta
Engineering at Meta
T
Troy Hunt's Blog
量子位
S
Security Affairs
Security Archives - TechRepublic
Security Archives - TechRepublic
The Cloudflare Blog
W
WeLiveSecurity
U
Unit 42
Application and Cybersecurity Blog
Application and Cybersecurity Blog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
The GitHub Blog
The GitHub Blog
Cloudbric
Cloudbric
A
About on SuperTechFans
Hacker News - Newest:
Hacker News - Newest: "LLM"
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Google DeepMind News
Google DeepMind News
博客园_首页
I
Intezer
P
Proofpoint News Feed
N
News and Events Feed by Topic
SecWiki News
SecWiki News
Microsoft Security Blog
Microsoft Security Blog
TaoSecurity Blog
TaoSecurity Blog
博客园 - 三生石上(FineUI控件)
NISL@THU
NISL@THU
Latest news
Latest news
H
Help Net Security
G
Google Developers Blog
博客园 - Franky
T
The Exploit Database - CXSecurity.com
Cisco Talos Blog
Cisco Talos Blog
Know Your Adversary
Know Your Adversary

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant Common SOC 2 Failures (Real World) Stop Vibe-Checking Your AI App: A Practical Guide to Evals How to Use SonarQube and SonarScanner Locally to Level Up Your Code Quality Your Next To-Do App Is Dead — I Replaced Mine with an OpenClaw AI Sign a Nostr event in 60 lines of Python using coincurve — no nostr-sdk, no nbxplorer, no rust toolchain ITGC Audit Explained Like You’re in Big 4 Patch Tuesday abril 2026: Microsoft parcha 163 vulnerabilidades y un zero-day en SharePoint Stop scraping everything: a better way to track competitor price changes Listing on MCPize + the Official MCP Registry while routing payments OUTSIDE the marketplace — how I kept 100% of my x402 revenue Building an AI-Powered Risk Intelligence System Using Serverless Architecture Why We Ripped Function Overloading Out of Our AI Toolchain Testing AI-Generated Code: How to Actually Know If It Works SaaS Churn Is Killing Your Business. Here Is What to Do About It (Without a Support Team) The Speed of AI Is No Longer Linear - And Self-Improving Models Are Why How to Implement RBAC for MCP Tools: A Practical Guide for Engineering Teams From Standard Quote to Persuasive Proposal: AI Automation for Arborists I built a CLI that scaffolds complete multi-tenant SaaS apps Axios CVE-2025–62718: The Silent SSRF Bug That Could Be Hiding in Your Node.js App Right Now The dashboard that ended our friendship Data Pipelines Explained Simply (and How to Build Them with Python) The Hidden Cost of AI Systems Nobody Talks About. undefined vs undeclared, and how typeof behaves Switching from file-based jobs to NATS/Kafka in Rust without changing code io_uring Adventures: Rust Servers That Love Syscalls Why Agentic AI is Killing the Traditional Database The POUR principles of web accessibility for developers and designers Quantum Neural Network 3D — A Deep Dive into Interactive WebGL Visualization How To Install Caveman In Codex On macOS And Windows Automation Pipeline Reliability: Why Your Workflow Breaks When Nobody Is Watching I Built an 'Open World' AI Coding Agent — It Works From ANY Folder From Freelancing to Product: A Tech Service Company's SaaS Transformation China's AI Giants: Adding Tencent Hunyuan & ByteDance Doubao to AI University (74 Providers) On the Vibe Coders and Their Lies clerk: Auto-Summarize Your Claude Code Sessions AI Weekly — 2026/04/10–04/17 | The Model Lockdown Is Here, but the Toolchain Is the Real Battleground AI 週報 — 2026/04/10–2026/04/17 模型封鎖潮來了,但工具鏈才是真戰場 Maybe this is how Open-Source apps are born... 🚀 Fine-Tune LLMs with LoRA and QLoRA: 2026 Guide tRPC v11 + Next.js App Router: End-to-End Type Safety Without the Boilerplate ShadCN UI in 2026: Why I Stopped Installing Component Libraries and Started Owning My Components SaaS Billing in React Server Components: Stripe + Supabase Without a Single `useEffect` Join our DEV Weekend Challenge — $1,000 in Prizes Across TEN winners! Submissions Due April 20 at 6:59 AM UTC. Implementing FSRS Spaced Repetition in Flutter + Supabase — Adding Memory Science to an AI Learning App "I Texted My Localhost From the Train — Claude Code Fixed the Bug Before I Got Home" I Built a Sales Prep AI and It Went Deeper Than Expected Design to Code #2: One JSON, Eleven Outputs Solving the 100M-Row Problem: A Summary Table Pattern for High-Volume Push Notification Logs Flutter Web With Wasm: What Actually Changes For Developers I Built 50 Royalty-Free Soundtracks for My Side Project in a Weekend Using AI Music Generation The Vibe Coding Security Checklist: 7 Things to Check Before You Ship Stop Letting Googlebot Guess Fix Your React App's SEO Right Desconstruindo o Streaming do LinkedIn: Como Criar um Engine de Extração de Vídeo de Alta Performance com HLS e FFmpeg (EDA Part-1) EDA (Exploratory Data Analysis) Explained With Real Life — Why Looking at Your Data Is the Most Important Step in Machine Learning Brand Relationship Management at Scale: Our 4-Touch Outreach System for 200+ Brands Why String.fromEnvironment() Might Return an Empty String in Dart JGuardrails 1.0.0 — Hardening Java LLM Apps Against Jailbreaks, Toxicity, and Prompt Injection Plan and Schedule a Full Week of Threads Content From One Claude Conversation Coding Cat Oran Ep3, Five Tables Changed Everything Updated: BFF Pattern I'm done watching freelancers get buried by 200 proposals. So I'm building the alternative. This is my first post BFS Algorithm in Java Step by Step Tutorial with Examples Tracking LLM Pricing Monthly: An Open Dataset for 22 AI Models How We Measure Content ROI on a Comparison Site: Revenue Attribution Without Perfect Data Introducing Nova AI Ops: The AI-Native Operating System for SRE Teams I built a free desktop video downloader for Windows — Grabbit How Talkie OCR Helps Vision-Impaired & Dyslexic Users Read the World Around Them VRCFaceTracking安装和iPhone面捕配置教程,有bug Even CrowdStrike Can't See Your Agents The Automation Gold Rush: What n8n Workflows and Claude Are Opening Up for Developers Right Now
WebP vs AVIF vs HEIC: The Real-World Image Format Comparison (2026)
quickconv · 2026-05-02 · via DEV Community

WebP vs AVIF vs HEIC: The Real-World Image Format Comparison (2026)

JPEG has been the default image format for over 30 years. But in 2026, three contenders have matured enough to replace it for most use cases: WebP, AVIF, and HEIC.

This isn't a theoretical comparison. I run QuickConv, an image conversion service that processes thousands of conversions per day. Here's what I've learned from real conversion data.


The Short Answer

Format vs JPEG (file size) Browser support Best for
WebP ~25–34% smaller All modern browsers Safe default today
AVIF ~50–70% smaller Chrome 85+, Firefox 93+, Safari 16+ Highest compression
HEIC ~40–50% smaller Safari only (natively) Apple ecosystem

If you just want a recommendation: use AVIF with WebP fallback. HEIC is great for iPhone photos but a headache for the web.


WebP

WebP was developed by Google in 2010 and has been the "safe" next-gen format for years. Every major browser has supported it since 2020.

What makes it good:

  • Supports both lossy and lossless compression
  • Supports transparency (alpha channel) — unlike JPEG
  • Supports animation — unlike JPEG and HEIC
  • Available in every browser including older versions

Real compression numbers:

Using Sharp (the Node.js image processing library) at quality 80, here's what I see in practice:

Image type JPEG size WebP size Reduction
Portrait photo (3MB) 3,000 KB 2,100 KB 30%
Product shot (1MB) 1,000 KB 680 KB 32%
Screenshot (500KB) 500 KB 320 KB 36%
Illustration (2MB) 2,000 KB 1,100 KB 45%

The catch: WebP's compression algorithm is dated compared to newer codecs. At the same visual quality, AVIF consistently beats it.

When to use WebP:

  • You need maximum browser compatibility
  • Your users might be on older browsers (pre-2021 Chromium)
  • You need animation support without GIF

AVIF

AVIF (AV1 Image File Format) is based on the AV1 video codec developed by the Alliance for Open Media. It's the youngest of the three formats (2019) but has the best compression of any widely-supported image format.

What makes it good:

  • Best-in-class compression — significantly better than WebP at the same visual quality
  • Supports HDR (High Dynamic Range)
  • Supports wide color gamut (P3, Rec. 2020)
  • Open standard — no licensing fees

Real compression numbers (quality 65):

Image type JPEG size AVIF size Reduction
Portrait photo (3MB) 3,000 KB 900 KB 70%
Product shot (1MB) 1,000 KB 320 KB 68%
Screenshot (500KB) 500 KB 190 KB 62%
Illustration (2MB) 2,000 KB 700 KB 65%

I use quality 65 for AVIF in QuickConv's defaults. This might sound low, but AVIF's perceptual quality at 65 is equivalent to JPEG at 85. The codec is fundamentally more efficient.

The catch: Two issues.

First, encoding is slow. AVIF encoding takes significantly longer than JPEG or WebP. A 3MB JPEG converts to WebP in ~100ms; the same file to AVIF takes ~800ms–2s. For a conversion service this matters — it's why I run Sharp on Cloud Run rather than trying to do it in a serverless function.

Second, browser support has a floor. Chrome 85+ (August 2020), Firefox 93+ (October 2021), Safari 16+ (September 2022). If you have users on old iOS devices (pre-iPhone 8 which maxes out at iOS 16 but some older models are stuck on iOS 15), they'll get a broken image without a fallback.

When to use AVIF:

  • Maximum compression is the priority (e-commerce, media sites)
  • You can serve WebP as fallback with <picture> element
  • You control the encoding pipeline and can afford the extra CPU time

HEIC

HEIC (High Efficiency Image Container) is Apple's format, introduced with iOS 11 in 2017. Your iPhone takes photos in HEIC by default unless you've changed settings.

What makes it good:

  • Excellent compression — similar to AVIF
  • Native integration in Apple ecosystem (iOS, macOS)
  • Supports Live Photos (image + video together)
  • Apple devices shoot in this format by default

The catch: HEIC is an Apple proprietary format (based on HEVC/H.265 which has patent licensing). Windows doesn't support it natively. Android doesn't support it. No browser outside Safari supports it.

This is why HEIC is the #1 format people ask to convert on QuickConv. They shoot on iPhone, try to send the photo, and find that Windows/Gmail/Slack can't display it.

Browser support as of 2026:

Browser HEIC support
Safari (macOS/iOS) ✅ Native
Chrome ❌ None
Firefox ❌ None
Edge ❌ None

When to use HEIC:

  • You're storing photos for personal use in the Apple ecosystem
  • You're building Apple-specific apps (iOS, macOS)
  • Never for web delivery

Browser Support Deep Dive

For web delivery, browser support is the deciding factor. Here's the current state:

<!-- The pattern that handles all cases -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="...">
</picture>

Enter fullscreen mode Exit fullscreen mode

This serves AVIF to browsers that support it, WebP as the first fallback, and JPEG as the final fallback. In 2026, the JPEG fallback only matters for IE11 (which you should have stopped supporting years ago) and a handful of obscure browsers.

Coverage breakdown:

  • AVIF: ~93% of global browser usage (caniuse.com, April 2026)
  • WebP: ~97% of global browser usage
  • HEIC: ~19% (Safari only)

Encoding Speed Comparison

If you're building a pipeline that converts images, encoding speed matters. Here are real measurements from the QuickConv converter running on Node.js 22 with native Sharp:

Input Output File size Time
3.6MB JPG WebP (q80) 1.9MB ~300ms
3.6MB JPG AVIF (q65) 1.1MB ~1,800ms
3.6MB JPG HEIC Not supported in Sharp
134KB JPG WebP (q80) 89KB ~80ms
134KB JPG AVIF (q65) 41KB ~420ms

AVIF encoding is consistently 5–6x slower than WebP. For batch processing or real-time conversion, this adds up. For static site assets pre-built at deploy time, it doesn't matter.

HEIC encoding is not supported in most open-source libraries (Sharp, ImageMagick) due to patent licensing. You can decode HEIC (read iPhone photos), but encoding to HEIC requires Apple's frameworks or commercial software.


Lossless Comparison

All three formats support lossless compression, but there are differences:

  • WebP lossless: Reliably good. ~20–30% smaller than PNG for most images.
  • AVIF lossless: Better than WebP lossless in theory, but support is inconsistent across encoders.
  • HEIC lossless: Supported but rarely used outside Apple's own stack.

For lossless web images (logos, icons, UI elements), I generally recommend WebP lossless for its broad support and predictable behavior. For truly lossless archival, stick with PNG.


Transparency (Alpha Channel)

Format Transparency
JPEG ❌ None
WebP ✅ Yes
AVIF ✅ Yes
HEIC ✅ Yes
PNG ✅ Yes

All three next-gen formats support transparency, which makes them viable replacements for PNG as well as JPEG.


My Recommendations by Use Case

Web images (photos): AVIF with WebP fallback

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="...">
</picture>

Enter fullscreen mode Exit fullscreen mode

Web images (logos/icons with transparency): WebP (lossless) with PNG fallback

E-commerce product shots: AVIF — the file size savings directly reduce LCP (Largest Contentful Paint) and improve Core Web Vitals

iPhone photos for sharing: Convert HEIC → JPEG or WebP — most recipients and platforms handle both

iPhone photos for web upload: Convert HEIC → WebP before upload if your backend doesn't handle HEIC natively

Archival/editing: Keep originals in whatever format your camera produces (HEIC for iPhone, RAW for DSLR). Convert to JPEG/WebP only for distribution.


How to Convert

If you need to convert between these formats:

Command line (Sharp/Node.js):

# JPEG to WebP
sharp input.jpg --output output.webp --quality 80

# JPEG to AVIF
sharp input.jpg --output output.avif --quality 65

# HEIC to WebP (requires libvips with HEIC support)
sharp input.heic --output output.webp

Enter fullscreen mode Exit fullscreen mode

Online (no install):
QuickConv — free tier handles 10 conversions/day, no account required. Supports HEIC, WebP, AVIF, PNG, JPG in any combination. Files auto-delete after 24 hours.

API (for automated pipelines):

curl -X POST https://api.quickconv.cc/v1/convert \
  -H "Authorization: Bearer qc_YOUR_API_KEY" \
  -F "file=@photo.heic" \
  -F "output_format=webp"

Enter fullscreen mode Exit fullscreen mode


The Bottom Line

  • WebP is the safe, universal choice. Use it if you want one format that works everywhere.
  • AVIF is the best format technically. Use it with a WebP fallback for maximum compression.
  • HEIC is for Apple devices only. Convert it to anything else before sending to the web.

JPEG isn't going away — it's too deeply embedded in tooling and infrastructure. But for any new image pipeline built in 2026, there's no good reason to produce JPEG as your primary format.


Benchmarks measured on Node.js 22 with Sharp 0.33, running on GCP Cloud Run (2 vCPU). Results vary by image content.

QuickConv converts between WebP, AVIF, HEIC, PNG, JPEG, and more.