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」と指定しておく手法がよく用いられます。この手法に加
ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利
昨日知ったWebサービスに久々に感激したので勢いでシェアします。Web制作で必ずと言っていいほど必用になるダミー画像を生成してくれるサービスなんですが、これが個人的にかなり便利でした。 PLACEHOLD.ITはダミー画像の生成サービスなんですが、凄く手軽に生成出来るのでかなりオススメです。 ダミー画像を生成する、というシンプルなサービスですが、これが想像以上に有用的でした。 使い方使い方は至って簡単。placehold.itというドメインの後にサイズを指定すればいいだけ。 例えば350×150ピクセルの画像が欲しいなら http://placehold.it/350×150 にアクセスすれば指定したサイズの画像が表示されます。 なので、 <img src="http://placehold.it/350x150" />これで以下のようにダミー画像を表示させる事ができます。 勿論、細かいサ
［ウェブサービスレビュー］市販ソフト顔負けの画像編集サービス「Pixlr Editor」
内容：「Pixlr Editor」は、オンラインで使える画像編集サービスだ。Photoshopのクローンとでも言うべきインターフェースを備え、多彩な編集機能を利用できるだけでなく、キーボードショートカットや履歴機能にも対応するなど、市販ソフト顔負けの機能を備えている。 「Pixlr Editor」は、オンラインで使える画像編集サービスだ。ローカルもしくはウェブ上から読み込んだ画像をブラウザ上で編集し、保存することができる。会員登録も不要で、手軽に利用できるのが特徴だ。 特筆すべきなのは、なんといってもその機能の豊富さだ。Photoshopと比べても遜色のない機能の数々は、しばらく使っているとウェブサービスであることをすっかり忘れてしまうほど。さすがにバッチ処理などには対応しないものの、「Ctrl」＋「Z」でアンドゥが可能であるなど、キーボードショートカットにまで対応しているのは驚きだ。 多
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
