Quality and Performance Analysis of Lanczos Resampling Image with Hamming Filter in ReactJS Mobile Web Application

High-resolution images remain one of the largest contributors to web traffic and directly influence page loading performance, especially in mobile environments. This study compares two client-side image resizing approaches: a Canvas-based interpolation method, which represents the common default in web browsers, and Lanczos resampling combined with a Hamming filter, which represents a more advanced resampling technique. The findings indicate that both methods achieve comparable reductions in file size, do not show significant advantage in storage efficiency. In terms of execution time, the Lanczos-Hamming approach provides a modest improvement of about 5-6% faster processing, which may accumulate in scenarios involving multiple images or latency-sensitive applications. The most noticeable difference in reconstruction quality was observed where the Lanczos-based method achieved approximately 13% higher PSNR values (around a 5dB improvement). In general, the results indicate that Canvas interpolation can still serve adequately in contexts where ease of implementation is valued, whereas Lanczos with Hamming window may offer advantages in scenarios where maintaining visual fidelity is critical.