WebPと従来の画像を正しく振り分ける.htaccessファイル WebP Web画像最適化 表示高速化 ページまるごとWebP変換・効果測定と一括ダウンロードがWeb担当者Forumで紹介されて利用者増加中です。 このツールでWebPファイルを一括ダウンロードすると、.htaccessファイルがおまけで付いてきます。これはWebPと従来の画像を振り分ける働きをします。 手順については、ページの画像をまるごとWebP変換してPageSpeed Insightsスコアを今すぐ改善するチュートリアルで詳しく紹介しているのでそちらをご覧ください。 この記事は「その.htaccessファイル中身どうなってるの？ 変な影響でないの？」と気になる方に向けて書いています。 従来のフォーマットとWebPは当面共存が必要 従来の画像を完全にWebPに置き換えてしまう(従来の画像は消してしまう)という方法は、
WebPとは、Googleが開発した静止画フォーマット。 最近見かけることが多くなってきましたが、気になるのが対応ブラウザ問題。 IEは完全に未対応で、その他にも少し古いブラウザだと対応してないものもあります。 Can I use そこで「HTMLを使う方法」と「.htaccessを使う方法」の2通りのやり方で、未対応ブラウザも考慮したWebP画像の掲載方法をご紹介します。 HTMLを使う方法 まずは、従来のJPGやPNGの画像と、WebPの画像の2枚を用意します。 WebP変換ツールはこちらがおすすめです 「Squoosh」 https://squoosh.app/ <picture>タグ、<source>タグを使い、下記のように記述します。 レスポンシブ対応なんかでも使うやつですね。 <picture> <source type="image/webp" srcset="sample.
無料FTPソフト「FileZilla」の使い方｜ファイル転送の一時停止、複数サーバー同時接続も可能。 2024.09.05
WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います。 WebP（ウェッピー）とは？ WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットで、拡張子は「.webp」です。 WebPは、JPEGやPNGと比べ、同程度の画質の画像をより小さなファイルサイズで保存することができます。Googleの発表では、PNGよりも26%、JPEGよりも25%〜34％程度ファイルサイズを抑えることができると言われています。 また、WebPは背景透過（アルファチャンネル）や、アニメーションにも対応しています。つまり、JPEGのよ
2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。 ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。 なんでもかんでもWebPでいいわけではない 試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
