htmlでの画像の高速表示化について

Question

htmlファイルでの画像表示の高速化について

サーバーでhtmlのファイルに画像を読み込ませる時最も高速化できる方法はなんでしょうか？

質問に至った経緯は、
wordpressで記事を書いた時に画像がすぐに表示されるのですが、
同じサーバー内に同じ内容の画像でhtmlのみでサイトを作成したのですが、画像の表示速度がwordpressの方が早い気がします。

wordpressでは、wordpressメディア内の画像を読み込んでるのに対して、
静的htmlで作成した方は同ディレクトリ内のassetsに格納した画像を読み込んでいます。

wordpressのメディア内にアップロードした画像の方が表示が早い理由はなんでしょうか？
また冒頭の質問になるのですが、静的htmlで画像表示の最速化をする場合はどのような手段を取れば良いでしょうか？
amazon s3などの外部ファイルに画像を格納してhtmlで表示させることなどはできるのでしょうか？

画像を圧縮する以外での方法をご教示いただきたいです。

Comments

[miyabi_pudding]

> wordpressのメディア内にアップロードした画像の方が表示が早い理由はなんでしょうか？

これ、本当に全く同じ画像でしょうか？
というのも、assetsには、だいたい、同じ画像でも、サイズ違いの画像がいくつか格納されているものですので、
WordPressで表示しているのは、表示させたいサイズに最適化した方をプログラムが勝手に選出している可能性があるので、確認でした。

[TaikiNamioka]

ご質問ありがとうございます。
双方の画像は同じサイズになります。

というのも、固定ページを作成しているのですが、記事機能は使わずにwordpressの内部の画像をtemplateのphpに直に入れているので、自動での選別はされていないかなと思います。

[maisumakun]

> 画像の表示速度がwordpressの方が早い気がします。

本当にそうなのか、ブラウザのNetworkタブなどで確認してみてください。原因を考えるのは、優位に速いとわかってからの話です。

[TaikiNamioka]

wordpressだとwaitingの時間が短いので、表示が早いみたいでした。

Answer 1

原因がわからないのですが、
s3とcloudfrontで画像表示を高速化させることで対応しました

Answer 2

双方画像のサイズは同じですか？

Comments

[TaikiNamioka]

上記の回答と同じになってしまい申し訳ありません

>>ご質問ありがとうございます。
>>双方の画像は同じサイズになります。

>>というのも、固定ページを作成しているのですが、記事機能は使わずにwordpressの内部の画像を>>templateのphpに直に入れているので、自動での選別はされていないかなと思います。