タグ

pngとcssに関するgouei2001のブックマーク (2)

  • 画像ファイルの最適化とスプライト画像の作り方 | さくらのナレッジ

    Webサイトの最適化において、最も手軽にできて効果的なのは画像ファイル関連の最適化である。主に2つの最適化方法があり、1つは画像ファイル自体のファイルサイズを小さくして通信帯域を節約すること。もう1つは画像をまとめることによって通信回数を減らすことだ。それぞれのポイントや作業方法を解説していこう。 最適化できる画像はどのくらいある? Webサイトの各ページには何かしらの画像ファイルが使われている。これらに改善の余地があるかどうかは、GoogleのPageSpeedなどの診断ツールを使って簡単に把握できる(参考:「PageSpeedを使ってWebサイトを最適化・高速化しよう」)。サイト運営でこれまでとくに画像最適化について意識していなければ、「?%サイズを縮小できる」「画像ファイルをまとめる」などのアドバイスを受けることだろう。 ファイルサイズを小さくできるPNG形式 一般に利用されている、

    画像ファイルの最適化とスプライト画像の作り方 | さくらのナレッジ
  • ここから始めるモバイルパフォーマンス。手軽な画像最適化ツール7選 | DECONCEPTER

    ユーザーがページ表示に待てるのは2秒までと言われている。WEBサイトパフォーマンス最適化の話は多数上がっており、画像サイズやJavaScriptCSSの最適化、HTML上の外部リソースの読み込み順序、CDNの利用、DNSルックアップを減らす、HTTPリクエストの数を減らす、コンポーネントを圧縮するなどなど対応し始めたらキリがない。 実際の案件でしっかり最適化を行えているWEB製作者の方は意外に少ないのではないだろうか。今回は最適化のコトハジメとしてまず手軽に誰でも行える画像最適化に使えるツールを挙げてみたいと思う。 ローカルアプリケーション ImageOptim(Mac向け) ドラッグアンドドロップだけでJPEGやPNGの余計なメタ情報を削ってサイズダウンしてくれるアプリ。オフラインでがっと使えるのがうれしいマストツールだ。 ImageOptim — make websites and

  • 1