https://takao.blog/zh/tags/images/Recent content in Images on Commentary of TakaoHugo -- gohugo.iozhCommentary of TakaoWed, 15 Jul 2026 22:01:08 +0900https://takao.blog/zh/web/web-performance-image-optimizations/Tue, 15 Jul 2025 00:00:00 +0900https://takao.blog/zh/web/web-performance-image-optimizations/<img src="https://takao.blog/img/thumbnail/web-performance-image-optimizations-zh.png" alt="Featured image of post 优化图像：WebP 与 AVIF 以及响应式尺寸" /><h2 id="介绍">介绍 </h2><p>优化图像资源是提高 Lighthouse 分数和 LCP（最大内容绘制）等 Web 性能指标的最有效方法之一。</p> <p>在许多 Web 应用程序中，图像占总负载大小的一半以上。缓慢的图像加载时间直接降低了用户体验。</p>https://takao.blog/zh/web/image-optimization-2024/Tue, 02 Jul 2024 00:00:00 +0900https://takao.blog/zh/web/image-optimization-2024/<img src="https://takao.blog/img/thumbnail/image-optimization-2024-zh.png" alt="Featured image of post 2024 年图像优化策略：AVIF、WebP 及其他" /><h2 id="介绍">介绍 </h2><p>图片占典型网页总重量的一半以上。随着 Web 应用程序变得更加可视化，优化图像交付对于性能、用户体验和 Core Web Vitals 分数变得至关重要。本文探讨了现代图像优化策略，从下一代格式到响应式交付技术。</p>https://takao.blog/zh/web/nextjs-image-optimization/Tue, 26 Mar 2024 00:00:00 +0900https://takao.blog/zh/web/nextjs-image-optimization/<img src="https://takao.blog/img/thumbnail/nextjs-image-optimization-zh.png" alt="Featured image of post Next.js 图像优化：从设置到高级模式" /><h2 id="介绍">介绍 </h2><p>图片平均占网页总字节数的 50% 以上，因此优化对于性能至关重要。 Next.js 通过 <code>next/image</code> 组件及其内置图像优化 API 提供全面的图像优化管道。本文涵盖设置、配置和高级模式，重点关注 Core Web Vitals 的影响。</p>