Slidearts

Image Compression Tips

Website Tips

Not everyone needs (or can afford) the full-blown version of Photoshop for editing photos for website use. BUT, there are things you need to know.

Don’t take a photo with your smartphone and upload it straight to your website. You’ll be loading an image 5 to 10 times the size that you probably need. Why upload something at 5000 x 3000 pixels when you only need something 500 pixels wide? Learn to resize and optimize your images, which will in turn, speed up the load time of your web pages.

There are a couple websites at your disposal for FREE that will assist you in resizing and optimizing (compressing) your photos before you upload them to your site.

Resizing your images for web use

http://webresizer.com is a great little website for cropping and resizing your images for use on your site. Don’t be confused by the ads on the site – and click the orange button that says “Resize photos here” to begin the process. You’ll be amazed at how much you can reduce the photos in both size and memory allocation.

 

Optimizing (compressing) JPG and PNG files for web use

One of the best little freeware online applications is TinyPNG (and TinyJPG)!

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

Why should I use TinyPNG?

PNG is useful because it’s the only widely supported format that can store partially transparent images. The format uses compression, but the files can still be large. Use TinyPNG to shrink images for your apps and sites. It will use less bandwidth and load faster.

 

Follow the link to TinyPNG.com and you’ll see a “drop zone” like shown in the screen shot above.  Drop your PNG file onto the box and watch the magic happen.  Remember, you can also drop JPG files in the same window.

So, you ARE using Photoshop…

In newer versions of Photoshop they have somewhat hidden the Export for Web function that was so useful in previous versions.  It is now found in the File – Export menu.  When saving JPG files for use on your website I typically start at a compression range of 20 to 40 on a scale of 0 to 100.  The number I use depends on the image I am optimizing – some require higher quality than others, but your goal is to have as small as files as possibly while still maintaining an acceptable looking image.

Enjoy.