react 이미지 최적화

import { useState, useRef, useEffect } from "react";

const CloudinaryImage = ({ src, fallbackSrc, width, height }) => {
  // 1. 상태 초기화 (초기 상태는 "loading")
  const [status, setStatus] = useState("loading");

  // 2. 이미지 요소에 접근하기 위한 ref 생성
  const ref = useRef(null);

  // 3. 이미지 로드 상태를 관리하는 useEffect
  useEffect(() => {
    // 새 이미지 객체 생성 및 로드
    const image = new Image();
    image.src = src;

    // 이미지 로드 완료 시 상태 업데이트
    image.onload = () => {
      // 500ms 딜레이 후 상태를 "loaded"로 변경
      setTimeout(() => {
        setStatus("loaded");
      }, 500);
    };
  }, [src]);  // src가 변경될 때마다 이 효과 실행

  return (
    // 조건에 따라 대체 이미지 또는 실제 이미지를 렌더링
    <img
      alt="original"
      ref={ref}
      width={width}
      height={height}
      src={status === "loading" ? fallbackSrc : src}
    />
  );
};

export default CloudinaryImage;

의문점. useEffect에서 이미지를 다운하고 img태그에서 다운하면 이미지 로딩을 2번하는게 되지 않는가?