Site Reference Forums

laurie_m · 2008-01-23 16:32:16

Well, G'day.

Thought I'd give a little basic info on backgrounds, since there is some obvious confusion.

Here's the background in question from Jan's page at: http://www.glenelgopal.com/

The site review request referred to is: http://forums.site-reference.com/topic/ … gopal-com/

The version of the background that you see when you visit Jan's website isn't on Jan's site. It's on the Freewebs site. Jan's site hotlinks to it. Here's the code with the address:

Code: html

<body  style="background:url('http://www.freewebs.com/Backgrounds/Green/bg1.jpg');">

So the address of the background is actually:

Code: html

http://www.freewebs.com/Backgrounds/Green/bg1.jpg

If I was using a background on my site I'd put it on my own web space.

Here's the background that I'm using on a site that I'm currently building. The address of the background is:

Code: html

http://www.southimage.net/bega-show-2008/redcube.jpg

See the background on the page if you wish at: http://www.southimage.net/bega-show-2008/index.php The site is a bit ordinary, but you'll get the picture.

If you right click on the two background images displayed here and then click on "Properties", you'll see that Jan's background is 96px x 96px and is 1.27kb.

96px x 96px is the size that it displays on the screen and 1.27kb is the file size. 1.27kb is a pretty small file for an image file.

Similarly, my background image is 96px x 96px and has a file size of 4.46kb.

Background images are often referred to as tile images, because, unless you tell it otherwise, the background repeats, or tiles, to fill the whole page.

But the background doesn't take a lot of bandwidth to download and it doesn't take long to fill the page because it only downloads once and repeats. (Thought I needed to repeat that.)

So, suppose you're using a 56k modem. That's a modem with a download speed of 56 kb per second (56kb/s)

In practice, because the phone line will be a bit degraded, you may download at about 50 kb per second.

A 1kb file will download in 0.2 seconds, so Jan's background tile will download once and repeat to fill the whole page in about a quarter of a second. In Australia we refer to that kind of speed as "quick as a flash."

But there's more! When you visit a web page, the files that make up the page are saved to the temporary internet files folder on your computer's hard drive. So when you visit that page again, the files don't come down the phone line at 56kb/s, they come direct from the temporary internet files folder of your computer.

This will be pretty fast. In the case of the background tile, to use another Australian expression, that will be "quicker than a flash."

So, you see, it's not the background file that's slowing the opening of Jan's site, it's the other image files.

Now, Jan hasn't removed the background tile file. She hasn't found it in the code yet. That's OK. Wouldn't help the download speed if she did.

The reason the site is opening faster on the second visit is that Jan's oversized image files are stored in your temporary internet files folder and only have to load from your own computer; not down the phone line.

So with this in mind, here's a design principle for people who have image rich web sites such as my photography sites:

When designing an image rich web site, keep the images on the home page to a minimum, maybe one or two.

The header image(s), which are repeated on each page of the site, will load when your visitor opens the home page and be stored in the temporary internet file folder of your visitor's computer.

Then, when they open the second page, the header opens almost instantly and the images, unique to that page, download, down the phone line, in a reasonable time, making the time for that page to open, reasonable.

I should point out that slide shows, videos and to some extent animations, are huge files. Download time is one good reason to avoid these. If you must incorporate them, don't make them an automatic download. New web builders would do well to avoid these altogether.

You'll find it helpful to keep your header image to less than 20kb, preferably between 12kb and 15kb. Images on the page can be rendered at adequate quality and physical size at around 35kb to 50kb.

Over half a dozen images on a page is probably getting too much.

As you can see, I've gone to a bit of effort to provide this info. It's very basic and is directed toward new web builders who should read it before submitting slow loading pages for review.

What is slow loading? If your page isn't looking pretty good in five seconds, then you've likely lost your visitor.

New web builders should not feel put down by this. It comes out of my own mistakes, study, learning and frustration, over an extended period of time. And you get it for free, almost instantly!

Of course, if you find this helpful you can always tip my "Buy Me Flowers" button, to the left.

Best wishes,
Laurie.

Last edited by laurie_m (2008-01-23 19:32:39)

matte · 2008-01-23 17:53:13

Nice stuff Laurie

Of course on my caricatures site on the artist's sample pages I have more than the 6 images, but then again its part of a purchase decision process so people I think are prepared to look at some while the others download.

