タグ

imageとjavascriptに関するmizdraのブックマーク (3)

  • 画像に関する新しい DOM API の紹介 - pixiv inside

    こんにちは、福岡オフィスでエンジニアをしている petamoriken です。 ECMAScript と DOM API が好きで、気づいたらいつも仕様を眺めています。よろしくお願いします。 この記事では画像に関する新しい DOM API を紹介します。一般的に DOM API は二つのブラウザによる実装があれば安定していると言われていますが、プロダクトなどに採用する際には十分気をつけてください。また将来的に仕様が変更される可能性があることにも留意してください。 HTMLImageElement#decode() 明示的に画像のデコードをさせるメソッドです。Promise<void> を返します。 実は画像の load イベント完了後では画像の大きさを取得することは出来ますが、まだデコード処理はなされていません。今まで明示的にデコードさせたかったらこのようなコードを書いていたと思います。

    画像に関する新しい DOM API の紹介 - pixiv inside
    mizdra
    mizdra 2020/07/26
    画像周りの重い処理をoffloadするテクニック思いの外色々ある
  • Image decoding on the web | Dexecure

    Learn how Dexecure improved website performance by 35% for theAsianparent! What is decoding Image decoding is the process of converting the encoded image back to a uncompressed bitmap which can then be rendered on the screen. This involves the exact reverse of the steps involved in encoding the image. For example, for a JPEG, it involves the following steps:- The data goes through a Huffman decodi

    mizdra
    mizdra 2020/07/25
    onloadだけでなくdecodeを待ってから画像を差し替えることで、LQIPなimgタグのチラツキを解消できるという話
  • Pixel-perfect rendering with devicePixelContentBox  |  Articles  |  web.dev

    It has 3440 pixels in width and the display area is 79cm wide. That leads to a resolution of 110 DPI. Close to 96, but not quite. That is also the reason why a <div style="width: 1cm; height: 1cm"> will not exactly measure 1cm in size on most displays. Finally, dPR can also be affected by your browser's zoom feature. If you zoom in, the browser increases the reported dPR, causing everything to ren

  • 1