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