📎

<img>: The Image Embed element

developer.mozilla.org

Footnotes

  1. alt ↩

  2. 최신 이미지 형식(AVIF 또는 WebP)이 압축을 최대 50%까지 개선하고 시각적으로 매력적으로 보이면서도 바이트당 더 나은 품질을 제공할 수 있는 방법을 강조 ↩

  3. 이미지 사용 및 최적화는 복잡하다. 그래서 개발자가 성능과 품질사이의 균형을 잘 조절해야 한다. 그래서 매번 자체적으로 개발하는 문제 대신 프레임웤 레밸에서 모범사례를 만드는게 중요하다. ↩

  4. css에서 사용가능한 image-set(). type 기능은 아직 진행중. ↩

  5. 반응형 이미지 대응을 위한 가이드 ↩

  6. webp 기능탐지 방법을 가이드하고 있다 ↩

#image#img#cloudflare
#121

커스텀 폰트 사용 시, 배포 중 Provided Edge Function is too large 에러가 발생할 경우 로컬 파일로 사용하지말고 fetch로 해당 폰트를 가져온다.12

Footnotes

  1. https://github.com/cbcruk/oz/commit/0cb90b558cca8bf97bfcc0b36914447845131ab7#diff-ea54c769db531913b015e15682e5b3f4364de740cc7d6c1cb2c8ee2a9ce77379L9-R14 ↩

  2. https://vercel.com/docs/concepts/functions/edge-functions/limitations#code-size-limit ↩

#image
#214
import sharp from 'sharp'
import fg from 'fast-glob'

const entries = await fg('./**/*.png')

for (const entry of entries) {
  const trimmedBuffer = await sharp(entry).trim().toBuffer()
  const trimmedImage = sharp(trimmedBuffer)
  const trimmedMetadata = await trimmedImage.metadata()

  await trimmedImage
    .resize({
      width: Math.round(trimmedMetadata.width / 2),
      height: Math.round(trimmedMetadata.height / 2),
    })
    .png()
    .toFile(entry.replace(/\.png$/, '.half.png'))
}

offset(top, left)값, 이미지 사이즈 설정으로 crop 구현이 가능하다

sharp('img.png')
  .extract({
    left: 50,
    top: 50, 
    width: 200, 
    height: 400
  })
#node#sharp#image
#60

이미지 저장1

  • 페이지에서 JavaScript를 통해 이미지 추출
    • 캔버스에서 이미지 추출
    • 서버에서 이미지 가져오기
  • DevTools 프로토콜을 사용하여 이미지 추출
const client = await page.createCDPSession()
const { frameTree } = await client.send('Page.getResourceTree')

for (const resource of frameTree.resources) {
  const { content, base64Encoded } = await client.send(
    'Page.getResourceContent',
    { frameId: frameTree.frame.id, url: resource.url },
  )
  const contentBuffer = Buffer.from(content, base64Encoded ? 'base64' : 'utf8')
}
page.on('response', async (response) => {
  const url = response.url()
  const buffer = await response.buffer()
})

Footnotes

  1. Saving Images from a Headless Browser ↩

#puppeteer#image
#93