PHP CSS HTML

[Jillq]

I was reading, "Use CSS Images instead of IMG tag: An easy way to speed up the rendering of an image is to simply call as a background of a div tag.", and elsewhere I read that that if you use CSS for images the images will come up last (after your text), which is what I want.

But I don't want to load up my css page with a long list of images (40), becuase the CSS page is loaded into the visitor's browser, and so will slow the length of time it takes to bring up my site. I really don't want to use sprites. Isn't there a way where I can load the images into a PHP includes file and refer to the includes file in the CSS, but what code would I use in the main coding (HTML) from page to page to bring up the different images for different pages?

Thanks,

Jill

 

[Vragabond]

I am unsure of the nature of the article you read about the CSS images, but I do not think they img tags and CSS image backgrounds are interchangeable. It depends on the context. Sometimes it is more appropriate to use an image (the image itself is part of the content of the page) and sometimes CSS equivalent is more appropriate (image is used only to enhance the visual presentation of the page).

As for different speeds. All images will be cached by default by the browsers, so after the initial load each method would be equally fast. Browsers will also cache the CSS stylesheet, however the size difference of referencing 40 images in the CSS or not is minimal. The bulk of the loading time will be 40 images anyway.

And since you mention sprites. Indeed, using sprites is the best idea if you're loading little uniform pictures like edges of a custom box or icons. Instead of browser having to load 40 different images, it loads just one. Plus with some overhead for every picture, usually the size of one image containing 40 little images will be much smaller than 40 separate images. So if you could be using sprites, I would warmly recommend that option.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Jillq]

Vragabond,
I'm not loading little uniform pictures like edges of a custom box or icons-so no sprites. I knw that loading 40 lines of CSS into a visitor's browser when the browser is only going to use one of those lines will push my CSS into a 4th packet, becuase it's at 4056 bytes now.

Someone wrote me saying-

You could pass a parameter in your URLs query string, like:

mypage.php?img=1

Then you can name your CSS file something like:

style.css.php

In your CSS file you can do something like:

$img = $_GET['img'];

If ($img > 0 && $img < 5) {
print "#myDiv { background-url: image1.jpg }";
} else {
print "#myDiv { background-url: image2.jpg }";
}


Is this person saying-
In the main code of my site (which is HTML and can handle PHP) place

$img = $_GET['img'];
If ($img > 0 && $img < 5) {
print "#myDiv { background-url: image1.jpg }";
} else {
print "#myDiv { background-url: image2.jpg }";
}

If I have image1.gif, image2.gif, ...image40.gif and I have those images in a file pic.php
and if I'm working on the second page and I need the second image (image2.gif) would the code
$img = $_GET['image2.gif']; print "#myDiv { background-url: image2.jpg }"; } put image2.gif on the second page?

There's gotta be a refence to pic.php in there, would that be in all places I see image2.gif, or just for the GET? And I guess #mydiv is inline CSS?

Thanks,

Jillq

 

[BillyRayPreachersSon]

If you're doing all of this to simply get one of 40 different images, then why bother with a CSS file at all? Just do it inline and save yourself the hassle... because this really does look like a hassle (especially if you're worried about 4KBs worth of data at today's modern internet speeds!).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

I think you may be worrying needlessly.

I know that loading 40 lines of CSS into a visitor's browser when the browser is only going to use one of those lines will push my CSS into a 4th packet, becuase it's at 4056 bytes now.

Unless your users are on hyper-slow dialup connections (in which case you should probably avoid using any images at all), 4K here or there isn't going to make much difference.

You can reference as many background image files you like in your CSS stylesheet, they won't be downloaded by the browser until they're actually needed on a page. The CSS file itself, though, will be downloaded once and cached.

For this reason, I wouldn't advocate changing your stylesheet dynamically for each page - as the browser will have to reload the CSS file for each page view, in addition to any background images that might be required.

You could have a dynamically generated <script> element on each page to put the background image(s) in, but I don't think there's any benefit to doing so.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Vragabond]

I think we reached the point where you need to explain to us what exactly it is you're doing. I will once again say (and join Chris and Dan) that having additional 4k of CSS file that has references to images that might be potentially loaded on some pages is not a big deal. But without knowing exactly what you're trying to do (as opposed to how you're doing it), I can't be of much more assistance.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[southbeach]

In your CSS file you can do something like:

$img = $_GET['img'];

If ($img > 0 && $img < 5) {
print "#myDiv { background-url: image1.jpg }";
} else {
print "#myDiv { background-url: image2.jpg }";
}


Is this person saying-
In the main code of my site (which is HTML and can handle PHP) place

$img = $_GET['img'];
If ($img > 0 && $img < 5) {
print "#myDiv { background-url: image1.jpg }";
} else {
print "#myDiv { background-url: image2.jpg }";
}

If I have image1.gif, image2.gif, ...image40.gif and I have those images in a file pic.php
and if I'm working on the second page and I need the second image (image2.gif) would the code
$img = $_GET['image2.gif']; print "#myDiv { background-url: image2.jpg }"; } put image2.gif on the second page?

