attention admin about comments trackbacks you may also like

webp

2019年03月28日
ブログいじり
2

下記のブログ様を参考に 真似て画像形式webpを使用してみました。

Google開発の新画像フォーマットWebPをFC2ブログで使ってみました

これからの時代の標準画像形式はWebPだよね。WebPってナニ? おいしい?Googleが開発したWebPという画像形式について、半年程前からその動向を気にしていました。アニメラベルを作る際に大きなサイズの素材画像を求めてロシアや中国のサイトに辿り着くことがあるんですが、そこから拾ってきた画像が拡張子WebPだったりします。 僕が持っている画像処理ソフトで開くことができずに、何だコレ?という感じでWebPに...

前回の記事の画像を全てwebpにしてみました。上記のブログ様紹介のwebp変換サイトで画像変換をしています。

前記事の画像を変換
変換前88.1KB、変換後40.6KB。

変換前のjpeg画像と変換後の画像の大きさは(横・縦)は同じですが、容量は約半分に。元の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!

ブラウザのIEは、webp形式に対応していませんから、上記紹介のブログ様のように、記事には jpeg画像と webp画像、同じ画像を2種類用意します。

jpeg画像→最適化→webp形式・・・

webp形式の画像はFC2にはアップできませんので上記のブログ様を参考にされて下さい。当ブログはFC2とは違う場所にアップしています。

さて、前回の記事をアップし直しまして、測定サイトで比較しました。

使用前

使用前のスコア

使用後

使用後のスコア

記事の中の画像だけではなく、一部の画像はbase64変換してみました。

画像をBase64にエンコード(変換)してHTMLに埋め込んでサイトの表示速度を速くする

Googleの検索エンジンでWebページの表示速度が速いと、ユーザーにストレスを与えないので検索順位が上がるなどいろいろ言われている中で、表示速度を速くする方法の1つとしてHTTPリクエストを減らすという方法があります。今回は、画像をBase64にエンコード(変換)してHTMLに埋め込んで表示速度を速くする方法をご紹介します。

なかなか面倒くさいですね。

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

コメント(2)

There are no comments yet.

ミドリノマッキー  

2019/04/05 (Fri) 13:58

うわあ、お久しぶり。よくぞ訪ねてくださいました。
昨年夏に休んで以来ですから半年以上。
ご無沙汰でした。お元気そうで何よりです。
ボチボチややっていますのでこれからもよろしくお願いします。

遠太  

2019/04/05 (Fri) 18:05

ミドリノマッキーさん

こんにちは。はい、元気にしております。
偶然、他のブログ様より訪問しまして、びっくりしました。

こちらこそよろしくお願いいたします。