--- type: bookmarks tags: ['image', 'img', 'cloudflare'] status: release ctime: 2022-04-09 mtime: 2026-10-06 --- import QuoteLink from '@components/QuoteLink.astro' <img>: The Image Embed element --- - [sharp 로 PNG 일괄 변환](/memo/60) - [이미지 압축 기본값 — mozjpeg · pngquant](/memo/63) - [puppeteer 로 페이지 이미지 저장](/memo/93) - [OG 이미지 생성](/memo/214) --- - [Your Image Is Probably Not Decorative — Smashing Magazine](https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/)[^121-1] - [JPG vs JPEG: Understanding the Most Common Image Format](https://kinsta.com/blog/jpg-vs-jpeg/) - [Using Modern Image Formats: AVIF And WebP — Smashing Magazine](https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/)[^121-2] - [Building an effective Image Component](https://web.dev/image-component/)[^121-3] - [Using Performant Next-Gen Images in CSS with image-set | CSS-Tricks](https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/)[^121-4] - [A Guide to the Responsive Images Syntax in HTML | CSS-Tricks](https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/)[^121-5] - [Frequently Asked Questions  |  WebP  |  Google Developers](https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp)[^121-6] - [Picture perfect images with the modern <img> element - Stack Overflow](https://stackoverflow.blog/2022/03/28/picture-perfect-images-with-the-modern-element/) - [Learn Images  |  web.dev](https://web.dev/learn/images/) - [GitHub - JonasKruckenberg/imagetools: Load and transform images using a toolbox of custom import directives!](https://github.com/JonasKruckenberg/imagetools) - [Cloudflare Image Optimization · Cloudflare Image Optimization docs](https://developers.cloudflare.com/images/) - [Integrate Cloudflare Images on your website · Cloudflare Image Optimization docs](https://developers.cloudflare.com/images/cloudflare-images/tutorials/integrate-cloudflare-images/) --- [^121-1]: alt [^121-2]: 최신 이미지 형식(AVIF 또는 WebP)이 압축을 최대 50%까지 개선하고 시각적으로 매력적으로 보이면서도 바이트당 더 나은 품질을 제공할 수 있는 방법을 강조 [^121-3]: 이미지 사용 및 최적화는 복잡하다. 그래서 개발자가 성능과 품질사이의 균형을 잘 조절해야 한다. 그래서 매번 자체적으로 개발하는 문제 대신 프레임웤 레밸에서 모범사례를 만드는게 중요하다. [^121-4]: css에서 사용가능한 `image-set()`. `type` 기능은 아직 진행중. [^121-5]: 반응형 이미지 대응을 위한 가이드 [^121-6]: webp 기능탐지 방법을 가이드하고 있다