NEXT.JS의 이미지 최적화는 어떻게 동작하는가?
Next.js의 이미지 최적화가 요청 시점에 어떻게 동작하는지 정리했습니다. 캐시 재사용, 포맷 선택, sharp와 Squoosh 성능 차이까지 살펴봤습니다.
#Next.js#이미지 최적화
3800
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
Next/Image를 활용한 이미지 최적화
Next/Image로 지연 로딩·WebP 변환·반응형 이미지를 적용해 이미지 전송량과 로딩 시간을 줄였습니다.\n`sizes`와 srcSet 설정을 조정해 과도한 고해상도 요청 및 최초 생성 지연을 해결했습니다.
#Next.js#Next/Image
000
Next/Image를 활용한 이미지 최적화
Next/Image를 활용한 이미지 최적화
Next/Image로 lazy loading, WebP 변환, placeholder를 적용해 이미지 전송량과 로딩 시간을 줄였습니다.\nlayouts와 sizes 설정을 조정해 과도한 고해상도 요청 및 이미지 생성 비용을 해결했습니다.
#Next.js#Next/Image
3700
웹사이트 최적화 방법 - 이미지 파트
이커머스 웹사이트의 이미지 요청과 로딩 지연을 줄이는 포맷·압축 전략을 설명했습니다. 반응형 이미지, 지연 로딩, CDN 캐시, 스프라이트 활용법을 소개합니다.
#이미지 최적화#WebP
4300
이미지 리사이징을 통해 웹 성능 개선하기
반응형 이미지의 srcSet·sizes 속성으로 기기와 레이아웃에 맞는 해상도를 제공합니다.\n압축과 리사이징을 결합해 리소스 용량과 웹 성능을 개선했습니다.
#React#srcSet
4200
서버 비용을 70%나 줄인 온디맨드 리사이징 이야기
사전 생성 썸네일을 WebP 원본 기반 온디맨드 리사이징으로 전환했습니다.\nSQS·Spot Instance 마이그레이션으로 S3 비용을 70% 이상 절감했습니다.
#AWS#S3
3600
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
비트윈의 스티커 시스템 구현 이야기
스티커 스토어·다운로드·권한 검증 구조와 구현 선택을 정리했습니다.\nWebP, CDN, GAE, 서명 토큰으로 용량·운영·보안 문제를 해결했습니다.
#Java#WebP
3600