Google Chrome 75から、HTML側にloading属性を追加するだけで、画像やiframeの遅延読み込みが実装可能になる予定です。 ※2019/08/19追記 Google Chrome 76から公式にサポ…
Google Chrome 75からサポート予定のloading属性による画像やiframeの遅延読み込みを実装する方法
クリックするとふわっと拡大！jQuery不要のLightbox系スクリプト「Luminous」の使い方
Luminousは、画像をクリックするとふわっと拡大してくれるLightbox系のJavaScriptスクリプトです。jQueryに依存せず単体で動作します。 Luminousの使い方 Luminousの使い方は、WEM…
背景画像も遅延読み込み可能なLazyload系ライブラリ「lazysizes」
lazysizesは、画像を遅延読み込みすることができるLazyload系のJavaScriptライブラリです。通常の画像だけでなく背景画像も遅延読み込み可能です。また、jQuery非依存で単体で動作します。 挙動につい…
投稿内の画像からアイキャッチ画像を自動生成してくれるWordPressプラグイン「XO Featured Image Tools」
XO Featured Image Toolsは、投稿内の画像からアイキャッチ画像を自動生成してくれるWordPressプラグインです。アイキャッチ画像を手動で設定しなくても、投稿内の最初の画像を自動で設定してくれます。…
アイキャッチ画像をURLで指定できるようになるWordPressプラグイン「External URL Featured Image」
External URL Featured Imageは、アイキャッチ画像の指定をURLでも行えるようになるWordPressプラグインです。 通常、アイキャッチ画像を指定する場合は、画像を新規にアップロードするかメディ…
写真の中から人物や動物等の被写体のみを切り抜いてくれるWEBサービス「remove.bg」
remove.bgは、写真の中から人物・動物・植物・モノ等の被写体のみを切り抜いてくれるWEBサービスです。 写真をアップロードするだけで自動認識され、被写体のみが切り抜かれます。 remove.bgの使い方 remov…
YouTube動画のサムネイル画像を取得・表示する方法
サイトにYouTube動画のサムネイル画像を表示させる方法をご紹介いたします。 YouTubeでは、特定のURLにサムネイル画像が保存されるようになっています。サムネイルのサイズ別にファイル名が分かれているので、表示させ…
Web上で画像のファイルサイズを圧縮できるGoogle製のツール「Squoosh」
Squooshは、Googleがリリースした画像圧縮ツールです。画像をドラッグ&ドロップするだけで使用可能で、元の画像と圧縮後の画像を比較しながら微調整することができます。 対応フォーマットは、JPEG・MozJ…
画像比較に便利！スライドして画像を切り替えることができる軽量スクリプト「Beer Slider」
Beer Sliderは、2つの画像を比較するために、スライドして画像を切り替えることができるようになるスクリプトです。ビフォー/アフターの画像を比較したい時などに便利です。 以下のような感じで、画像の上にスライドが表示…
WordPressでメディアをアップロードする時にHTTPエラーが出る時の対処法
WordPressである特定の画像をアップロードしようとすると、HTTPエラーが発生する現象に遭遇しました。投稿内の[メディアを追加]からでも[メディア] – [新規追加]でも、どちらでもエラーになってしまい…