Image Optimization – How to increase your website speed while maintaining quality.

Are your images loading too damn slow? Is is the internet speed or did you upload a 1gb image photo to your website?

Does it matter? Let’s talk about speed. If you’re image is too large, it will take longer to show on the screen than a smaller image by default depending on the internet speed and server.

There’s free optimization tools on the web as well but Photoshop will do it.

As you can see in this photo, I chose to see how different times and settings.

speed-image

 

I don’t think anyone that I know deals with 14.4Kbps internet speed anymore but if they did, holy fuck, the image on the right might take about 40 to 50 seconds to load, that’s almost a minute of my life. That’s ridiculous but the math is pretty close.  An image that is about 40Kb means that it loads 14 kilobytes per second. If you’re internet speed was 1 Mbps then it will take less than a second for a 42kb image.

Our modern and awesome new camera phones might be taking 25mb – 50mb images at a time and that’s bad ass but what happens when you upload 100 photos of 10gb of HD photos online? How long will it take it for that versus uploading web optimized photos ate about 100 images 100kb images.  You lose quality but the images will load faster. So how much quality does the image lose in order to gain speed? That depends.

So let’s go straight to it.

I grabbed this image of whiskey cause I like it a lot. You should try it too if you haven’t.

You’ll need Photoshop or might be able to use some kind of image software online. First you need to do is open the image.

Go to FILE -> Save for Web and Devices.
Choose “Low” in the preset, and look for the low quality on the right of it.

Check the size of image.

As you save it, rename it to something else or it will override your current image. You can do that as well if you don’t care about the current image.

The next thing you’ll do is see the difference.

 

So here’s some examples.

The first image below here is the regular one at 458kb.

image-normal
Original Photo (not saved for web)

The image on the top and bottom is about 1000 pixels wide depending on what device you are on but it is.

The image below here is the same size but different weight? 1000 pixels at 31.4kb.

Don’t believe me? right click and view the properties and see for yourself.

image-light
Saved as Web (optimized photo)

As you can tell the image quality dropped.

the optimized photo looks a lot more pixelated but it will load a lot faster.

In Photoshop, it will give you the options of low, medium, and high during the save as web option. Now its up to you.

I love beautiful high definition images but on the other end, I don’t care about slow loading mediocre ones.

The last issue that I noticed is the image itself. You can have a high quality image but the object is too dark or out of focus or

just not a professional photo. This is out my realm with photography. You probably need to hire a good photographer for that or

gain some skills, take a class, whatever. Well I hope this helps a little.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.