Skip to contentコンテンツページを表示する


How to compress PNG images to speed up your websiteどのようにあなたのウェブサイトを高速化するためのPNG画像を圧縮する

LinuxのWebデザイン&開発

If you have a blog or a website with a lot of content sometimes the images can take a toll on the load time of the pages.場合は、コンテンツの多くにある画像は、ページの読み込み時間にしわ寄せが行くことができるブログやウェブサイトを持って。 There are a number of steps you can take to speed things up.そこにスピードアップするための手順の番号です。 If you analyze the loading of your website you might notice that the images take up a huge part of the load time.あなたの場合は、画像の読み込み時間の大部分を取るに気づくかもしれませんウェブサイトのロードを分析します。 Let's take a look at how you can compress your .png images to improve on this figure.がどのようにこの図を改善して、。png画像を圧縮することで見てみましょう。

We'll use the tool pngcrush for this purpose. pngcrush is a free and open source command line tool that, as the name suggests, compresses PNG images.我々はこの目的のためには、ツールpngcrushを使用します。pngcrush名前が示すように、PNG画像の圧縮は、自由でオープンソースのコマンドラインツールです。 Take a look at the projectsプロジェクトを見てみよう websiteウェブサイト for detailed information on how to use it.その使用方法の詳細については。 We will cover the basics in this article.我々は、この資料の基礎をカバーします。

Installationインストール

Most modern distributions of Linux such as Fedora and Ubuntu have pngcrush available directly in their default repositories. FedoraとUbuntuなどのLinuxのほとんどの最新のディストリビューションpngcrush直接そのデフォルトのリポジトリで利用している。 So, to install it on you Ubuntu computer execute the following command:ですから、あなたには、次のコマンドを実行するUbuntuのコンピュータにインストールする:

# sudo apt-get install pngcrush #須藤はapt - pngcrushをインストールする

On Fedora do the following: Fedoraでの操作を行います:

# yum install pngcrush #yumをpngcrushをインストールする

Usage用法

pngcrush optimizes a PNG graphics file by reducing the size of the files IDAT chunk. pngcrush最適化グラフィックスIDATチャンクのファイルのサイズを減らすことによってファイルをPNGです。 The process is not simple.プロセスは簡単ではありません。 The great thing about pngcrush is that the authors of the tool have simplified things for you. pngcrushについての素晴らしいところは、ツールの作者に物事を単純化しています。 They ship it with a great option – brute .彼らは偉大なオプションを付けて船- 総当たり When you use this option you effectively tell pngcrush to try and use the most suitable method to compress the image at hand.ときに、効果的にpngcrushしようとするように言うと手で画像を圧縮するために最も適した方法を使用するこのオプションを使用します。 There are about 114 different filters that can be used, so this option is mighty useful.そこは、使用することができます約114の異なるフィルタので、このオプションを強力役立ちます。 Here's how you would use it to compress an image:ここでどのように画像を圧縮するために使用することも:

# pngcrush -brute -e “.compressed.png” image01.png #pngcrush -ブルート- e"の"image01.png compressed.png

The two options used here are -brute which I just explained, and -e . 2つのオプションはここに使われている私だけを説明し、 総当たりの電子 The second option tells pngcrush what extension to add the the filenames. 2番目のオプションをpngcrushファイル名を追加するにはどの拡張子を指示します。 So after the process of crushing is complete the compressed version of the file image01.png will be called image01.compressed.png .だから後にファイルをimage01.pngの圧縮されたバージョンが完了すると破砕の過程image01.compressed.pngと呼ばれる。 you can change the extension if you like.の場合のような場合は、拡張子を変更することができます。

You can also slightly modify the above command to compress several PNG files in a directory.また、少しディレクトリ内のいくつかのPNGファイルを圧縮するため、上記のコマンドを変更することができます。 Execute the following command:は、次のコマンドを実行します:

# pngcrush -brute -d “/var/www/html/website/images/” *.png #総当たりpngcrush - d"を/ヴァール/ www / htmlに/サイト/画像/"*. PNG形式

The above command uses a new option, -d .上記のコマンドは、新しいオプションを使用する次元 This option tells pngcrush where to place the compressed image files after the compression is complete.このオプションは、圧縮後の圧縮された画像ファイルを配置するpngcrush指示は完了です。 The above command will compress all the PNG file in the current directory and place them in /var/www/html/website/images/ .上記のコマンドは、現在のディレクトリ内のすべてのPNG形式のファイルを圧縮し、それらの場所/ヴァール/ www / htmlに/サイト/画像/。

I strongly suggest that you read up more about this tool and its options on the projects website.私は強くあなたを、このツールは、プロジェクトのウェブサイトでそのオプションについての詳細を読むことをお勧め。 There are a lot of options that might help you speed up the process of compression or do a better job of it.存在する場合、圧縮の処理を高速化、またはそれよりよい仕事を助けるかもしれないのオプションがたくさんあります。 Put the new images into your website and watch your pages load faster.あなたのサイトに新しい画像を入れ高速に、ページの読み込みを監視します。

Posted inで掲示される Linux Linuxの , Web Design & Dev Webデザイン&開発 .

Get Simple Help tutorials just like this one in your email inbox every day - for free!メールの受信ボックスに毎日-自由のためにこの1つだけのような簡単なヘルプのチュートリアルを入手! Just enter your email address below:すぐ下にあなたの電子メールアドレスを入力します:

You can always opt out of this email subscription at any time.いつでも、このメール購読のはいつでもオプトアウトすることができます。

0 Responses 0返信

Stay in touch with the conversation, subscribe to theご滞在に触れるのは会話では、を購読する RSS feed for comments on this post RSSでこの記事のコメントのフィード .



Some HTML is OK 一部のHTML OKです

or, reply to this post via または、このポストを介して返信 trackback トラックバック .