タグ

ブックマーク / 1000ch.net (2)

  • 画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net

    GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで(例えば)100KBとか平気で増えるので、 これではCSSJavaScriptのファイルサイズを減らしても末転倒です。 (もちろんCSSJavaScriptも結合と圧縮は非常に重要です。) 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま

    画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net
    oki448jp
    oki448jp 2014/02/06
    画像の最適化をCLIだけで行うgrunt-imageを作った
  • 一歩進んだHTML/CSS/JSを目指すために | 1000ch.net

    2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s

    oki448jp
    oki448jp 2013/08/04
    一歩進んだHTML/CSS/JSを目指すために
  • 1