How to make inserted images load faster?

Hello,

How can I make inserted (HTML page, .jpg image on it) load faster?

I can make pages load fast, but whenever I put as little as 1-2 pix on them, they appear too slowly. If I check the big sites, leading newspapers, they either load in a flash or at least the "pop" suddenly, not line-by-line...

No matter how much I optimize a .htm page to run faster, the .jpg image (not too large, original size about 500 width, much less height) still loads sluggishly like a curtain being dragged down from top to bottom...

Remember those old "dial up modem"-type image loads? Yes, that's what I'm talking about...

An example is here:
http://www.sparkjunction.com/stream/create-upload-google-sitemap-5-steps.htm#.UJvTneSThrM

Even on fast connection, they appear slowly...

Ideas?

I am currently working on a site that will have loads of photos and galleries, so I need to create articles with 5-6 photos like this on a single page. That is not too much. I have seen lots of blogs, sites showing them in a flash...

Thanks in advance!

 

Could be a couple things. Your server being slow could be the biggest culprit. Are you on a shared server? If so other users on that box might be bogging you down, maybe reach out to your hosting provider and see if you can be switched?

You can also look into a few server side tricks. Take a look at this post on caching and gzip compression.

Finally, I see in your navigation, you're displaying the nav items via images. Can you just change these images out to text? Even if its a custom font you should still be able to use CSS3's font-face to render the fonts the way you want.

 

I have very few images/buttons with text. It seemed it works with the design... I guess JQuery buttons would be better. I am considering to make that change.

 

All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src, short for "source"). Do you get the picture?
Notice how the img element is opened and closed using the same tag. Like the <br /> tag, it is not tied to a piece of text.
"david.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type of the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg" tells the browser that a file is a picture. There are three different types of image file types you can insert into your pages:

• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily 'heavy' pages can be extremely annoying for the user.
Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format). The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.

 

Finally, I see in your navigation, you're displaying the nav items via images. Can you just change these images out to text? Even if its a custom font you should still be able to use CSS3's font-face to render the fonts the way you want.

 

Mate, you got it all wrong, that's not what I was asking... sorry you had to write such a long text, perhaps someone else will find it useful.

I was trying to speed up loading time. I have optimized .jpg, .png images, etc. etc. Yet still want to speed them up to get rid of the "slow curtain pulling down effect".

 

@selectaupairs -- you're close, but a wee bit off on your information.

GIF is only really efficient at 16 color images. Yes, it can go to 256 colors (8 bit), but at that point it is less efficient than PNG... and even at 16 color it is often less efficient at any image that has more than 32K pixels. (320x200 for example).

PNG is most efficient at 8 bit images -- if you use 24 bit or worse, 32 bit with a 8 bit alpha channel (transparency) the result is very, VERY large files. In this day and age 8 bit PNG is the best choice for low color images.

JPG is best reserved for photographs of the real world. It is a 'lossy' format meaning it damages the image despite being a 24 bit color format... the 'artifacts' created by jpeg compression are often hidden or 'lost' in the detail of things from the real world, which is why it's used for those.

@Mr. Dog -- your images are NOT all that well optimized as you've miss-chosen your file formats.

Take this one as an example:
http://www.sparkjunction.com/stream/img-xml-sitemap-01.jpg

It's 265k jpeg for a low color image. By itself that's actually 120k larger than the upper limit I usually allow for a normal page on a site! Due to the low color a 8 bit png file would be a fraction that size... lemme re-encode here:

http://www.cutcodedown.com/for_others/mrDog/images/xmlOctree.png

Guts it down to 35k as 256 color png... there's a bit of dithering due to the color reduction, but anyone who notices that needs to stop plastering their nose 2" from the screen.

You take this image:
http://www.sparkjunction.com/stream/img-xml-sitemap-02.jpg

which is 205k, turn it into a 256 color png and you get:
http://www.cutcodedown.com/for_others/mrDog/images/form.png

