インターネットでサイトを作るために軽量なページを作ることは結構大切であることは以前にも書きました。
中でも実際にサイトを閲覧されるユーザーも快適にページを見ることが出来る、ということが何よりも大きいのです。
高画質な写真を使ったページは一見すると綺麗ですが、一方でページの読み込みが非常に遅くなるという側面もあります。
そのためブログなどで定期的に写真を使う場合には、一定の品質を保ちつつ軽量化するということが必要なのですが、中には「どうしてもオリジナルの高画質の写真を使いたい！」という場合もありますよね。
単に高画質の写真を使ってしまうと、どうしても読み込み速度に影響を与えることは避けられませんので、少し工夫してみましょう。
高画質の写真を使いつつ、読み込み速度を高速化していきます
サイトが遅くなろうが関係無いという勇者は今から書く作業は必要ありません。
そのままサイトに高画質の写真を使いましょう。
軽量化しつつ、高画質の写真も使いたい方は以下を参考にしてみてください。
正確にはサイトのページそのものには高画質な写真は使いません。
事前に「①オリジナル高画質の写真」と「②サイト表示に最適化した軽量版の写真」の2種類を用意しておきます。
もちろんサイトに使うのは2つ目の軽量版の画像ですね。
高画質の写真については別途アップロードしておいたものリンクさせることで表示させます。
つまり②の軽量版画像をクリックすると高画質版が表示されるという形にしておくわけですね。
これでサイト自体は高速表示させておき、高画質版を見たい人だけはリンク先の高画質画像を閲覧していただくことが出来ます。
ちなみにサンプルを幾つか作ってみました。
①軽量版の画像です。クリックしても特に高画質表示はされません。
②Wordpressのメディア上に保存している高画質版へ外部リンクしています。
③Googleフォトに保存した高画質版画像へ外部リンクしています。
※保存後に写真を公開設定にしました。
高画質画像の保存先について
WordPressを使っている方はWordpress上に保存しておけば特に問題無いと思います。
他のブログサービスを使われている方はGoogleフォトなどを上手く使えば結構な量の写真をクラウド上に保存することが出来ますので適しているのではないかと思いますね。
ちなみにですが、今回はオリジナルの画像は1MB、圧縮後のデータは44KBとなっています。
データ量が単純に約1／22のなっていることがおわかりいただけると思います。
