Image Loading Slow

**talvi** · 12-11-2010, 10:28 AM

I'm confused. When I load my site http://phoenixchange.com the graphics "banner unfolds" slowly down the page. It's "only" about 70kb and I can't shrink it anymore (used PNGOUT on it etc).

But when I look at other sites e.g. the Dorothy Perkins site http://www.dorothyperkins.com their "huge" photographs, a page of nothing but photographs loads up almost instantaneously.

(this is loading both the sites for the first time, after deleting the cache etc)

How does DP get this speed of loading??

Can anyone help me understand what's going on here?

**samliew** · 12-11-2010, 07:18 PM

jpg images seem to load 60% faster.

Related articles:
http://www.turnkeylinux.org/blog/png-vs-jpg

**talvi** · 12-12-2010, 07:11 AM

Originally Posted by samliew

jpg images seem to load 60% faster.

Thanks Sam. After reading the blog you recommended I did some tests with Irfanview.

The original was created as an SVG. Going along with what appears, even in that blog's comments, to be the "conventional wisdom" (photos vs block colour as the way to choose format) I chose PNG because the most critical element in the image is sharpness around text etc. But you prompted me to do the research and this is the result:

Googling explanations of the Save-As options (PNG - JPG) in Irfanview, I deselected all the data options and was then left with 3 variables: the save quality percent; and two options: Save as progressive; and Disable colour subsampling. I found the results surprising.

Saving the PNG as a JPG at 100% generated an INCREASE in filesize over the PNG file of almost 50%.
Reducing the quality to 80% reduced the filesize by about 60%.
Reducing quality to 60% reduced the filesize by about 70%.

What also surprised me was that even at 60% quality the reduction in visible quality was effectively undetectable at the intended resolution.

Saving as a Progressive JPG gave a REDUCTION, but only of about 5%.
However, DESELECTING the Disabling of colour subsampling (an irritatingly confusing double-negative of an option this one!) REDUCED the filesize by about 25%.

In summary:

80% progressive JPG with colour subsampling (i.e. UNchecking the option!) gives a reduction of about 70%
60% progressive JPG with colour subsampling gives a reduction of about 75%

So, the final surpise was that it is hardly worth dropping to 60%.

I've got a screenshot of the tabulated data but find I'm not allowed to attach it

The less I guess is to always do proper research!

But isn't there more than this re: the DP site??

**samliew** · 12-12-2010, 09:01 AM

If you want crispness, try using GIFs? (and reduce number of colours used)

**samliew** · 12-12-2010, 09:09 AM

Also try image preloading. Paste this script block in the <head> of your document.

HTML Code:

<script type="text/javascript">
var banner = new Image();
banner.src = "http://phoenixchange.com/Landing_615x332-TEMP.png";
</script>

**hasratyan** · 02-11-2013, 03:52 AM

Dear. you can use .bmp photos, becose that image format is fully created for websites!

» Search Forums

» Online Users: 44

» Site Navigation

» Domains For Sale

Thread: Image Loading Slow

Thread Tools

Search Thread

Display

Image Loading Slow

Similar Threads

flash slideshow loading too slow

SLOW LOADING!

Image loading problem

loading image

Order Of Image Loading

Posting Permissions