Compression of PNGs and JPGs


(Trey Yancy) #1

The Photoshop plug-in TinyPNG-TinyJPG from Voormedia will slim your PNGs and JPGs way down.

The plug-in costs $50 (and is worth every penny) and there is a free drag- and-drop converter on their website that can handle up to 20 files at once. Examples compared with PS save for web / PNG: Logo – was 113 K, now 6K; Flow chart – was 194K, now 54 K.

Example attached: was 369 K, now 72 K:

To convert manually choose export, select the plug-in, specify PNG or JPG and set the output location. If you set up a batch operation in Photoshop, the replace & close functions can be goofy, transforming the files but then closing without saving (a Photoshop issue). In many cases it is best to create an empty target folder on your desktop and point the batch to that folder, then copy the processed files back to the source folder.

Here’s the URL: https://tinyjpg.com

One more thing – An old trick that web designers have been using for twenty years to save load time (kind of a big deal in the days of V.32bis modems) is to take a gradient that is only 1 px wide and tiling to fill a background. If we want to use a huge image, such as a PNG image of translucent clouds, you don’t have to use a full-width image in your project. Depending on the image, you can distort it to a narrow width (as much as 25% for a blurry image such as soft clouds) and use Hype to stretch it to the correct proportions, thereby saving on the load time.


#2

Many thanks for sharing the tip


(Trey Yancy) #3

Here’s something for those who have not used automation in Photoshop. This is pretty simple. Do a search for Photoshop automation for detailed instructions.

You can process a ton of images quickly and in many ways. Here’s an example using TinyPNG-TinyJPG:

  1. Create a folder on your desktop, naming it whatever makes sense (“Processed Art” or whatever).
  2. Open a PNG in Photoshop.
  3. Open the Actions palette, click on the Create new action button, then name the action “Tiny PNG”.
  4. Click on the red Record button.
  5. Select Export > TinyPNG and TinyJPG.
  6. Click on the PNG button and select the Processed Art folder as the target and hit the save button.
  7. Hit the black Stop Recording button.
  8. Now open a JPG in Photoshop, create a new action named “Tiny JPG” and hit the record button. Repeat the above steps, but click on the JPG button instead.

Now try this with a group of images at the same time:

  1. Open a number of JPGs or PNGs in Photoshop.
  2. Select Automate > Batch and select the desired action (TinyPNG or TinyJPG).
  3. For the Source drop-down select Opened Files.
  4. For the Destination, specify your Processed Art folder then click on the Okay button.

For large numbers of files:

  1. Create a Source folder and drag in all the images you want to process. Do not open any images in Photoshop.
  2. Select Batch, set the source to the Source folder instead of Opened Files.
  3. Hit the Okay button.

Caveat: Make sure your source PNG files are in RGB format rather than Indexed or you’ll get a file format error.


#4

Good Tip.

If you’re on a Mac you can also get imageOptim (free) works great too :slight_smile: not a plug in for Photoshop but stand alone.