Archive for category optimization

PNG Optimization Guide: More Clever Techniques

  This post is a second part of the article Clever PNG Optimization Techniques that we posted last week. As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It’s a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG’s (PNG-24 in Photoshop), which doesn’t have any. Some of you may even think that this format is “unoptimizable”. Well, in this post we’ll try to debunk this myth. This post describes some techniques that may help you optimize your PNG-images . These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We’ll talk about grayscale, how to use fewer colors for optimization and also about reducing detail to minmize the file size. You may want to take a look at the following related articles: Clever JPEG Optimization Techniques Clever PNG Optimization Techniques Grayscale Photoshop can’t save grayscale PNGs, so you would have to use OptiPNG after saving black-and-white images, like this: optipng -o5 bw-image.png Grayscale images takes much less space than RGBs, because each pixel described with only one byte, not three: PNG-24 (Photoshop → true-color), 8167 bytes. PNG-24 (Photoshop + OptiPNG → grayscale), 6132 bytes Setting the Grayscale color mode (Image → Mode → Grayscale) for images prior to saving them in PNG is very important, especially for semi-transparent images (see Dirty transparency method for more information). Fewer Colors This is an alternative to the Posterization method of reducing colors in an image. Posterization can dramatically change the colors in your image, which is unacceptable if you have to blend the image into the background of your website. This method gives you more control over color but is limited to 256 colors. The method is basically to extract image data from the semi-transparent image (i.e. remove transparency), convert it to an indexed color and apply the original mask. Reducing the amount of colors will make image data stream packing by the PNG compressor more effective. Let’s see how it works. 1. Open the original image in Photoshop and duplicate it (Image → Duplicate). 63 KB 2. Remove transparency from the duplicated image (Filter → Photo Wiz → Remove Transparency): 3. Set the image mode to Indexed Color (Image → Mode → Indexed Color). In the new dialog window, enter the following settings: Colors: 190, Dither: Diffusion, Amount: 80%. 4. Set the image mode back to RGB and copy the image layer to the original file. Align the copied layer with the referenced one and apply its mask. Now save it to PNG-24: 51 KB As you can see, these easy steps have saved us 11 KB of the original image without any noticeable effect on image quality. But this method has another advantage: running OptiPNG on these images often saves even more bytes. In this example, the image’s size was reduced by 36%, from 51 KB to 33 KB. Instead of converting the image to Indexed Color mode, you can save it for the Web and apply the Influence mask to save extra bytes. Please note that this method is not the same as PNG-8 with palette transparency in Fireworks. In most cases fewer colors will give you more than 256 colors, so you will have to save the image in PNG-24, not PNG-8. Remember, solid red and 50%-transparent red are two different colors. Reducing Detail This technique is useful for optimizing shadows, reflections, glows, etc. The idea is to reduce detail in areas of the image that are barely visible. As you will recall from the Dirty transparency method, each pixel of a true-color image with transparency is described in four bytes: RGBA. The last one controls pixel transparency. For pixels whose Alpha value is too low (i.e. pixels that are barely visible), you can replace the RGB data for better image compression. Let’s try that. 1. Open iPod retro in Photoshop, again. 63 KB 2. As you can see, the radio has a reflection below it, which is a good candidate for optimization

How To Automate Optimization and Deployment Of Static Content

  A lot of traffic between users and your site comes from the static content you’re using to set up the user interface, namely layout graphics, Stylesheets and Javascript files. This article shows a method to improve the providing of static content for a web platform. Further, it will show you a way to automate the deployment of these files, so you can deliver them with least effort but with maximum performance. This tutorial will take some time to set it up, but it’s going to save you hours of work in the future and will improve your page speed significantly. 1. Why do I need this? There are several approaches to optimize the delivery of contents. Some use on-the-fly compression via the server itself or a scripting language, which costs performance and does not optimize the structure and content of the files. The method shown here prepares the files once and also merges and optimizes the code of CSS and Javascript files before the files are compressed, which makes the delivery of them even faster. Most browsers download only two files from a source at once . If a page needs to load more files from one domain, they get queued. More files to transfer mean more requests to the server, more traffic and more usage of the server’s performance. For the users of the platform, this means longer loading times. The more steps you need to deploy these files, the more space for mistakes is given. Deployment is boring. It’s far more exciting to invest some time once, to set up a reusable automation, than wasting time doing the same copy/paste/upload actions over and over again. Compare this two screenshots that show the same content before and after the optimization. The apricot colored parts of the bars stand for the status “in queue” while loading the page. The “in queue” status means nothing less than: Wasted time of the user. In this example, the loading time was reduced by 33% , the transferred data size was reduced by 65% and the number of requests to the server even by 80% . By using CSS sprites and merged CSS and Javascript files, there is no queue for the loading of the basic static content. 2. How to improve your static content Besides caching, there are some principles to make the whole setup of static content more efficient right from the start of development. Use CSS sprites for your layout graphics. It not only saves you a lot of traffic and loading time. If you got used to maintain your graphics like this, you’ll notice that it can be much more comfortable to have your layout elements e.g. in a single Photoshop file. Don’t blow up the loading time with your CSS and Javascript files. Combine the files of each kind into one single file , minimize them (e.g. by removing line breaks and other unnecessary characters) and compress them using GZip to get the load even smaller. This is covered in this tutorial. 3. Automating the deployment using Ruby This automation is written in the Ruby language . So you need to have Ruby installed on your development computer. The installation is pretty simple on Windows and Mac OS X even ships with Ruby. Please keep in mind: The scripts are completely independent from the language you’re using to run your site! You can also use them to deploy content e.g. for a PHP project. If you’re not used to work on the command line, the next steps might look cryptic to you. Don’t hesitate, clench your teeth and take care that you always pass the correct path of the files to deal with. You only have to go through this once. When you’re finished, all you need to do is to type one single command to start the whole process. To make it easier for you, this is the folder structure used for this tutorial: + css/ – fonts.css – grids.css – layout.css – reset.css – static.min.css (generated) – static.min.css.gz (generated) + js/ – framework.js – gallery.js – plugin1.js – plugin2.js – start.js – static.min.js (generated) – static.min.js.gz (generated) + deploy/ – batch – ftp.rb – gzip.rb index.php (or something similar) Requirements for this tutorial Don’t worry, besides Ruby you won’t need anything, that you don’t probably already have: A simple text editor to save the source code. A command line tool, like Windows cmd.exe or Mac OS X Terminal to call the scripts. A FTP account to try out the upload script. A project to enhance. Optional: The Firefox add-on Firebug (or something similar for other browsers), to see the enhancements afterwards.

