不動産ホームページを運用する際に気を付けたいこと -画像編-
物件写真やバナー、日記(ブログ)、新着情報ページ、特集ページやその他独自コンテンツなど不動産ホームページでは画像を利用するシーンが非常に多くあります。
今回はその利用シーンが多い、不動産ホームページでの画像の取り扱い方について気を付けたいポイントをご紹介いたします。
目次
- 何を気を付ければよいのか
- なぜ気を付けた方がよいのか
- どのような時に気を付けるのか
- どのように画像の最適化を行うのか
何を気を付ければよいのか
気を付けたいポイントとは、、、
「ファイル容量が大きすぎる画像」の利用です。
なぜ気を付けた方がよいのか
WEBページが表示される際に、ブラウザはサーバーと通信を行いサーバーから送信されてきたデータを表示しています。
この通信を行う際に、ファイル容量が大きい画像がページに多く使われていると通信する量が多くなり、結果としてページの表示速度の低下につながってしまいます。
皆さんも一度は経験があるかもしれませんが、ページの表示速度が遅いと閲覧者はストレスを感じてしまいページから離脱する可能性が高くなります。
更新を頑張って多くの方にホームページへ来ていただいても、表示速度が原因で離脱されてしまっては意味がないですよね。このような事を起こさないためにも適切な画像の利用を心がけるようにしましょう。
どのような時に気を付けるのか
特に気を付けたいのは、デジタルカメラやスマートフォンなどのカメラ機能で撮影した画像をそのままの画像サイズ(横幅x高さ)で利用してしまうケースです。
画像サイズが大きいと比例してファイル容量も大きくなってしまいます。
このケースはページ上では適切なサイズに見えても、実際にページで読み込んでいる画像は２倍以上の大きさの画像が設定されてしまっている場合があります。
システム側で画像サイズを自動的に調整してくれるものもありますが、直接画像を掲載する場合やシステムで対応されていない場合、自由に選べてしまう場合などは気を付けましょう。
どのように画像の最適化を行うのか
とはいったもののどうやって画像を最適化すればよいのかわからない という方もいらっしゃると思いますので具体的な方法をご紹介いたします。
大きな手順としては、下記の流れとなります。
１．表示させる箇所の画像サイズを確認する。
２．掲載する画像を「１」で確認した画像サイズにリサイズ・トリミングする。
３．画像を軽量化（圧縮）する。
１．表示させる箇所の画像サイズを確認する。
まずは画像掲載箇所の表示サイズを確認します。
システムで設定されている場合とHTMLなどで直接設定する場合があります。
前者の場合はシステムのヘルプや管理者に確認していただき、後者の場合はimgタグやスタイルシートで設定されている値を確認してください。
２．掲載する画像を「１」で確認した画像サイズにリサイズ・トリミングする。
Photoshopなどの専用ソフトが無い場合はWindowsに標準搭載されているペイントツールを使います。
画像を右クリック、「編集」を選択し、ペイントツールで編集したい画像を開きます。
「サイズ変更」のボタンをクリック、もしくは「Ctrl＋W」のショートカットキーで「サイズ変更と傾斜」ウィンドウを開きます。 単位を「ピクセル」にし「１」で確認したサイズを入力、「OK」ボタンをクリック。
画像が設定したサイズに変更されますので、画像を保存します。
３．画像を軽量化（圧縮）する。
画像ファイルは適切なサイズにする事以外にも、 圧縮する事で 「見た目はほぼ変わらずファイル容量を削減」 することができます。
これは全ての画像ファイルに関する事です。 相手に画像ファイルを渡す時やどこかに格納しておく時の容量の節約にもなります。
例として、下記画像は同じように見えますが実際のファイル容量は大きく異なります。
最適化する方法としては、無料のWEBサービスが便利です。
今回は「png」と「jpg」形式のファイルが圧縮できる「TinyPNG」をご紹介いたします。
「TinyPNG」 ： “https://tinypng.com/”
このサービスは、最大で20枚までの画像ファイルを同時に圧縮することができます。
使い方は簡単で、中央の枠に画像をドラッグアンドドロップするだけです。 (枠をクリックし、直接ファイルを参照する事も出来ます。)
しばらくすると画像が圧縮されますので、「download」または「Download all」のボタンをクリックし画像をダウンロードします。
元画像次第ですが見た目はほぼ変わらず、画像容量だけ削減することができます。
このようなちょっとした対策がユーザーの満足度向上に繋がりますので今まで気にされていなかった方は、新たに設定する画像や既存の画像を更新される際は気を付けてみてください。
本コラム関連製品
不動産ホームページ制作ソフト「WebManagerPro3」
関連記事はこちら
不動産業務ソフトウェアのご紹介
-
物件管理業務支援
賃貸管理物件総合管理システム 賃貸革命
-
入居者管理業務支援
入居者コミュニケーションサービス くらさぽコネクト
-
仲介業務支援
不動産仲介業務支援サービス 不動産BB
-
Web集客支援
不動産ホームページ制作ソフト WebManagerPro3
