ファイル形式「webP(ウエッピー)」を簡単に導入できたので、それに関してのお話です。́・ω・`)WebP(正式名称:ウェッピー)は、Googleが2010年から提供している静止画像フォーマット。非可逆圧縮やアニメーション、透明度などの特徴をサポートしています。「jpg」とは異なり、非可逆圧縮でもアルファチャンネルを扱えるのも特徴のひとつ。拡張子は「.webp」になります。́・ω・`)現在は、下記の主要ブラウザのほとんどで対応しています。EdgeFirefox(PC版のみ)Opera※2019.4.17の対応状況です。Safari」はまだ未対応なのです(ノД`)日本はiPhoneユーザーが多いので、この未対応はすごく痛い...。́;ω;`)広告ブロックアドオンが素晴らしいブラウザアプリなので。́・ω・`)画像ファイルの容量を考えても従来のファイルより80%ぐらいは低くなるので、ブラウザアプリ利用ユーザーのことを考えるなら導入するメリットがありまくりです。́・ω・`)便利なwebPの作り方として、3つ方法があります。(jpg、pngとwebpを相互変換)このサイトとかで簡単にJPG画像から変換できます。PNG画像とかを変換できないので、ちょっと微妙かな(;・∀・)英語サイトなど他にもありそうなのでこちらのやり方が良い方はもう少しグーグル先生にご相談してみてください。゚)ノまずはプラグインを下記サイトからダウンロードしてください。́・ω・`)bあとWindows版は32bit(x86)版と64bit版(x64)があるので、自分の環境にあわせて使います。「win版」と「Mac版」があるので、欲しい方を選択。゚)ノファイルの「保存」「別名で保存」を選択した際に、フォーマットに「WebP」の項目があれば、いつでも書き出せます。́・ω・`)bこの方法の注意点として、プラグインをあててもwebPファイルを現在のバージョンのphotoshopでは開けません。JPGファイルなどの編集ファイルを別に作っておいたほうが良いと思います。Optimizer」を使うと簡単につくれます。このプラグイン...webPファイルを書き出す前提でインストールしないと、JPG画像・PNG画像とかではあまりサイズ圧縮してくれないのです。Optimizerの設定画面から「WebP」タブをクリックします。その中の項目で、「JPG,PNGからWebPにチェック」を入れて、変更を保存します。すると、同ページの下に「.htaccessファイル」に以下のコードを入れてくださいっていう文言と「右下に赤いPNGマーク」が表示されます。「一括最適化」より「以前に最適化された画像はデフォルトでスキップされます。スキャン前にこのボックスをチェックすると上書き出来ます。」にチェックをいれて、「画像スキャンボタン」をクリック。「画像を最適化」ボタンを押せば、自動でwebPファイルを作ってくれます。.htaccessファイルを使ってwebP非対応ブラウザ対策ここからは、webPファイルの使用方法になります。webP対応ブラウザにはwebPファイルを読み込ませ、webP非対応ブラウザには従来どおりのJPGファイルなどを表示させるために.htaccessファイルに対策コードを入力します。Optimizer」をつかうで説明してた設定の続きにもなります。この方法には前提条件があります。Optimizer」を利用してwebPファイルを書き出した方は、この前提条件をすでに満たしています。同じ内容でJPG・PNG・GIF画像も用意する理由としては、こちらの画像ファイルをHTMLに入力します。webP非対応ブラウザにはこちらを表示させて、対応ブラウザには「.htaccessファイル」を使って、webPファイルへ差し替えるーといった感じです。Optimizer」がwebPファイルを生み出すときの名前のつけ方なので、統一しておくともしものときに楽になると思います。変更する場合は下記の.htaccessファイルの入力コードをカスタマイズしてください。.htaccessファイルに入力コードはこちらです。Optimizer」と一緒のものになります。゚)ノちなみにFTPツールを使うとわかりやすいのですが、もともと.htaccessファイルが設置する場所に存在している場合は、かならずダウンロードをして、そのファイルにコードを記入してください。そのまま新規ファイルを上書きしてしまうと、もともと設定してあったコードがある場合サーバが大変なことにはなりますので(ノД`).htaccessファイルの設定になれてない方は、一度グーグル先生に相談して、編集方法やリスクなどを知っておくと良いかもです。Optimizer」を使っている場合WordPress本体のプログラムが入っている一番上のフォルダ内の.htaccessファイルに上記コードを加えます。デフォルトだと...「ドメイン名/wpフォルダ」かな。wp-adminフォルダ、wp-contentフォルダ、wp-includesフォルダとか置いてある場所です。Optimizerの設定画面の「WebP」タブの下側に表示されていた赤いPNGマークがグリーンWebPマークに変わってると思います。グリーンWebPマークに変わらないときは、上記コードの入力する順番が間違ってる可能性があります。WordPress」より上に記入してください。WordPress本体フォルダの外に画像ファイルを置いている場合サイトのルートに上記コードを加えた.htaccessファイルに上記コードを加えます。最後にwebPファイルへ置き換わっているのかの確認方法です。この方法では、HTML等に画像ファイルを配置する際webPファイルをそのまま配置せずに、webPファイルに変更前の従来どおりのファイル(JPGなど)を設置します。ブラウザでソースコードを見ても、webPファイルになっていません。Chromeなら「検証」Firefoxなら「要素を調査」などのデベロッパーツールを使います。画像はFirefoxの「要素を調査」ですけど、「ネットワーク」→「画像」項目をクリックして、一度更新ボタンを押すと、webPファイルを用意した画像ファイルの「タイプ」項目がwebPファイルになっていると成功です。Chromeの「検証」なら、「Network」→「Img」項目の「Type」の場所にwebPファイルになっているかどうか見れます。コメントをキャンセル入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。内容をご確認の上、送信してください。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。運営構想このサイトについてWEBページ内検索ページ内の画像や文章を無断使用を禁止しています。