Images on Commentary of Takao

Optimizing Images: WebP vs. AVIF and Responsive Sizes

Tue, 15 Jul 2025 00:00:00 +0900

Introduction

Optimizing image assets is one of the most effective ways to improve web performance metrics like Lighthouse scores and LCP (Largest Contentful Paint).

In many web applications, images make up more than half of the total payload size. Slow image loading times directly degrade user experience.

Replacing legacy formats like JPEG and PNG with next-generation formats like WebP and AVIF has become standard practice in modern web development. This article compares these two formats and explains how to configure responsive, optimized image delivery.

Image Optimization Strategies 2024: AVIF, WebP, and Beyond

Tue, 02 Jul 2024 00:00:00 +0900

Introduction

Images account for over half of the typical webpage’s total weight. As web applications grow more visual, optimizing image delivery has become critical for performance, user experience, and Core Web Vitals scores. This article explores modern image optimization strategies, from next-generation formats to responsive delivery techniques.

Image Formats in 2024

The image format landscape has shifted dramatically. Three modern formats now compete for dominance alongside legacy JPEG and PNG.

Next.js Image Optimization: From Setup to Advanced Patterns

Tue, 26 Mar 2024 00:00:00 +0900

Introduction

Images account for over 50% of total webpage bytes on average, making optimization essential for performance. Next.js provides a comprehensive image optimization pipeline through the next/image component and its built-in Image Optimization API. This article covers setup, configuration, and advanced patterns with a focus on Core Web Vitals impact.

The next/image Component

The next/image component extends the HTML <img> element with automatic optimization features: lazy loading, responsive srcset generation, width and height enforcement to prevent Cumulative Layout Shift, blur-up placeholders, and automatic format negotiation.