Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説
ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加
Maximally optimizing image loading for the web
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (Layout Shift) が生じる問題がありました. この問題を解決するため以前より, アスペクト比を埋め込むための新たな属性の導入が提案されていました. しかし最近議論に動きがあり, 既存の属性を利用する方法が提案され, ブラウザに実装され始めています. ここでは問題の背景, 提案と議論の変遷, そして開発者が取るべき対応について紹介します. はじめに img タグと Layout Shift intrinsicsize 属性 intrinsicsize
unlimited blue text archive:トレパク騒動に終止符を
今日もネット上では”漫画家の誰それがトレパクしたのがバレて炎上”だの”重ねた画像の線が完全に一致ｗｗｗ”だのと言った文章が踊り、多くのクリエーターと出版社、そしてその論争に巻き込まれた部外者が途方もなく筋違いな被害を受けている。 言うまでもなく著作権は保護されるべきだが、著作権の侵害は「無断トレス＝違法」といった、幼稚なロジックで判断されるような物ではない。この文書では、”何が著作権の侵害に当たるのか、当たらないのか”を明らかにした上で、現在ネットで猛威を奮っている「トレパク検証」の欺瞞と、著作権保護にかかる正当な議論の形を提示する。 文意を明確にする為に、以後敢えて断定的な記述を用いるが、本来著作権の侵害に当たるかどうかは裁判で途方もない量の検討をされて初めて確定する事であり、同じ訴訟においても原審の判決が控訴審で覆った例も多く、この文書で「著作権の侵害に当たる/当たらない」と書かれた事
Party Parrot とは 〜イカれたオウムの歴史を紐解く〜 - Qiita
Slackユーザでなくともエンジニアの方なら一度は見かけたことがあるであろうこのGif画像。 Party Parrot という名称で世界中で愛されています。 ただ、このParty Parrotが何者なのかご存知でしょうか。 奇妙でどこか愛らしい彼の、意外と知られていない歴史を紐解いていきます。 きっかけはBBC 全ての始まりは2009年9月4日にBBCが放映した「Last Chance to See」というテレビ番組の1シーンでした。 イギリスの俳優スティーヴン・フライ(Stephen Fry)と動物学者マーク・カーワーダイン(Mark Carwardine)は撮影でニュージーランドを訪れます。 目的は、世界で唯一飛べないオウムであるカカポ（和名：フクロウオウム）を撮影することです。 Mnolf - Photo taken on Codfish Island (Whenua Hou), N
2020年のクリエイティブトレンド
年のクリエイティブトレンド 年のクリエイティブトレンド 年のクリエイティブトレンド 年のクリエイティブトレンド 年のクリエイティブトレンド 年のクリエイティブトレンド 年のクリエイティブトレンド 年のクリエイティブトレンド 年のクリエイティブトレンド 年のクリエイティブトレンド 年のクリエイティブトレンド 年のクリエイティブトレンド Shutterstockの利用者はさまざまなキーワードを使って毎日数多くの画像、動画、音楽素材を検索されています。Shutterstockではこの検索データをもとに、クリエイティブの現場で何が制作されているのか、そして何が2020年のグローバル・トレンドなのか、分析を行いました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
