これは朗報！ レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります

2023/12/05 160 users srcset sizes CSS 遅延 auto

朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> こ... 続きを読む

画像による Layout Shift が無くなる Web がやって来る - mizdra's blog

2020/05/31 306 users mizdra's blog web fetch 画像 古来

はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (La... 続きを読む

Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に | コリス

2018/09/03 315 users コリス LazyLoad iframe Chrome ロード

「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。... 続きを読む

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld

2016/05/14 132 users NxWorld ウインドウサイズ auto 横幅 height

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置して width:100%; と height:auto; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画... 続きを読む

指定のURL以外からの画像参照は、別の画像に差し替える方法

2014/06/15 156 users 画像参照 URL以外 指定 画像 方法

http://enjiout.com/post-180/ こちらの記事で、「指定のドメイン（=URL）以外から画像を参照して呼び出した場合、指定の画像へ差し替える .htaccess の記述は無いか？」と記載があったので書いてみました。 STEP1 .htaccess の作成 外部のドメインへ参照されると嫌な画像フォルダーを http://pct.unifas.net/img/t/ とすれば、その... 続きを読む

日本酒選びに失敗しない！日本酒のラベルを見る３つのポイント – ガジェット通信

2014/02/08 265 users ラベル ガジェット通信 日本酒選び 日本酒 ポイント

今回は日本酒をもっと楽しむSAKEマガジン『KURAMAGA』からご寄稿いただきました。 ※すべての画像が表示されない場合は、http://getnews.jp/archives/509916をごらんください。 日本酒選びに失敗しない！日本酒のラベルを見る３つのポイント （画像が見られない方は下記URLからご覧ください） http://getnews.jp/img/archives/2014/02... 続きを読む

てきとう:自民党議員「何で公務員だけが憲法を守んなきゃいけないの？国民も守らなきゃいけないでしょ？」 - livedoor Blog（ブログ）

2013/12/22 116 users 憲法 自民党議員 国民 公務員 livedoor Blog

1 ：番組の途中ですがアフィサイトへの転載は禁止です：2013/12/19(木) 17:48:50.19 ID:veiz930W0 ?2BP(3536) http://up.null-x.me/poverty/img/poverty115342.jpg ちなこの小林は慶応大学法学部教授の小林節 改憲派の論客で自民党の勉強会にもよく出てた人 そんな人にもボロ糞言われる自民党議員と改憲案って… 自民党... 続きを読む

nginxでステータスコード404,500,503時に特定の静的なファイルを表示する - taiyoh's memorandum

2013/08/15 121 users nginx memorandum logs taiyoh's

2012-05-11 nginxでステータスコード404,500,503時に特定の静的なファイルを表示する というメモ。 server { listen 80; server_name example.com; root /path/to/docroot; access_log logs/example.access.log main; location ~ ^/(js/|img/|css/|sw... 続きを読む

並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌

2011/09/05 629 users jQueryサンプル phpspot開発日誌 画像 デモ 調整

Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表... 続きを読む

荒木飛呂彦（50歳）の最新の写真が公開される:ハムスター速報

2011/03/09 225 users 荒木飛呂彦 interview ハムスター速報 New VIP

荒木飛呂彦（50歳）の最新の写真が公開されるTweetカテゴリ☆☆☆1 ：以下、名無しにかわりましてVIPがお送りします：2011/03/09(水) 12:22:09.02 ID:w9jOcQA80 荒木飛呂彦(50) http://www.hirosegawa-net.com/interview/new/img/18_001.jpg 2 ：以下、名無しにかわりましてVIPがお送りします：2011... 続きを読む

画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌

2009/03/18 595 users ハイクオリティ CSS phpspot開発日誌 Tip 画像

Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能... 続きを読む

IEでアルファチャンネルPNGを表示する （iepngfix.htc） - youmos

2007/07/09 243 users youmos エレメント アルファチャンネル 導入 タグ

InternetExplorer7からアルファチャンネルを含むPNG表示が出来るようになりましたが、IE6.x以前は対応していません。簡単に表示できるようにしてくれるのが、iepngfix.htc。<img>タグ、またはエレメントの背景画像にxxx.png画像が指定されているものに対して、AlphaImageLoaderを適用してくれます。 導入は簡単に行うことが出来ます。注意したいのはhtcファ... 続きを読む

まちがった自動ログイン処理

2006/05/12 386 users custom 解答 link アプリケーション 実装

Link: http://blog.ohgaki.net/skins/custom/img/chain_link.gif問題：まちがった自動ログイン処理の解答です。このブログエントリは最近作られたアプリケーションでは「問題」にしたような実装は行われていないはず、と期待していたのですがあっさり期待を破られたのでブログに書きました。このブログの方が詳しく書いていますけが「Webアプリセキュリティ対策入... 続きを読む