There's gotta be a refence to pic.php in there, would that be in all places I see image2.gif, or just for the GET? And I guess #mydiv is inline CSS?

The suggestion given will work. The concept is to name your images in a numerical sequence and they are all of the same format GIF or JPG (unless you rather pass that as well).

The code, as mentioned, needs to be placed within your CSS file. Normally you link the CSS file but in this case, you will "INCLUDE" the CSS file into your main page using PHP command or function include("mycssfile.css").

Now, since the sequence number of the image is given on the URL, you simply need to reference that parameter to concatenate the name of the image into a string

$img_name = 'image'.$_GET['img'].'.jpg';

Now, say that the URL looked like mypage.html?img=1; the variable $img_name will have the string value of image1.jpg and if the URL was something like mypage.html?img=50, the variable's value will then be image50.jpg.

The whole idea of of using server side scripting is to not have to create a static page for every data segment you wish to render. pic.php might as well be index.php and dynamically load information as needed using conditions. You can write a number of small scripts and include those scripts as you need them and where you need them. This also makes for code re-usability. In the same token, you can look into UDF (user defined functions) and use those as well.

I sense, judging from your question that you do not have much experience with PHP. Perhaps, if you re-phrase your question around what you want to do with your page and not around how to use PHP as a solution, one can point you in the right direction. Heck, some of us might even put together some snippets to get you started.

 

[Jillq]

SouthBeach,
Holy Toledo! Thanks for the great info! I'll take you up on your offer in the last paragraph. You're right, I don't have much exp with PHP, but for changing information (time, page to page information, etc.) PHP is very useful. I'll try writing what I'm trying to do again.

