【2019年最新SEO】のアルゴリズムの研究と対策を行っています。格安SEO対策の東京SEOメーカーは業界No.1最安値1ワード1日50円~。確かなSEO技術で上位表示を獲得します。

画像の最適化方法

画像の最適化方法の一つに「圧縮」があります。圧縮は大別して2種類があり、一つは「Lossless」、もう一つが「Lossy」です。前者はデータが損なわれませんが、後者は相応の犠牲を払い、より大きな圧縮を可能にします。Lossyは圧縮率を選択することも可能で、80以下を選ばない限り、ユーザーに感じ取られるほどの劣化をきたしません。圧縮ツールも多様ですが、人気の高いツールは「Imagemin」でしょう。Webpack、node.js、gulpに対応しており、JPG、PNG、GIFのプラグインも備えています。

画像の最適化方法としては他に、「サイズの適正化」が挙げられます。例えば同じwebページであっても、デバイスに合わせて画像のサイズが自動的に切り替われば、無駄な読み込みを省けますし、CPUの使用割合も適度に保つことが叶います。多くの先進的なサイトでは数種類の画像サイズが用意されており、Instagramなどもその一例です。画像サイズを自動的に選択するツールには「Sharp」「Jimp」があり、いずれもnpmにパッケージされています。HTMLを記述する際は「px」を避け、「w」を使います。後は「srcset」「sizes」が示す大きさを判断材料として、ブラウザがダウンロード対象を選択する仕組みです。

画像の最適化方法として一線を画す技術が「Lazyload」です。必要な時以外はリソースを読み取らせないようにすることで、結果的にユーザーの実感する速度を上げる方法です。リソースは画像に限らず、JavaScriptの読み込みにも応用できます。例えば「Spotify」はLazyloadを活用しており、18MBのページのうち、1MBの分量だけを読み取らせて表示するなどしています。現在はJavaScriptとセットで利用されることが一般的ですが、Chromeは近くlazyloadをネイティブサポートするとも言われており、次世代の技術として注目されています。
 

 

格安SEOのTOPページへ戻る