KakaoPage Stage Reduces Image Size by 1/40 with Next/Image

KakaoPage Stage applied the Next/Image component to improve image loading performance on the home screen of its new author discovery service. Previously, 500KB images sized 500px x 750px were loaded directly into 100px x 150px areas, consuming unnecessary bandwidth and causing layout shifts (CLS).

Effects of Next/Image Implementation

Next/Image automatically generates srcSet based on device size and serves images in WebP format. As a result, the total image size on the Stage home screen decreased from 25MB to 589KB, approximately 1/40 of the original size. Additionally, thanks to lazy loading that only loads images within the viewport and placeholder features, the page load completion time (loaded) was significantly reduced from 1.11s to 386ms.

Issues Encountered During Implementation and Solutions

During implementation, using the layout="fill" attribute caused excessively large images to be loaded based on the screen width (3840px). This was because the sizes attribute was set to the default value of 100vw. Stage resolved this issue by changing the default value of images.sizes to '250px' in next.config.js.

Furthermore, latency occurred during the initial request as each server container generated images on the fly. To address this, fixed-size images were configured with layout="fixed" to limit srcSet to two variants (1x, 2x), and images.imageSizes and images.deviceSizes settings were adjusted to minimize the generation of unnecessary image variants.