I want to have my images (that are on my site actualcures.com) come up last (to provide dial upers with text to read whie the images are coming up. (Dial upers are 50 % of the internet market and rising now that prices on everything are rising). I read that the way to do this was by using CSS background-image code.

To have my pages load as fast as possible, I don't want to place a line of code in my CSS page for each image, so I thought loading them all into a PHP includes file- maybe the one I already have (wp-includes). I Have the special code in my HTAcces file so that PHP code inside of my HTML code will be understood and compiled.

I was hoping that when, for example, I'm editing the page on hip joint pain, I could place the name of an image meant for this page, i.e. joint-pain-relief.jpg, in the main HTML of the page, and then this name will be used in the CSS which will fetch the image from the PHP file.

I don't want to use inline CSS because inline CSS doesn't pass in

http://www.totalvalidator.com/validator/ValidatorForm,

use "Accessibility Priority 1,2,3 (AAA)" and "Show warnings. The site passes AAA right now. I know it's a tall order, but on the other hand, I don't think the stuation is unique at all - lots of pages, lots of images, have images come up after text, have it all work as fast as coding can make it happen.


Thanks,

Jillq

 

[southbeach]

Where does the content of your pages come from? Is this static or is it kept on a DB like MySQL?

I am thinking that if kept in a DB, and I hope that is the case, you can then profile the content and break it down any way you want. It is a matter of design and implementation. What do I mean by this? Well, take your example of hip and joint pain as a subject. If you keep your subjects in a DB, you can profile each subject with everything you need and place the containers on the page according to the profile.

Once you have placed the containers, you can then use JS or HTML COM/DOM "onload" ( learn more here:

http://www.w3schools.com/jsref/jsref_onload.asp)

to execute a JS function which in turn will place the images in their respective containers. This approach will guarantee that all images are loaded dead last.

By container I mean tags such as <div> and <span>. Each container will need a unique ID. Your subject profile will include the target ID and source image. You will then dynamically produce a JS function which is called by the "onload" event.

<body onload="loadIMGs()" ...>

In the JS function, you will have something like

function loadIMGs() {
  document.getElementById('cntr01').innerHTML='<img src="img01.jpg" alt="some text" />';
  document.getElementById('cntr02').innerHTML='<img src="img02.jpg" alt="some text" />';
  document.getElementById('cntr03').innerHTML='<img src="img03.jpg" alt="some text" />';

}

What you name the containers and the images is totally up to you. They must be UNIQUE, you cannot have two or more containers using the same ID ... bad idea

If I am not mistaken, and I often am, this should point you in the right direction. Implementing something like this should be relatively simple. The most complicated part of it would be the profile table where you will keep the relational information between container and images for each subject. In addition to, of course, the subject matter itself.

Have you ever heard of JOOMLA? You might want to look at it as it provides for means to make this kind of association (it is a CMS) but not sure if the images are loaded dead last as you seem to be interested to.

Hope I am not throwing you off track with this? Would like to know how things work out for you ... please stay in touch!

 

[Jillq]

SouthBeach,
"Where does the content of your pages come from?" It's a wordpress site, I wrote the content and website and had it converted to wordpress.

Jillq

 

[BillyRayPreachersSon]

Dial upers are 50 % of the internet market and rising

I'd love to see the proof behind that statistic, because it sounds wrong to me! I believe much more people worldwide use broadband instead of dial-up modems these days.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Here are some stats I've just been hunting around for:

In May 2005, UK broadband users overtook dial-up users. This figure is still growing.

In Feb 2007, US broadband users grew to over 80% of active internet users. Dial-up or narrowband was less than 20%.

In Feb 2007, Canadian broadband users were over 88% compared with under 12% dial-up.

Every report I seem to find backs these statistics up. They may not be 100% accurate, but they certainly indicate what I'd expect - dial-up is dying, and fast.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

I want to have my images (that are on my site actualcures.com) come up last (to provide dial upers with text to read whie the images are coming up.

If that's all you're trying to do, you really don't need to go to all this trouble to achieve it. Just make sure you specify height and width attributes on your <img> tags and it will do exactly that:

<p>Here's a picture that's 100 pixels wide and 200 pixels high: <img src="mypic.jpg" width="100" height="200">. The browser will reserve enough screen space for the image, but continue loading and displaying this text before it loads the image.</p>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[southbeach]

I do not even know what wordpress is ... Can you do what I suggested? Give that a try and see if you get the end-results you are looking for.

I guess I should search for wordpress and learn a bit about it.

 

[Vragabond]

Jillq, I am sure that southbeach's solution, which is catered towards your reasoning, looks most promising at this point. Always an added bonus is his volunteering to write the code for you. However, I suggest you rethink your strategy.

Whatever any benefit you might get from that method could be counteracted by numerous problems with it. If you allow me to compare:

Chris' solution of using simple HTML and adding image dimensions to your img tags will produce text that will be styled around the images while the images are still loading. Since HTML file is retrieved separately from the images, the loading of the two will not interfere. Sure, there might be occasions when image might be loading faster than text, but given that 5k of image is not much image but 5k of HTML is a lot of text (when HTML is properly written). I really can't imagine anyone having such a slow internet connection and reading so fast that they would be bothered by this.

If you use dynamic CSS to load images (that are clearly part of the content of the page) as backgrounds, these images will be treated as backgrounds. This means that they will not be printed by default on any of the browsers (because they all have background printing off by default). If you think any of your users might want to print images along with the text they will have a lot of issues doing that. Secondly, stylesheets speed up loading of websites because they provide rules for the entire site, which are downloaded during the visit to the first page. Subsequent pages load the stylesheet from cache, so they open faster. By using a dynamic stylesheet, the stylesheet will be loaded from the website every single time. Finally, editing pages on such a site will be much more complicated and will require basic knowledge in HTML, CSS and PHP to produce a very simple page. If you ever want someone else to update the pages, the previous method would be a way better alternative.

All in all, since I think the broadband market is much larger than the dial-up and the latter is dissappearing fast, I don't think loading times for a website like yours are an issue at all. And even if you are very cautious of load times, I still think Chris' solution is the fastest and easiest to work with.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Jillq]

Vragabond, Southbeach...,

"By using a dynamic stylesheet, the stylesheet will be loaded from the website every single time." I definitely don't want that, so I'll stay with the image tag for now - dimensions were already coded. I found where I got the "tip" from that started this thread; #13 on

http://www.palmerwebmarketing.com/blog/25-ways-to-speed-up-your-website/

Do you know of any great lists/articles on speeding up a website? One tool I use

http://tools.pingdom.com

measures my website download speed 2.6 on some ays, 3.1 seconds on other days. I'd like toget it down to 1.9. No doubt thee speeds are broadband.

I did find that there were much fewer dial-upers than I thought. I heard 50% recently but it appears that's just not right.

Thanks,

Jillq

 

[johnwm]

Have a look at

http://www.websiteoptimization.com/services/analyze/wso.php

which will give you the times and sizes of your own components.



___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[traingamer]

Another possible problem if you use dynamic css is that a user may have to refresh the page as a user may (or may not) have cached a prior version of the css.

How are you determining which of the 40 images is being displayed on the page? If you are only displaying one image per page (and it's always the same one), it would be wise to specify that one image only in the html.

Even after all of the explanations, I don't really have a good handle on what you're trying to accomplish.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard