ImageMagickを使用して画像を全面的に圧縮する方法
I
mages as a percentage of page weight for the Alexa top 10 global web sites
画像がウェブサイトに占める割合はますます重くなっている.画像をより最適化することで、Webサイトの速度を向上させることができます.ブロードバンドトラフィックを削減します.
ユーザーが自分でアップロードした画像については、簡単にcssでサイズを制限することはできません.このように、画像をロードするたびに大きな図がロードされるからです.余分なブロードバンドを使用し、ページのロード速度に影響します.実際の表示に応じてズームする必要があります.例えば、ユーザーアルバムの画像サイズは500 x 300を超えてはいけないと思います.
ImageMagickで処理するのは簡単です
Exif情報はデジタルカメラが撮影中に収集した一連の情報であり、これらの情報はよく知られているjpgファイルの頭部に置かれている.すなわち、Exif情報はJPEG画像ファイルフォーマットに埋め込まれた撮影パラメータのセットであり、主に撮影時の絞り、シャッター、ISO、日付時間など当時の撮影条件に関する様々な情報、カメラブランドモデル、色コード、撮影時に録音した音声や、全地球測位システム(GPS)などの情報.簡単に言えば、バカカメラの日付印刷機能のようなものですが、Exif情報に記録されている情報はもっと詳しく完備しています.ただし、Exif情報を持つJPEG画像ファイルは、通常のJPEGファイルよりも若干大きい.また、PSのようなソフトで処理された画像には「プログラムcomments」があります.プロの写真系サイトでなければ、これらの情報は役に立たないので、削除することができます.
多くの場合、私たちのウェブサイトはそんなにはっきりした画像を必要としません.適量のJPG画像の圧縮比を調整すると、画像の大きさが減少し、肉眼では品質が圧縮された画像を見分けることはできません.通常75%が最適な割合です.
上記の手順は、一度に実行できます.
以上、JPG形式の処理方式について説明したが、BMP、GIF、PNGなどの形式の処理について説明する.
BMPに対して直接JPGに移行すればよい.上のように処理します.
GIFとPNGは特殊なようです.GIFのいくつかの特性(アニメーション効果、透明性など)はJPGではなく、実際の状況に応じて回転するかしないかを選択することができ、jpgに変換すると、最初のフレームを取るにはこのようにする必要があります.
PNGは、PNGピクチャcolorの数を減らすことで圧縮の目的を達成することもできる.しかし、この方法で圧縮された画像は明らかに歪みが見え、鋸歯状になっている.
実世界のPNGピクチャ(通常は写真)については、まずJPGに変換し、上記の方法で圧縮するのが一般的です.
ただし、透明または半透明のPNGピクチャは、JPGに変換すると透明部分が黒くなることに注意してください.のユーザーのアイコンを作るときはJPGに変えないことをお勧めします.みっともない~~~
本人の顔は毒殺された.
画像拡張子について
ほとんどのサイトでは、ユーザーがアップロードした画像(アイコン、アルバムなど)を特定のフォーマット(一般的にjpg)に統一するのが好きであることが分かった.このような潜在的な弊害は、ImageMagickのようなソフトウェアで処理するときに拡張子に基づいて暗黙的なフォーマット変換を行うことです.
個人的には、画像を保存するときに拡張子を付けないほうが柔軟だと思います.
注:上のコマンドラインをmini_magickはrailsに書き換えるのが簡単です.mini_magick本質はシステムコマンドを呼び出すことができますか~~
links:
本稿では、ユーザーがアップロードした画像処理について、サイト自体の画像(header、bannerなど)処理「Even Faster Websites」の10章に詳しく書かれています.
http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=756
その他のImageMagickの使用方法:
http://www.imagemagick.org/script/index.php
mages as a percentage of page weight for the Alexa top 10 global web sites
画像がウェブサイトに占める割合はますます重くなっている.画像をより最適化することで、Webサイトの速度を向上させることができます.ブロードバンドトラフィックを削減します.
1.ユーザーがアップロードした画像を拡大・縮小する
ユーザーが自分でアップロードした画像については、簡単にcssでサイズを制限することはできません.このように、画像をロードするたびに大きな図がロードされるからです.余分なブロードバンドを使用し、ページのロード速度に影響します.実際の表示に応じてズームする必要があります.例えば、ユーザーアルバムの画像サイズは500 x 300を超えてはいけないと思います.
ImageMagickで処理するのは簡単です
convert -resize "500x300>" input.jpg output.jpg # 500x300 ， 。 2.異なるスケールサムネイルを生成する
一般的なアルバムなどのアプリケーションでは、サムネイルやプレビュー図が提供されています.これらのサムネイルは、同じようにcssでサイズを制限することはできません.画像ごとに異なる割合のプレビュー図を生成します.3.余分な情報を取り除く
Exif情報はデジタルカメラが撮影中に収集した一連の情報であり、これらの情報はよく知られているjpgファイルの頭部に置かれている.すなわち、Exif情報はJPEG画像ファイルフォーマットに埋め込まれた撮影パラメータのセットであり、主に撮影時の絞り、シャッター、ISO、日付時間など当時の撮影条件に関する様々な情報、カメラブランドモデル、色コード、撮影時に録音した音声や、全地球測位システム(GPS)などの情報.簡単に言えば、バカカメラの日付印刷機能のようなものですが、Exif情報に記録されている情報はもっと詳しく完備しています.ただし、Exif情報を持つJPEG画像ファイルは、通常のJPEGファイルよりも若干大きい.また、PSのようなソフトで処理された画像には「プログラムcomments」があります.プロの写真系サイトでなければ、これらの情報は役に立たないので、削除することができます.
convert -strip input.jpg output.jpg 4.圧縮比の調整
多くの場合、私たちのウェブサイトはそんなにはっきりした画像を必要としません.適量のJPG画像の圧縮比を調整すると、画像の大きさが減少し、肉眼では品質が圧縮された画像を見分けることはできません.通常75%が最適な割合です.
convert -quality 75% input.jpg output.jpg 上記の手順は、一度に実行できます.
convert -resize "500x300" -strip -quality 75% input.jpg output.jpg 以上、JPG形式の処理方式について説明したが、BMP、GIF、PNGなどの形式の処理について説明する.
BMPに対して直接JPGに移行すればよい.上のように処理します.
GIFとPNGは特殊なようです.GIFのいくつかの特性(アニメーション効果、透明性など)はJPGではなく、実際の状況に応じて回転するかしないかを選択することができ、jpgに変換すると、最初のフレームを取るにはこのようにする必要があります.
convert -format jpg input.gif input.jpg PNGは、PNGピクチャcolorの数を減らすことで圧縮の目的を達成することもできる.しかし、この方法で圧縮された画像は明らかに歪みが見え、鋸歯状になっている.
実世界のPNGピクチャ(通常は写真)については、まずJPGに変換し、上記の方法で圧縮するのが一般的です.
ただし、透明または半透明のPNGピクチャは、JPGに変換すると透明部分が黒くなることに注意してください.のユーザーのアイコンを作るときはJPGに変えないことをお勧めします.みっともない~~~
本人の顔は毒殺された.
画像拡張子について
ほとんどのサイトでは、ユーザーがアップロードした画像(アイコン、アルバムなど)を特定のフォーマット(一般的にjpg)に統一するのが好きであることが分かった.このような潜在的な弊害は、ImageMagickのようなソフトウェアで処理するときに拡張子に基づいて暗黙的なフォーマット変換を行うことです.
個人的には、画像を保存するときに拡張子を付けないほうが柔軟だと思います.
注:上のコマンドラインをmini_magickはrailsに書き換えるのが簡単です.mini_magick本質はシステムコマンドを呼び出すことができますか~~
links:
本稿では、ユーザーがアップロードした画像処理について、サイト自体の画像(header、bannerなど)処理「Even Faster Websites」の10章に詳しく書かれています.
http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=756
その他のImageMagickの使用方法:
http://www.imagemagick.org/script/index.php