スマホサイト 容量問題について
こんにちは!厳しい寒さは昨日で終わりのようですね!
みなさまいかがお過ごしでしょうか?
前回に引き続きのスマホネタ。容量問題についてまとめたいと思います。
****************************************************
目次
1.ファイルの容量を減らすためにすべきこと
2.利用すると便利!サービス各種
3.ファイルサイズの規約について
************************************************************
1.ファイルの容量を減らすためにすべきこと
スマホサイトはなんといっても軽さと情報凝縮が大切!
そんなわけで以下のポイントを押さえて作ってみましょう
①ファイルをなるべく少なくする。
CSS,jsなどはリセット、スタイルなどを同じファイルに!
②改行や空白なども容量にカウントされてしまうため削る。
jqueryなどを使うとどうしてもファイルが増え、容量増加の原因となってしまいます。ファイルをそれぞれまとめることで、コンパクトにしましょう。
*********************************************************
2.利用すると便利!サービス各種
CSS Minifyというサービスを使う。
http://cssminifier.com/
日本語訳版
http://translate.google.co.jp/translate?hl=ja&sl=en&u=http://cssminifier.com/&prev=/search%3Fq%3DCSS%2BMinify%26client%3Dfirefox-a%26hs%3Dj5Y%26rls%3Dorg.mozilla:ja:official%26hl%3Dja
④JSはこれ
http://jscompress.com/
※必ずバックアップを!!
⑤img圧縮はこちら(jpgやgifもOK)
http://www.punypng.com/signup
HTML以外すべてのファイルが圧縮できるのですね!少しでのファイルを小さくするために大事なことです。
********************************************
3.ファイルサイズの規約について
●画像データは2メガピクセル以内
JPEGデータのピクセルサイズは32メガピクセル以内
●アニメーションGIFのデコードサイズは2MB以内
●Canvas要素は2MB以内
●input type="file"によるファイルアップロードは原則不可
●HTML CSS Javascript ストリーミングファイルは10MB以内
●javascriptの実行時間は10秒以内
●Javaアプレット・Flashは使えない
PCとの大きな違いはFlashが使用できなくなったことでしょう。
CSS3にはanimationやtransitionなどのプロパティが登場し、JSと組み合わせることで、Flashに近い動作も可能となってきました。
今日は以上となります。御精読ありがとうございました。