画像圧縮はホームページ制作は特に重要!知っておきたい画像テクニック

株式会社アシストではホームページ制作に利用する「画像や写真」を加工や圧縮をしサイト制作に利用しています。

年間5000サイト以上のホームページ制作から構築した多彩なノウハウにて高品質な対応&CMS構築を実施しています。

本日は基礎知識的である画面圧縮などにつきまして、簡単にご紹介させて頂きます。

ホームページ制作における画像の注意点

画像注意点

画像に関するトラブルはどのようなものがありますか?

ホームページに画像は必須です。各ページの画像の使い方一つでユーザーに与えるイメージは大きく変わってきます。画像が適切に表示されていないと、最悪の場合、サイトや企業の信頼性が下がってしまいます。また、ユーザーに嫌われるだけでなく、アップした画像圧縮が原因で、検索順位を決定する Google のアルゴリズムからも嫌われる可能性があります。そうなると検索順位が下げられ、集客のためのスタートラインに立つことができないこともあります。

ホームページの画像圧縮に関する代表的なトラブルと原因は以下のようなものが挙げられます。

• 画像を表示されるように設定しているはずだが、あるべき場所に全く表示されていない【HTML / CSS 問題】

• 画像の縦と横のバランスが本来のものと違っておかしい【HTML / CSS 問題】

• 画像は表示されているが、本来のものより画質が悪くて見えにくい【画像サイズの問題】

• 画像の読み込みに時間がかかり、ページがいつまでたっても表示されない【画像のファイルサイズの問題】

他にも様々画像に関するトラブルはありますが、多くの原因は、元の画像ファイルに問題があるか、サイトのHTML / CSS に問題がある場合がほとんどです。

ホームページ制作における画像のトラブルシューティング

トラブルシューティング

HTML / CSS をしっかり確認しましょう

画像があるべき場所に表示されていなかったり、縦と横の比のバランスがおかしかったりする場合は HTML / CSS 構造を確認しましょう。画像に関する HTML / CSS の基本は以下です。

• img src=”  ”:「イメージソース」タグで、画像データがどこにあるのかを示しています。

• alt=”  “:「オルト」タグで、文字情報で画像の説明が入ります。

• height=”  “ :「ハイト」タグで、画像の縦の大きさを設定します。

• width=”  “:「ウィトゥス」タグ( 「ウィス」や「ワイス」などとも言われる)で、画像の横の大きさを設定します。

画像が表示されておらず、altタグに設定した説明文が表示されている場合は、タグの入力を間違えている(誤字がある)場合がほとんどです。また、縦と横の比のバランスがおかしい場合は、 height タグと width タグの設定が適当になっていることがほとんどです。元の画像の縦横比を確認し、height タグと width タグの大きさを元の画像の縦横比に合わせることで修正することができます。

画像サイズ

画像のサイズを調整する方法を教えてください

ホームページで表示した際に本来のものより画質が悪くなっている(荒くなっている)場合は、元の画像サイズが小さいことが原因として考えられます(ホームページで表示している時は、小さな画像を引き伸ばしている状態です)。そのため、元の画像を大きくなるようにリサイズしましょう。 

Windows であれば標準搭載されている、「ペイント」のアプリを使って画像のサイズを変えることができます。他にもフリーソフトやブラウザ上でのサービスで画像サイズを変更できるものは数多くあります。もちろん、 Mac で動くものもたくさんあります。 

また、同一ページ上に複数の画像を揃えて表示したい場合は、Microsoft の PowerPoint や  Adobe のPhotoshop などのソフトを使い、事前にトリミングして画像の範囲やサイズを調整して揃えておくと良いです。

画像のファイルサイズを軽量化する方法を教えてください

ホームページを表示する際に、画像の読み込みに時間がかかる場合は画像のファイルサイズの大きさが原因であることが多いです。ウェブサイトで表示する画像は、100kb前後の大きさまで圧縮する必要があります。特に、この部分はSEO にも影響するので確実に処理をしておきましょう。

ファイルサイズを軽量化する際に役立つサービスを紹介します。どのサービスも、 確実に軽量化しつつも画質は落とさないので安心して使用できます。 

【TinyPNG】

ブラウザ上でファイルを圧縮できる Web サービスです。JPEG と PNG の画像ファイルを減色することで7~8割の重さをカットできます。

【JPEG mini】

画質を維持しながらJPEG 画像の重さを最大8割カットするアプリです。無料で使える JPEG mini Lite もあり、 Mac / Windows もどちらでも使えます。 

【compressor.io】

こちらもブラウザ上でファイルを圧縮できる Web サービスです。JPEG と PNG だけでなく、GIF や SVG といった形式の画像でも圧縮することができます。 

【EWWW Image Optimizer】

WordPress のプラグインです。画像をアップすると、サイトの表示に適したサイズまで自動で圧縮してくれます。 WordPress 限定ですが非常に便利です。

画像動き

ホームページを表示した際は画像に動きを出せますか?

高度なホームページでは、画像にアニメーションが加えられていたり、カーソルを持っていくことで文字アイコンのサイズが変わったり、色が変化したりします。これらは HTML / CSS だけではなく、 JavaScript やjQuery 、CSS3 とプログラミング言語が使われています。これらの言語は HTML / CSS と比較するとより高度な技術が要求されるので、初心者の方であれば、エンジニアや専門のホームページ制作会社に相談することをお勧めします。

NEW

ARCHIVE