[B! 画像] extra_numberのブックマーク

imgタグのwidthとheightを省略したらダメ！画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法

レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法どちらの方法を使用すべきかレイアウトシフトとはデフォルトでは、<im

extra_number 2023/01/18

“ャストする”

リンク

Eagle - 画像収集と管理するアプリ

デザイン事例、スクリーンショット、画像、動画、音声などの素材を簡単に整理し、アイデアを生み出し、仕事の効率をさらに高めましょう！

extra_number 2022/05/18

リンク

WebP対応をしたらサイトが軽くなったので、最も対応しやすい方法を解説します | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社

こんにちは、Webコーダーのばやしです。さっそくですが、皆様は「WebP対応」していますか？「対応していないブラウザへの対応が面倒・・・」「そんなにサイト速度が大きく変わらないならPNG,JPGで十分」と考えている方も多いかと思います。かくいう私も同じように考えていました。とはいえ、いつまでも見てみぬふりをするのは良くないと思い、この度調査の上弊社サイトで実践しました。そもそもWebPとはそもそも「WebP」とは何でしょうか。さっそくWikipedia先生に聞いてみましょう。 WebP（ウェッピー[2]）は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。 https://ja.wikipedia.org/wiki/WebP まさにこの記載通りのもので、従来のWebページに使われる「JPG・PNG・GIF」などと替わって通信量削減や

extra_number 2020/08/03

画像

リンク

[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック

何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。 CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。 Time-saving CSS techniques to create responsive images by Adrien Zaganelli 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。画像に適した方法で実装しよう画像を配置するこれからのテクニック IEでも機能する、Netflixで使用されているテクニック簡単な方法パフォーマンスを考慮した方法（上級）レスポンシブ対応の画像を実装する時の流れ画像に適した方法で実装しよう今、金曜日の17時だとします。

extra_number 2018/10/19

リンク

[CSS] CSSで利用する画像をSpriteにするかBase64にするかを考察してみた - YoheiM .NET

こんにちは、@yoheiMuneです。 Webページを作る際に、CSSに使う画像をSprite化するのが良いのか、Base64エンコーディングしてCSSに埋め込むのが良いのか、最近良く議論になります。今回は、その議論をじっくりと考えてみた結果をブログに書きたいと思います。背景仕事でWebベースのゲームやSNSを作成することが多くあります。 HTML,JavaScript,CSS,画像を使って、画面を構成する仕組みです。そんな仕事で、最近良く以下のような話題が聞かれます。アプリケーションで利用するアイコンやボタン背景画像などを、Base64エンコーディングしてCSSに埋め込むべき？それとも、Sprite画像にして読み込むべき？この話題は、既に話しまくられている話題かもしれませんが、自分なりに考えて結論を出してみたかったので、今回考察しました。考察した結論結論から申し上げま