Which is also a fraction the size -- to the tune of a mere 17k.

The site logo (which is in a IMG tag when it's not actually content -- that belongs in the CSS, though we've already HAD this discussion!)

Your image loads can also be delayed by the sheer number of other files that are being loaded by that site. Most browsers are set to limit files pulled from a single server to 8 at a time, meaning that every file past the first eight takes "ping time" to the server multiplied by at LEAST two to be pulled down. The page you linked to as an example breaks down as follows:

6 "documents" (HTML files thanks to IFRAMES)
28 images (9 in the markup, 19 in the CSS)
12 Scripts (hello jquery for nothing bloat)
6 stylesheets (no media types markup-side, sheets calling sheets 90's style)

That's 52 files -- 'real world' that can mean anywhere from 4.4 to 88 seconds overhead on first-load! ... and that's not even counting the use of web fonts, which can also bang the brakes on your page's speed (which is part of why I do NOT advocate their use!)

This is why I tell people to use ONE or TWO stylesheets per media type, use CSS sprites where possible on your CSS images, avoid using images when you don't need them, and swing a giant axe at endless pointless javascript asshattery. You've got 663k of javascript running in there spanning twelve files! That alone adds anywhere from 6 to 60 seconds on firstload!

Which comes to an ungodly 52 files in 1.6 MEGABYTES (1 megabyte when compression works)... No offense, but OF COURSE IT'S SLOW!

Realistically I see little reason for that page to take more than 128k in around 16 files... that would be 1/10th the bandwidth and a third the file count... and that's with no real changes to how it looks apart from a bit of dithering here and there.

All those things I posted in your thread back in august? - well here you are again with the same problems and nothing fixed.

 

I was busy with some projects, but now I got back to re-coding and solving the issues.

Hope to re-code the entire thing in such a way that they all load faster...

 

Optimize your images with some tools for example this http://www.imageoptimizer.net/Pages/Home.aspx . It will reduce size very much, and you will not notice any differences in quality.

 

I am going to look deeper into how those CSS sprites work and I even thought about creating a new Jquery menu...

Actually I didn't use any JavaScript anywhere, I don't know where you're taking that from... (?)
Perhaps you saw the one from Google Analytics...

And: actually I am ALWAYS trying out various image file extensions and ALWAYS picking the smallest file size. I am actually optimizing images, but perhaps my program isn't good enough (!). Believe it or not, sometimes .jpg gives smaller file sizes than .png. But usually vice-versa...

As for the images: I did indeed save and optimize them in an older version of PaintShop Pro (version 9 from 2004), but this was the best the program could do, actually... .gif and .png showed odd tones and lots of dithering even with the low-res images.
Those gradient type images look horribly dithered in .gif and the .png couldn't give a nice gradient, but harsh dashes with strong contrast.

Anyway, I appreciate the details you're giving me... I guess I should also swap for a newer program.

Any suggestions on which program can efficiently optimize images?

I know I am coding CSS a bit old-fashioned, but I guess that's what I have gotten used to and I think it doesn't mean much of a problem.

After using various sites to check loading speed - surprise: my site loads very fast in comparison with many other sites.
But the images are terribly slow... wherever I have 1-2 images, the curtain-pull effect slows down the entire page.

 

Thanks, I gave it a try, but gives me a spotty ugly image! Impossible to use that one!
I see endless numbers of sites, blogs displaying 10-20 higher resolution images that simply "pop-up"... no slow load.

And I don't want to compromise quality. There must be a way to optimize even simple images that are low-res...

 

the image size must be reduced and your server must be fast for loading these images faster.

 

Scripting for menus is like squatting to pee... there is NO excuse to have modern browsers be fed javascript JUST to make a menu. PERIOD.

You may be unaware of it, but your site currently loads FOURTEEN separate javascript files that combined once uncompressed is larger than your images! Even compressed it's 229k, which is 50% larger than the upper limit I'd usually allow an entire page of HTML+CSS+IMAGES+SCRIPTS to be. Much of it appears to be all the endless social networking crap that's likely made 'the easy' way by slapping in scripting for it...

	http://mediacdn.disqus.com/1352501630/build/system/disqus.js?	54 KB (178 KB uncompressed)
	http://ct5.addthis.com/static/r07/core046.js	47 KB (140 KB uncompressed)
	http://mediacdn.disqus.com/1352501630/js/dist/lib.js	43 KB (107 KB uncompressed)
	http://platform.twitter.com/widgets.js	24 KB (75 KB uncompressed)
	http://sparkjunction.disqus.com/embed.js	18 KB (39 KB uncompressed)
	http://www.google-analytics.com/ga.js	15 KB (36 KB uncompressed)
	http://mediacdn.disqus.com/1352501630/uploads/themes/7884a9652e94555c70f96b6be63be216/theme.js?254	11 KB (55 KB uncompressed)
	http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-501f6d300e80effa	7 KB
	http://sparkjunction.disqus.com/thread.js?url=http%3A%2F%2Fwww.sparkjunction.com%2Fstream%2Fcreate-upload-google-sitemap-5-steps.htm%23.UKKUCDD9vIN&title=&sort=&per_page&category_id=&developer=0&identifier=&disqus_version=1352501630&1352832211850	4 KB (21 KB uncompressed)
	http://ct5.addthis.com/static/r07/counter005.js	3 KB (9 KB uncompressed)
	http://b.scorecardresearch.com/beacon.js	1 KB (2 KB uncompressed)
	http://cf.addthis.com/red/p.json?vr=250&rev=117843&rb=0&gen=1000&gen=100&sid=50a294d3a08d8ea2&callback=_ate.ad.hrr&pub=ra-501f6d300e80effa&chr=ISO-8859-1&uid=509f831216f6fd1d&url=http%3A%2F%2Fwww.sparkjunction.com%2Fstream%2Fcreate-upload-google-sitemap-5-steps.htm&zgk9uo	655 bytes
	http://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.sparkjunction.com%2Fstream%2Fcreate-upload-google-sitemap-5-steps.htm&callback=_ate.cbs.sc_httpwwwsparkjunctioncomstreamcreateuploadgooglesitemap5stepshtm0	91 bytes
	http://juggler.services.disqus.com/event.js?thread_slug=how_to_create_and_upload_a_google_sitemap5_step_guide_for_beginners<snip>	39 bytes

Code (markup):

That's a train wreck of 'javascript for nothing' and bloated off the shelf solutions to non-issues.

No, it isn't... did you use the save-time optimizer (save as -> [options] -> [run optimizer]) and play with the settings? The ones I did were with PSP7, and 9 is no different in that department. It is a matter of knowing how/where to reduce the color depth and playing with the dithering types, choices and percentages.

You've got several hundred K of javascript bloat, more than half a megabyte of images and a whopping grand total of 52 separate files as it sits right now.... those are where your optimization efforts need to go -- particularly given the page linked to in your original post by my count only has three actual content images (aka images that belong in IMG tags). The number of files alone could be a hefty part of that bottleneck.

 

What you are saying there are not my internal scripts, but "usual ones" that pretty much every "typical" site has...


Disqus - commenting script...
AddThis - SM bookmarking script...
Google Analytics - another "must have"...


I see you separated the Disqus script... it's one script. Just one, but it may load others for the Twitter, Facebook etc. SM bookmarking tools.


You say "train wreck of javescript for nothing"? ha ha ha
Mate you aren't up-to-date with the importance of: analytics, commenting and social bookmarking.
These are "must have tools" they are not for "nothing", indeed there are "solid reasons" for them!


When I compare my sites with similar sites (for instance with WhichLoadsFaster.com), my sites score very well. They're faster than the vast majority of similar sites!
This is due to better optimization. But of course, I wanted (and still want) even faster load... which will be achieved eventually.


Those scripts I cannot get rid off... and you will in fact find many of those on other sites. (By the way, Bloomberg uses Disqus and who doesn't use G. Analytics?).
It's natural that those scripts are using up bandwidth and slowing down the loading time.


What I can do is optimize my own code and my own images, content for speeding up loading time... But those scrips I cannot touch... It's the way the providers are making them, it's the way they load on any other site.

It's good to put "difficult scripts" towards the end of the .htm page... so I try to do that anytime this is possible.


What you are saying about Paint Shop Pro (which I am using)... well, actually the "rudimentary" and small IrfanView optimizes .gif much better.
I just tested several images in both programs and a mere "save as" in IrfanView creates far better images with less spots, smaller size in KB.


So I'll actually be using the simple IrfanView for optimizing .gif files... A small handy program that I like very much.

 

If by typical you mean slow bloated sites that lumber on not from usefulness, but by coasting on their reputation.

Fat bloated slow javascript only nonsense that pretty much makes the site take forever to load - mostly to replicate client-side something that should be provided server-side by a CMS. I hate wordpress for it's idiotic markup, but you'd be a billion times better off using something like wordpress or joomla so you could host comments yourself, than relying on that broken, inaccessible train wreck that by itself is larger than I'd allow an entire page on a site to be in terms of HTML+CSS+SCRIPTS+IMAGES!

... and you can have that social bookmarking without that fat bloated slow mess of code too -- hell, the individual social link code from the ones that actually mattter (addthis wasting time on a bunch of garbage nobody actually uses) is a fraction the size.

Pointless bloat for information that should be gleaned from your server logs using tools like Analog or Webalizer. The handful of information GA provides that those tools do not are more sitting around circle-jerking over unimportant values -- typically meaning one is spending more time worrying about trivialities. That's time better spent building content of value and actively promoting the site.

Didn't separate anything, I pulled the list of what's being loaded from the Web Developer add-on for Firefox.
Information -> Document size.

The first of which the SERVER should already be providing, the second of which should be handled by the server and not some stupid bloated client-side script (meaning a hefty chunk of users will never be able to even use your site!), and the last of which there are far leaner options for implementing. You just went with the "let's slap a bunch of scripting on the site for stuff that shouldn't be scripted" approach to site building.

Tools like that can be very misleading as they are hosted on uber-fast connections and often don't test for things like concurrent connection limits. (Google's site tools are similarly flawed).

This is due to better optimization. But of course, I wanted (and still want) even faster load... which will be achieved eventually.

Probably why I didn't even know they have a comments section anymore... or visit there in the first place for that matter.

Anyone smart enough to realize the important data is redundant to what your server should already be providing silently in the background, that the rest of the information is a pointless waste of time, and that one more handshake to a third party server isn't worth it.

EXACTLY MY POINT.

Crappy slow inaccessible

That I probably wouldn't bother waiting to finish loading in the first place and instead go to some other site WITHOUT those issues.

Again, are you actually using the save-time optimizer?
http://www.cutcodedown.com/for_others/mrDog/images/optimizer.png

I kind-of doubt it. IrfanView does a decent job (since it uses the same compressor as the GIMP), but you have limited control over what it does to the image.

NOT that GIF is a format you really should be using since you don't seem to have many images that reduce to 16 color very well, and a properly saved 8 bit (256 color) PNG is typically smaller than GIF -- unless you are talking REALLY tiny images like icons... and once you start combining those icons into CSS sprite sheets, the dimensions will be big enough and color depth high enough to put PNG back in the lead.

PNG only sucks when you try to use it for truecolor (24 bit) images. Palletized it's really hard to beat.

Oh, I may have already mentioned it, but you probably also should NOT be using XHTML 1.1 since it is not real world deployable -- the latest you should be using is 1.0

 

...oh my god, that's a long post... I appreciate the hard work...

 

always put alt tags and title in every pics and define it with width and height always even if it's already defined in your css.