So here’s a scenario, you go on vacation and take lots of beautiful photos and you want to share them on your site. So you upload them all directly from your camera…all of a sudden your site seems to be running a little slower. It’s likely because you uploaded several photos that were very large and it’s slowing everything down.
The larger resolution is great for printing photos on photo paper, but the web is a little bit different. And in order to save your images you need to consider two things:
1) The image file format and 2) The compression. Getting these two right can reduce the files size by 5x. So the two formats we are going to talk about are Jpeg and PNG. You want to Use the jpeg format for images/photos that have a lot of color and you want to use the png format with simpler images or if you need a transparent background. So what’s the difference between the two?
PNG’s are not compressed that makes it great for higher quality, but the bad thing is that they also typically have a higher file size.
Conversely, you’ll have a jpg image which is compressed so you lose a little quality, but has a much smaller footprint or much smaller file size. Now you want to think about compression. All that means is you can reduce the overall file size of your image. But, you need a tool to do this. So what can you use to optimize your images for the web? Well the first one we’ll cover is Photoshop. Here, I have a rather large photo, and you can see the file size here. That’s pretty large for websites.
Go to file and choose save for web.
Once that comes up you’ll see the image size here, and you have different formats over here.
And when you click on the dropdown for JPEG or PNG you see the difference in file size and image quality, choose the one that is best for you to use.
Play with these settings to See the difference in file size and image quality and pick the best one to use. For instance I’ll pick jpeg high.
You see how much the files size drops. Once I’m happy with the size and quality, I can just click save.
Give it a name and my photo is ready to upload to my website.
Now we know that Photoshop is a large investment and it might not be the right choice for some. You also have a free alternatives such as GIMP that you can work with.
The next tool is TinyPNG which is a free web app and it compresses png files. They’ve also made compressing images a little bit fun. I’ll just upload a .png file,
and watch while tinypng compresses it and shows me the before and after.
And how much smaller it made the image. and from here i can download the file to my computer and now it’s ready to use on my website.
The last tool I want to cover is for the jpg file type and it’s called jpegmini.
On their home page they’ll show you a great example of how much their tool can reduce the image size without reducing the perceived quality. So I’m going to click on the try now button, upload one of my photos that needs reducing.
I’ll drag it over here
And you see its uploading once the upload is complete, jpegmini shows me the original size and the amount reduced. Again now my photo is ready to upload.
So use these techniques on all your photos to speed up your site.