흐림 및 Jamstacks

Cloudinary 호스팅의 멋진 부분은 개발자를 위한 매우 광범위한 API를 제공한다는 것입니다. 그러나 콘텐츠 작성자의 경우 웹에서 이미지를 표시하는 데 필요한 기술적인 측면에 대해 그다지 신경 쓰지 않는 경우가 많습니다. 우리는 스토리지가 저렴하고 이러한 이미지를 관리되지 않는 서버나 Adobe AEM 또는 Wordpress와 같은 CMS에 던지는 것은 중요하지 않다는 말을 반복적으로 들었습니다. 그러나 더 많은 항목을 "클라우드"가격으로 이동하기 시작하면서 이 콘텐츠의 생산자와 소비자 모두에게 기능이 중요해지기 시작했습니다.

웹프란?

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP 무손실 이미지는 PNG에 비해 크기가 26% 더 작습니다. WebP 손실 이미지는 동등한 SSIM 품질 지수에서 비교 가능한 JPEG 이미지보다 25-34% 더 작습니다. Webp 2010년 Google에서 만든 형식이며 오늘날의 많은 브라우저에서 구현되었습니다.

Webp에 관심을 갖는 이유

많은 클라우드 기반 시스템에서 스토리지 비용이 추가되기 시작하는 여러 가지 이미지 크기를 생성합니다. 이제 소비자는 생산자의 이 비용에 대해 반드시 신경쓰지 않습니다. 소비자는 휴대 전화가 얼마나 많은 데이터를 사용하고 전화 요금제를 소모하는지에 관심을 가질 것입니다.

Cloudinary는 어떻게 Webp를 쉽게 만들까요?

HTTP 호출: 원래 호출 134KBURL: https://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ajonp-com/blog/Cloudinary_-_Webp.webp



Webp Call 49.7KB - 63% 감소URL: https://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ajonp-com/blog/Cloudinary_-_Webp.webp



Webp Call @ 너비 800px 49.7KB - 92.5% 감소URL: https://res.cloudinary.com/ajonp/image/upload/w_800/v1564600835/ajonp-ajonp-com/blog/Cloudinary_-_Webp.webp



png를 webp로 변경하는 것 외에 다른 작업을 수행하지 않고도 호출을 자동으로 63% 줄일 수 있습니다. 이제 대부분의 소프트웨어는 한 단계 더 나아가 브라우저가 요청해야 하는 화면 크기를 자동으로 고려할 수 있으므로 위의 예는 사진 너비를 800px('w_800)로 요청하는 것입니다.

웹 지원

아래에서 볼 수 있듯이 Webp 형식은 Safari(및 iOS Safari)를 제외한 모든 주요 브라우저에서 지원됩니다.



https://caniuse.com/#feat=webp Chrome을 사용하는 Android에서 볼 수 있듯이 Webp를 사용하여 이미지를 찾는 데 문제가 없습니다.



Safari에서 이것을 시도하면 브라우저는 이것을 파일로 취급하고 다운로드합니다.

구조에 대한 HTML 그림

그래서 개발자로서 저는 솔직히 "사람들이 Safari를 제외한 모든 것을 사용하게 하라"고 말할 수 없습니다. 그렇다면 이 문제를 어떻게 100% 해결할 수 있을까요? HTML <picture> 요소가 구조를 위해 있습니다! 때

```일반 텍스트


srcset="https://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ajonp-com/blog/Cloudinary_-_Webp.webp"
유형="이미지/webp"
/>

src="https://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ajonp-com/blog/Cloudinary_-_Webp.webp"
alt="흐림 웹"
/>

![](https://media.codingcat.dev/image/upload/v1657636770/main-codingcatdev-photo/a9d5300d-5d9c-4a23-a3ce-e37e8b621173.png)

As you can see below Safari will use the `<img>` tag and not refer back to the `<source>` tag, and it will show the image correctly.

![](https://media.codingcat.dev/image/upload/v1657636764/main-codingcatdev-photo/dab3fd4a-a7f0-45f1-be7b-f5e143d74e68.png)

![](https://media.codingcat.dev/image/upload/v1657636762/main-codingcatdev-photo/20b0aea2-3459-4ee6-bf55-df5d3d6002e6.jpg)

In Chrome the `<source>` tag is used so it will automatically pickup the webp extension and work correctly.

## Markdown

### Why Markdown

I cross post my lessons and blogs over to [DEV](https://dev.to/). Because of this I don't prefer to use shortcodes and instead stick with supported markdown syntax. I also tend to move on the the next "cool" technology platform often.For instance I can easily load all Markdown to:

### Markdown in Hugo

I fully admit that it takes me much longer to take my [markdown file images](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#images) and replace them for `<picture>` tags (yes I am lazy). Hugo provides amazing things called [shortcodes](https://gohugo.io/content-management/shortcodes/) that will allow you to execute a great deal of code in a short one line example of markdown. [xabeng](https://dev.to/xabeng) created an awesome set of shortcodes [my hugo shortcode for including image from cloudinary](https://dev.to/xabeng/my-hugo-shortcode-for-including-image-from-cloudinary-1l46).

### VSCode Extension - Paste Image - Cloudinary

[markdown image paste](https://marketplace.visualstudio.com/items?itemName=njLeonZhang.markdown-image-paste) is a fantastic plugin that allows you to take screenshots easily and loads them directly to cloudinary. By default once the upload completes it will place the new image URL into a markdown image tag.I did open an [issue](https://github.com/njleonzhang/vscode-extension-mardown-image-paste/issues/9) to allow for `html` code instead of the generic markdown syntax.