attention admin about comments trackbacks you may also like

webpその2

2019年06月09日
ブログいじり
0

以前の記事でグーグルが提唱している画像形式webpを使用している記事を書いたのですが、

その記事以降、記事に掲載する画像は、同じ画像でjpeg形式とwebp形式、二つを用意し、webp未対応のインターネットエクスプローラーに対応しています。

先ず、掲載するjpeg画像を下のサイトでパンダ 圧縮します。

TinyPNG ? Compress PNG images while preserving transparency

Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

その圧縮した画像を今度は下のサイトでWebp形式に変換するのですが・・・

WEBP変換ツール (jpg、pngとwebpを相互変換)

WEBPコンバーターは、お手持ちのJPEGやPNG画像をWEBPに変換するウェブサービスです。

変換したwebp形式をダウンロードすると・・・

変換したwebp形式をダウンロードすると・・・
元のjpeg形式のファイル名が継承されないんですね。

で、参考に 真似をさせていただいたブログ様で紹介されていたアプリをダウンロードしました。下のサイトです。

WebP画像を作成できるアプリ「WebP画像を作る君」

みなさんは次世代の画像形式「WebP(ウェッピー)」をご存知ですか? 聞いたことはあるものの、作り方や採用したときのメリット、事例にピンとこない方が多いのではないでしょうか。「せめて手軽にWebPを作れるツールが欲しい」と思い、デスクトップアプリケーション「WebP画像を作る君」(英語名は「WebP Converter」)を開発し公開しました。

アプリからjpeg形式をwebp形式に変換すると、ファイル名が継承されるようになりました。

アプリからjpeg形式をwebp形式に変換すると、ファイル名が継承されるようになりました。

そんなこんなで、同じ画像を二つの形式で用意をして、pictureタグで表示を切り替えるようにしています。

なぜ、こんなことをするのかは、ブログの表示スピードアップと、インタネットエクスプローラーで当ブログを閲覧している方のためです。

インターネットエクスプローラーで閲覧している人には、jpeg画像を表示、他のブラウザで閲覧している人にはwepb画像が表示されます。

当ブログは化石級の固定幅テンプレートを自力でレスポンシブ化したものですが、(まだ完全ではありません・・・)当ブログの前回の記事をスピード測定してみると・・・

モバイルでは、

モバイルでは、98点

パソコンでは、

パソコンでは99点

モバイルもパソコンも90点以上。満点を目指したいですね。(点数は、ネット回線の速度にも影響されます。一番良かった点数を紹介しています。)下のサイトで測定しました。

関連する記事
遠太
Author: 遠太
九州は福岡県中間市で環境保全や地域に関するボランティア活動中。
できる時にできる範囲で。そこには、ノルマも強制も義務もありません。

コメント(0)

There are no comments yet.