How To Automate Optimization and Deployment Of Static Content

  A lot of traffic between users and your site comes from the static content you’re using to set up the user interface, namely layout graphics, Stylesheets and Javascript files. This article shows a method to improve the providing of static content for a web platform. Further, it will show you a way to automate the deployment of these files, so you can deliver them with least effort but with maximum performance. This tutorial will take some time to set it up, but it’s going to save you hours of work in the future and will improve your page speed significantly. 1. Why do I need this? There are several approaches to optimize the delivery of contents. Some use on-the-fly compression via the server itself or a scripting language, which costs performance and does not optimize the structure and content of the files. The method shown here prepares the files once and also merges and optimizes the code of CSS and Javascript files before the files are compressed, which makes the delivery of them even faster. Most browsers download only two files from a source at once . If a page needs to load more files from one domain, they get queued. More files to transfer mean more requests to the server, more traffic and more usage of the server’s performance. For the users of the platform, this means longer loading times. The more steps you need to deploy these files, the more space for mistakes is given. Deployment is boring. It’s far more exciting to invest some time once, to set up a reusable automation, than wasting time doing the same copy/paste/upload actions over and over again. Compare this two screenshots that show the same content before and after the optimization. The apricot colored parts of the bars stand for the status “in queue” while loading the page. The “in queue” status means nothing less than: Wasted time of the user. In this example, the loading time was reduced by 33% , the transferred data size was reduced by 65% and the number of requests to the server even by 80% . By using CSS sprites and merged CSS and Javascript files, there is no queue for the loading of the basic static content. 2. How to improve your static content Besides caching, there are some principles to make the whole setup of static content more efficient right from the start of development. Use CSS sprites for your layout graphics. It not only saves you a lot of traffic and loading time. If you got used to maintain your graphics like this, you’ll notice that it can be much more comfortable to have your layout elements e.g. in a single Photoshop file. Don’t blow up the loading time with your CSS and Javascript files. Combine the files of each kind into one single file , minimize them (e.g. by removing line breaks and other unnecessary characters) and compress them using GZip to get the load even smaller. This is covered in this tutorial. 3. Automating the deployment using Ruby This automation is written in the Ruby language . So you need to have Ruby installed on your development computer. The installation is pretty simple on Windows and Mac OS X even ships with Ruby. Please keep in mind: The scripts are completely independent from the language you’re using to run your site! You can also use them to deploy content e.g. for a PHP project. If you’re not used to work on the command line, the next steps might look cryptic to you. Don’t hesitate, clench your teeth and take care that you always pass the correct path of the files to deal with. You only have to go through this once. When you’re finished, all you need to do is to type one single command to start the whole process. To make it easier for you, this is the folder structure used for this tutorial: + css/ – fonts.css – grids.css – layout.css – reset.css – static.min.css (generated) – static.min.css.gz (generated) + js/ – framework.js – gallery.js – plugin1.js – plugin2.js – start.js – static.min.js (generated) – static.min.js.gz (generated) + deploy/ – batch – ftp.rb – gzip.rb index.php (or something similar) Requirements for this tutorial Don’t worry, besides Ruby you won’t need anything, that you don’t probably already have: A simple text editor to save the source code. A command line tool, like Windows cmd.exe or Mac OS X Terminal to call the scripts. A FTP account to try out the upload script. A project to enhance.