Reducing Image Size

Up Early Designs

Reducing image size plays a significant role in increasing website speed.  It’s a simple process. One that uses almost any free, online tools available today.

And yet many fail to do this. Even major brand websites (more below). As a result, time is spent loading an image that is far bigger than the application calls for.

Reducing Image Size

No one likes to wait for a website to load. In today’s society we want everything to happen instantaneously.

Therefore website owners need to do whatever they can to increase speed. And reducing image size is often the simplest method. And the best return on one’s time.

Example 1

Below is an image that is (a) bigger than needed dimensionally and (b) higher in resolution.  It’s over 600 kb and 3000 by 2000 pixels (roughly 72 pixels equal one inch).

The first glaring problem is the fact that it is so big dimensionally. The image below is being forced, by website design,  to fit into a “box” that is 300 by 200 pixels. Roughly 10% of the original size.

Example 2

Here’s the same image, now lower in both size and resolution. It is 300 by 200 pixels. The same size the website “box” is asking for.

And it is about 95% less in overall file size at roughly 27kb.

Can you tell any difference in quality? There is a slight difference in layout due to the much larger size of example 1 being forced into a different size box.

But quality wise? Hard to tell.  If at all.

Page Speed

OK, so does it really matter? Yes. Yes it does. But to see if you have a problem to fix or not, here is a real simple test.

Visit Google’s Page Speed Insights  and enter any website address. You’ll receive a grade for both mobile and desktop performance.

And equally important, you’ll see ways to improve speed.  You may need to log into or create a Google Webmaster Tools account to use this tool.

Now if I were a betting man, I’d bet the vast majority of those who run this test will indeed find their images need to be reduced.

That they are wasting user time and resources to load image data they simply do not need.

The CNN Example

You’d think a website like  CNN would be near perfect right? Check out their rating on a scale of one hundred. Notice one of their biggest opportunities for improvement. Yes, image size.

Photos Trends

To learn more about photos and industry trends, please visit our Photo Trends page.