Where I worked once, they said try to keep pages to 100kb max size. A good challenge for many sites!

Next bit of advice Laurie - do you have some free image programs that have image file size optimizers in them? I use paintshop pro and am amazed at the image file size reductions that can be achieved.

BTW, that redcube makes for one ugly background LOL

laurie_m · 2008-01-23 18:47:54

Thanks matte for a couple of things in there.

BTW, that redcube makes for one ugly background LOL

OK. I just can't get happy with the look of the site. You'll be right about about the background. I'll change it.

But I'll need to keep the same file name so this post still works.

Free graphics programme
I use Irfanview for all the run of the mill jobs around website building. http://www.irfanview.com/

There are two files to download: the programme and the plugins. You need both to get it working at it's best.

Irfanview makes it quick and easy to resize and optimize file size. It can also remove the exif information and any other .txt files attached to the image.

I generally save my images at 72dpi and 85% quality. I find that this give adequate image quality when viewed on the screen and a considerable file size reduction compared to 100% quality.

The loss of quality is imperceptible on the screen and yet renders the image unsuitable to steal for print reproduction.

Irfanview also produces html thumbnail pages. I use Irfanview to prepare all my images for the web and produce the html thumbnail and image pages. The thumbnail and frame templates can be customized to my own template and easily accessed by the programme during the creation process. This allows me to produce the thumbnail and image pages to my own template in a matter of minutes, ready to upload. We're talking here about anything from half a dozen thumbs and images to a hundred or more.

Note that the Irfanview templates need to be edited in a html or text editor.

And yes, I agree that sometimes, even often, it's hard to avoid having more than half a dozen images on a page.

I find that with my straight forward images and pages, that the top of the page loads first, giving a satisfactory looking sight above the fold, in a matter of a few seconds on a 56k modem.

And of course, thumbnails and image pages are a good way out when you want to display, say 25 related images at a decent size. See these examples:
http://www.southimage.net/atvcamptrip/
http://www.southimage.net/atvcamptrip/f … bition.htm

Regards,
Laurie.

Last edited by laurie_m (2008-01-23 18:52:58)

ColoEagle · 2008-01-23 22:06:44

Well Laurie, I have put you on the same level as thegypsy, rock

Every time I read one of your posts about working with images I learn a little more. Just like with gypsy, I may not understand it all but a little bit here and a little bit there and it starts coming together. Course grasping a hold of all that seo stuff still makes my head spin to the point I have trouble knowing what it is I need to grasp. lol

With your BG image on the Bega show site it doesn't really affect the way the page looks. IMO creates a different looking border for the pages adding a nice touch.

Ryan_steyn · 2008-01-24 00:43:38

I reckon it pretty much depends on your target market as well. Of oyu are targeting corporates it will be very unlikely that they are sitting on a "less than broadband" connection, if you are targeting Joe Shmoe on the other hand then he probably will have a slow connection. Sounds redundant doesn't it butter curious anyway, i reckon people should optimize their pictures for the type of people they are attracting, sometimes people dont mind a less than crisp image but on the other you could be losing business by not having crystal clear images... some markets are that stuck up and unrealistic...

laurie_m · 2008-01-24 04:04:53

G'day there Ryan.

You're quite right about broadband, Mate.

However, I used this example for it's relevant value rather than as an absolute. By that I mean that if a site takes 30 seconds to open on a 56k modem, which is not uncommon for some of the sites put up for review on SR, then the fella with a high speed broadband connection will have lost patience after about three or four seconds. The relative, slow opening speed will tell him he's dealing with a Hill Billy site.

Perhaps a better way of measuring relative download time would be by file size. Matte suggested 100kb tops. But the same people who submit a huge file size site for review, don't understand file size or know how to measure it.

They also may not understand about the files being stored in the temp internet folder. They think that because their beloved creation opens on their computer in ten seconds, it will do the same, the first time, on someone else's.

