Image Resource Optimization Strategies for E-commerce Frontend

The article is the first in a series that shares practical experience from a high‑traffic e‑commerce project, focusing on visual experience, performance optimization, and architecture design for front‑end image handling.

Background : E‑commerce apps display many product images, banners, and detail graphics, which can heavily impact page load time and user retention if not optimized.

Ordinary Image Optimization – Lazy Loading : Lazy loading loads only images within the viewport, reducing bandwidth and request count. Two implementation methods are described: listening to the scroll event and using the IntersectionObserver API. The article provides a React component example that tracks images via data‑src , swaps it to src when the element becomes visible, and cleans up listeners on unmount.

const ImageLazy = () => {
  const [list, setList] = useState([1,2,3,4,5,6,7,8]);
  const ref = useRef(null);
  return (
{list.map(id => (
))}
);
};

.scroll-item { height: 200px; }
.scroll-view { height: 400px; overflow: auto; }

The scroll callback calculates clientHeight + scrollTop > image.offsetTop to decide when to load an image, and a throttling hook ( useThrottleFn from ahooks ) limits the callback to once every 500 ms.

useEffect(() => {
  const imgs = document.getElementsByTagName('img');
  ref.current?.addEventListener('scroll', () => {
    run(imgs);
  });
  run(imgs);
  return () => {
    ref.current?.removeEventListener('scroll', () => {});
  };
}, []);

High‑Fidelity Image Optimization : For large, high‑resolution images, the article recommends showing a skeleton or blurred thumbnail while the real image loads, using the onLoad event to switch visibility. A React component example demonstrates status handling ( pending , success , error ) and CSS blur effects.

interface ImageProps extends React.ImgHTMLAttributes
{
  thumb: string;
}

type ImageStatus = 'pending' | 'success' | 'error';

const Image: React.FC
= (props) => {
  const [status, setImageStatus] = React.useState
('pending');
  const onChangeImageStatus = (s: ImageStatus) => {
    setTimeout(() => setImageStatus(s), 2000);
  };
  return (
    <>
onChangeImageStatus('success')} onError={() => onChangeImageStatus('error')} src={props.src} />
    
  );
};

Long Image Optimization – Splitting : Very tall detail images are split into equal‑height blocks (e.g., 200 px) using Node.js with sharp and image‑size . The script calculates slice heights, extracts each block, and saves them as separate files.

const SPLIT_HEIGHT = 200;
let clientHeight = currentImageInfo.height;
const heights = [];
while (clientHeight > 0) {
  if (clientHeight >= SPLIT_HEIGHT) {
    heights.push(SPLIT_HEIGHT);
    clientHeight -= SPLIT_HEIGHT;
  } else {
    heights.push(clientHeight);
    clientHeight = 0;
  }
}
let marginTop = 0;
heights.forEach((h, index) => {
  sharp('./input.jpg')
    .extract({ left: 0, top: marginTop, width: currentImageInfo.width, height: h })
    .toFile(`./img/split_${index + 1}_block.jpg`)
    .then(() => console.log(`split_${index + 1}_block.jpg切割成功`))
    .catch(err => console.log(JSON.stringify(err), 'error'));
  marginTop += h;
});

On the front end, the sliced images are displayed sequentially, still using lazy loading to improve perceived performance and avoid long white‑screen periods.

Conclusion : The article recommends using lazy loading whenever possible, providing user feedback through skeletons or progressive loading, splitting long images into smaller chunks, serving all images via CDN, and compressing assets to achieve optimal front‑end performance in e‑commerce applications.

References include articles on progressive image loading in React, front‑end performance optimization, lazy loading techniques, and demo links.