Use tiny images

25 July 2020 @ 9:36 AM by Michael S. White

Update 2022-05-08: See the article Excellent Image Compression Tool for another image compression tool option.

One of the big turn offs for poorly designed websites is image load times that take

F - O - R - E - V - E - R

What's worse, is when there is a page with a white background and white text is overlaid on slow loading image. The text — if it is even rendered — is invisible to most users until the image finishes loading.

It is common design practice where there is a large image that spans the width of the browser window. That can be fine if the image is optimized.

The Wrong Way to Compress Files

If you have worked with Photoshop or other graphic manipulation tools, you may have tried to reduce the image file size by manipulating the image quality when saving as a JPEG. You've probably had mixed results; often resulting in pixelated images.

TinyPNG to the Rescue!

The website https://tinypng.com is what I have been using to reduce the file sizes of images. It is a free resource where you can compress up to 20 images with a file size of a maximum of 5 MB each. It works with both PNG or JPG/JPEG file types.

TinyPNG Website Header
TinyPNG Website Header

After uploading the image(s), TinyPNG does its work and shows how much each file size is reduced. If there are multiple files uploaded, it gives the option to download all the resultant images in a .zip file.

I have been pleased with the quality of the resulting images. So much, that I ended up purchasing the Photoshop plugin so that I could compress more images that are of a larger file size. Although, I generally go to the website for the one-off compressions of images.

If you want your web pages to load fast, it is important to have small file sizes. Using a tool such as TinyPNG is a great option that I would recommend.

Michael.

Questions? Comments? Want more info? Contact me.