That's neither a crime nor a sin, of course. It's not so long ago that I was afraid to switch the thing on for fear of breaking it. (The computer, I'm talking about.)

Unlike you, as far as I knew, there was no such thing as a computer when I left school. My kids taught me the computer basics. Then later, my children's children would sit on my knee and we'd play Bob the Builder on the net. http://www.bobthebuilder.com/au/main.html You'll need to know about Bob the Builder, in time, Mate.

The three of my grandchildren who go to school, started school able to type their name.

So I do feel for the other older people who are having a go at this new fangled communication method and I try to make it understandable.

Answers are hard to come by, huh?

Regards,
Laurie.

Ryan_steyn · 2008-01-24 04:38:15

Looking at all the points you just stated, i can honestly say that you are 100% right. When i started the online thing i made the mistake of taking things to the extreme, instead of making pictures to big i would make them terribly small and ugly... then link em through to a giant picture and that would just get messy... i am not going to go into how my master plan of linking to pictures on other servers went down.

So yeah, even guys like me who found a pc when we were 8 (some lucky buggers before me perhaps) struggle to catch the concept of certain things in the beginning, so i certainly cant say anything bad about someone who is taking this on without any childhood recollection of a pc or even a cellphone for that matter... as a matter of fact it is quite an impressive feat to walk out of a world where you could sell something using your personality and people skills into a world where you basically have to play a game of dodge the con and guess who is selling legit curious

My mother starting doing the web thing in front page long before i got involved and now i am showing her how to optimize this and that... personally im not sure if that is the generation gaps fault of front-pages lol (she is only 41 now) so i see this in action daily tongue

Your example was great, fortunately though, alot of people have come from 56k into broadband (next gen will be baffled by 56k butter ) So a bit of a longer than 3 second wait isnt shocking for most people. If your site takes 18 seconds and more - then you really have a serious problem, i think anything less is still not the end of the world, Banking sites take longer.

I would say that i am a bit apprehensive about the rules on image sizes though. Simply because i get the feeling that it is a huge limitation on how one can design and develop their sites because they panic and try keep things as simple as possible.. which takes the fun out of creating.

I would just like to add a tip in here:

If you are using graphics as part of your layout try stick to using solid colors. They are smaller and can be incredibly versatile if you layer them and add simple shading. When you start adding different colors and images into your layout images you will probably find your image sizes start getting out of control. An example would be a block with curved corners behind text... instead of making 5 images each 2-3kb's in size and then connecting them with css you can create one image - align it in css and chances are it will only come to about 8kb and less code needed for positioning it. Always think about the bigger picture when going for simple effects. The reasoning behind the solid colors is that they dont dither easily so you get much greater compression... with lots of colors you will notice the effect of your compression quite obviously which is never cool.

Northie · 2008-01-24 11:30:43

offtopic

go-ballistic.co.uk/console.asp?activityID=1&activity=Paintball&str_town=leeds

Currently downloads over 850Kb data in about 40 seconds (on a very fast private SDSL line).
Downloading is stalled for about 18 seconds downloading a javascript file directly from google.
Then the page has to download 16 images for the map; each up to 30Kb
It takes at least 20 seconds for the user to see something, and at least another 20 seconds to complete the page

As such, I have been trying to optimise the page load, and have two examples; with and without the map.

The page is heavily dependent on javascript, AJAX and DOM-modification

test.go-ballistic.co.uk/console.asp?activityID=1&activity=Paintball&str_town=leeds
test.go-ballistic.co.uk/console2.asp?activityID=1&activity=Paintball&str_town=leeds

To present useful information I have added a section to the page.

Firstly I took the javascript code I'd written and split it into two distinct sections: Map specific and non-map specific.
The non-map specific javascript makes the AJAX call and does the DOM stuff to present information as soon as possible.
It uses a scheduling script to test for DOM elements; and when they are available it does what it needs to do with them.

All this is very fast

The call to the javascript from google has been put after the closing </body> tag, so it (almost) loads last, just before the map-specific code.
This processes the map while the user is looking at the information already in from of him/her.

Although this doesn't necessarily speed up the entire page load it does allow for information to be presented earlier.

Other optimisations included the compression of the CSS, loading the CSS before the javascript and gzipping the output from the server.

The page with the map on it still takes 40 seconds to load, but presents information within 5 seconds
The page without the map on it takes about 5 seconds and presents information within 1 or 2 seconds

Once the page has loaded, further searches are AJAX-based and are as quick as a flash. On the non-map page they are quicker than a flash, so quick that it's hard to tell the page has changed

laurie_m · 2008-01-24 14:48:40

Sounds great Northie.

A bit over the heads of us ordinary people, of course, but I've got the general gist.

I did see your other post about compressing the css and some other file type.

But the main thing is that you've picked up on those two very important expressions: "quick as a flash" and "quicker than a flash." lol So long as our websites comply with those expressions, we'll be OK.

Regards,
Laurie.

trpjan · 2008-01-25 07:35:06

Hi , Im Jan the person with the wallpaper that wont go away even when i delete it lol..
I cant follow 90% of what has been spoken off above . But i am aware that my photo files could be a lot smaller. To do this effectively i have to learn how to use my prog which is paint shop pro 9. I use it to make the photo files smaller than the original but dont understand pixels dpi etc .Can anyone point me to a website etc with plain english explanations which can help me . The info i have been given previously will help me in the long run i know, but i still need to know where i find the pix and dpi etc and what they mean and how to use them.
Regards Jan.

Ryan_steyn · 2008-01-25 08:01:56

When i used to play with photo shop i found this site to be quite helpful www.photoshopcafe.com glad Good Luck

laurie_m · 2008-01-25 14:20:04

G'day again Jan.

It's great to see you're still with us. It's not uncommon for new web builders to have dropped their bundle and disappeared, never to be seen again, by this stage.

I've had a quick look at the tutorials that Ryan suggested. Very good tutorials, I'm sure. I didn't see the basics that you require.

There would be dozens of basic tutorials out there but I don't know where to point you, so here's what I suggest:

Download IrfanView and we'll work through the basics on SR.

I'm suggesting that you use IrfanView because it's basic and because I know my way around it.

So if you'd like to go that way, download the programme and let's know when you're ready to start.

Others may chime in with help and still others may have questions.

Most of the new web builders who come to SR need to be watching this discussion like a hawk and so do a few of the older ones. I hope it goes ahead.

Regards,
Laurie.

ColoEagle · 2008-01-25 16:31:04

Well not to take away from Laurie, as I look forward to learning more.

I use PSP 8 and have a couple images that will maybe help Jan in finding what she needs in PSP 9

In the resizing image tool window is where my settings for the resolution of the image are at. I have marked it with a blue arrow.

In the top left area are three buttons for optimizing jpg, gif and png images.

matte · 2008-01-25 18:03:33

Its even easier than that in PSP9

Open PSP9 and open the image you want to use.

If the image dimensions are too big for the web page, I use the zoom tool to zoom out till it is the right size. Then screen capture (shift and print screen) to capture the image on the screen (in this case the WHOLE screen)

Then paste as new image (ctrl and V)

The crop crop tool, to crop it nicely to the image again - now at the dimensions for you page.

then the magic ! Select File, Export , then click to get sub menu, then select jpg optimiser.

Use the compression value tool to see what gives the smallest file size without affecting the image quality (you can see this in the preview window) - (you may need to zoom in or out to get a reasonable look) I find around 10-15 is good, though sometimes more.

I use Chroma subsampling YCbCr 2x2 1x1 1x1

Easy as Using this process you can do maybe 20 images an hour taking your time, more if fast and have a few under your belt!

trpjan · 2008-01-25 22:39:12

Coloeagle,
Thats the page i get to in pp9 and thats where i finish lol . Tried a few different numbers in there and ended up with a photo i couldnt use..
It is difficult to put things into practice when you dont understand what the little things mean (like pixles and dpi etc etc,) sometimes a picture is worth a thousand words.
Untill i learn the little things i think i would have the same problem with any photo program i used . So i will keep on with pp9 for now but will keep infaview in mind .
I will be back lol .. Jan.

matte · 2008-01-25 23:03:08

psp 8 and psp 9 are quite different

just follow my instructions and you''ll be OK

atwhatcost · 2008-01-28 14:08:53

Well, once again, I have a been-thinkin'-too-hard headache from trying to understand this whole thread. I have copied and pasted Laurie's tutorial into a doc for keeping! Thanks again, Laurie!

I'm with CE, much like reading one of Gypsy's threads -- hard to grasp, but can be done eventually. Northie?! Glad Laurie finds what you said above his head, since there are clouds, the moon and sun blocking my view from what you said. Good thing I remember back in the days when Gypsy's stuff all looked like your stuff -- one big, huh?! I know I can come back here and read it again some day, and actually understand it!

Also, very glad that most participating in this thread have something in common with me -- photos are an important aspect of our sites, so the 6 images per page aspect is bent (broken?!) a bit.

Jan, quick answer to your two questions (if I can do "quick.") On the computer, images are made up of tiny little dots, called pixels. Now they make us learn that each dot is a pixel, and then are mean enough to use "dpi!" Dpi = dots per inch. curious If you would like to see pixels, open a graphic into Paint (assuming you have Microsoft Windows), then enlarge the image 800Xs! (Be glad you don't have to fix a graphic pixel by pixel -- a good way to spend several days driving yourself nuts. That's how I got this nutty. blinka )

Longer answer to your question -- I've included this answer in another thread you joined in the feedback forum -- to learn something that we are brand new to is fairly easy online. Just google what you want to learn with the word "tutorial", and then add " + "for children." Viola, a boat load of tutorials that assumes we know nothing, and goes from there. For your dream of learning Photoshop, try this SERP -- http://www.google.com/search?sourceid=n … r+children

I don't want anyone to think I'm hiding any secrets, so, truth be known, I have the free download of Photoshop, also have a DVD to teach me to use it, and still am too afraid of using it. rodna Thankfully, Laurie told me about a great little camera -- Cannon 550, I think (I got it's brother, the 560 for Christmas) -- that has helped me take pictures that are so nice, all I have to do to "fix them" is to crop the stuff I didn't want in them, and make them the appropriate size. Now, I no longer fear "fixing" a bunch of pictures for the net. satisfied

Thanks again, everyone! Good thread!

matte · 2008-01-28 15:29:59

For your dream of learning Photoshop, try this SERP

Jan said she ws learning paint shop pro, not photo shop. Photo shop tutorials use different approached to PSP.

Searching 'Paint shop pro tutorials' on google would be the way to go

atwhatcost · 2008-01-29 15:29:21

matte wrote:
For your dream of learning Photoshop, try this SERP
Jan said she ws learning paint shop pro, not photo shop. Photo shop tutorials use different approached to PSP.

Searching 'Paint shop pro tutorials' on google would be the way to go

Doh! Did it again! Saw one thing -- read it wrong! Sorry 'bout that. But, I still think, for easy tutorials adding "for children" works well for a better search result!

(Note to self: Looks like Paint Shop Pro isn't any easier to learn then Photoshop! Invent intuitive graphics/photo program, right after folding laundry. roll )

Sponsored Results

Site Reference Forums

#1 2008-01-23 16:32:16

Background Tiles, File Size, Download Time

Code: html

Code: html

Code: html

#2 2008-01-23 17:53:13

Re: Background Tiles, File Size, Download Time

#3 2008-01-23 18:47:54

Re: Background Tiles, File Size, Download Time

#4 2008-01-23 22:06:44

Re: Background Tiles, File Size, Download Time

#5 2008-01-24 00:43:38

Re: Background Tiles, File Size, Download Time

#6 2008-01-24 04:04:53

Re: Background Tiles, File Size, Download Time

#7 2008-01-24 04:38:15

Re: Background Tiles, File Size, Download Time

#8 2008-01-24 11:30:43

Re: Background Tiles, File Size, Download Time

#9 2008-01-24 14:48:40

Re: Background Tiles, File Size, Download Time

#10 2008-01-25 07:35:06

Re: Background Tiles, File Size, Download Time

#11 2008-01-25 08:01:56

Re: Background Tiles, File Size, Download Time

#12 2008-01-25 14:20:04

Re: Background Tiles, File Size, Download Time

#13 2008-01-25 16:31:04

Re: Background Tiles, File Size, Download Time

#14 2008-01-25 18:03:33

Re: Background Tiles, File Size, Download Time

#15 2008-01-25 22:39:12

Re: Background Tiles, File Size, Download Time

#16 2008-01-25 23:03:08

Re: Background Tiles, File Size, Download Time

#17 2008-01-28 14:08:53

Re: Background Tiles, File Size, Download Time

#18 2008-01-28 15:29:59

Re: Background Tiles, File Size, Download Time

#19 2008-01-29 15:29:21

Re: Background Tiles, File Size, Download Time

matte wrote:

Active Discussions

Review Requests and Introductions

Board footer