Shrinking transparent images

Shrinking transparent images

Check out TinyPNG at https://tinypng.com/

If you’ve ever done any graphics work attached to a website, you know that speed is one of the most important aspects of your graphic being effective. After all, if it takes 8 seconds for your image to load the chances are that most users will figure the page is stuck and move on.

When you’re creating most graphic files, preferably in photoshop, you have the option of reducing the file size fairly easily. When you’re saving the finished image you can choose “low, medium, high or maximum” and can even watch the file size adjust to the setting you choose. This works great for .JPG files which are probably the most common image file on the web.

However, one of the drawback to .JPG files is the inability to create a transparent section of the image. This is a big deal when you’re using “cut-outs”, text graphics over a background, or a myriad of other graphic circumstances when you want part of the photo to show, but not the whole rectangular image background.

So, that’s when you create a .PNG file. You can create a PNG file with many photo editing programs, and basically here’s how it works: Let’s say you create a new image 200px wide and 100px tall for a logo, then enter your letters or small graphic. If you were to save that file as a JPG, when you add that JPG image as your logo, it would paste your letters and graphic just as you entered them, but with a white or solid background the size of the full image behind it. Not that big of a deal if your image background is white and your web background is white, but if you have a pattern or texture web background, you JUST want the letters and graphic to show. That’s why you save the file as a .png. Problem is that unlike JPG files, PNG files don’t let you modify the file size and PNG files are usually larger files, which unfortunately means longer load times.

So, here’s where tinypng.com comes in. It’s free, like so many very useful developer help sites, and even more important for the average user, it’s really simple. Just go to their site and upload your PNG image (let’s say it’s called “mylogo.PNG”) using their easy to find “Upload” box right at the top of the page. Tinypng shows you the uploaded file size before about 5 seconds (depending on image size) later, Tinypng reduces your image to approximately 20%-25% of it’s original file size without a major effect on quality at all. You then just click download and your new “mylogo.PNG (1)” will be yours to keep.

To compare quality, check out these examples or visit their site:

steamboat2

479kb

steamboat2 (1)

125kb

This site does exactly what it says and is a lifesaver if you do a lot work with transparencies. Visit it at https://tinypng.com/

Share on FacebookTweet about this on TwitterPin on PinterestGoogle+Share on LinkedInShare on StumbleUponEmail to someone