Image source: Relative Path or URL?

HTML & CSS
1

I am writing a web page that uses 16 small JPEG images to compose a much larger image at the top center of the index.html page. The 16 images are all hosted on the same server as the index.html page and are in the same file system. My question is this:

Is it best to use the full URL in the image src attribute to point to the JPEG images, or should I simply use the relative path (eg …/mypic.jpg)?

or is this one of those 6 of one 1/2 dozen of the other sort of deals?

Thanks

2

It is best to use the relative path. Not only does that ensure that unnecessary domain lookups are avoided, it also makes testing the page on your own computer before uploading it much easier.

3

Or if you want to use the same code somewhere else, you won’t have to go changing all of those paths later! (cause then you will feel dumb…from personal experience)

4

I prefer to use “/images/image.gif”, which is relative to the root.

Only downside is that you can’t test on your desktop (unless using something like MAMP or WAMP).

5

No true, you can use ModRewrite in .htaccess and manage all your relative paths, which is exactly what I do within my websites. I have a set amount of paths and relatively link to them as such, it means I don’t need to use deep linking on relative paths (they can remain the same no matter the folder depth) :slight_smile:

6

I agree with you…felgall. We can give individual images as you asked willyd57. But it takes more time to load and performance also decreases. So it is better to relative path than giving individually…

7

You’ve got three options, each of which has advantages and disadvantages.

First, the relative reference, eg "images/picture.jpg" - this is the one that I would usually go for. It means that when you view the page locally on your computer, you get all the images, and it means that you can move files around and as long as the relationships between them stay the same, the links will continue to work without any further action necessary. This is particularly good when images are stored in the same area as the content they are linked from.

Second, the root reference, eg "/files/images/picture.jpg" - if you keep all images in a centralised location, then depending on what template, CMS or editing system you use, you might find that this is more helpful - it does mean that if you move pages to a different folder or a different point in the hierarchy, the references will still work.

Third, the absolute reference, eg "http://website.com/files/images/picture.jpg" - this is not generally a good idea unless you are preparing content to be shared across multiple domains. The only advantage I can think of is that if someone saves the page to their computer, it will ensure that all images are referenced if the browser doesn’t download them as well. But as others have said, it does increase download time, and is not generally worth doing.

8

My question is why use 16 separate images to compose a larger one? You are increasing HTTP requests (adding 15 more than necessary) and adding file size bloat (the sum of all the smaller images add up to be more than one larger one - assuming optimizations were done in both cases).

EDIT - Is it for rotating ads or something? Even if so, could you not use a css sprite sheet or something instead?

9

I’m going to move forward with my first impulse, relative path, for the solution. But I also want to answer the question of why I am using 16 photos to make one image. That’s because it is a good segway into my next delema.

I am rewriting an existing page. It was written using tables for all of the foramting (including the placement of the 16 JEPG images. It comes no where near meeting any HTML or XHTML standard. Some of the pages do not even have an opening html tag.

So I am using the 16 images because that is the way it was done in the original page. I do not have the luxury of changing that.

Now I am trying to figure out how to re-do the page in XHTML / CSS. But I am not certain how to go about stacking 3 rows of 4 JEPGs togeather seamlessly. Each image is 187 X 166 px in size.

Any ideas?

10

Why not? That would take less than a minute in Photoshop.

Now I am trying to figure out how to re-do the page in XHTML / CSS.

With CSS, there’s no need to slice an image for table cells. You just use a single background image on an element. It sounds like this is your situation. So I would combine them into one. I’m assuming this is not an image gallery or anything like that?

Now I am trying to figure out how to re-do the page in XHTML / CSS. But I am not certain how to go about stacking 3 rows of 4 JEPGs togeather seamlessly. Each image is 187 X 166 px in size.

That’s easy enough: you could float them, for example. But I’m still not convinced this is what you need.

11

View the original page with all 16 images.
Take a screen shot
Cut out the big image
Problem solved.

12

You are correct, this is not a photo gallery. It is like a mosaic, four rows and four collums for a total of 16 individual images. Or like if you took a photograph and cut it up into small squares then pasted them back together again on a page.

I have no idea why it was done that way originally, but that much I am stuck with. I am reading a book as we speak on how to position an image using CSS. It can’t be that difficult, but I have never done it before.

Thanks for the help.

13

If you float the images they will stack up nicely, as long as they are the same height. Here’s some simple code that could be a start (assuming that each image is 100px wide and the images are of equal height):

HTML

<div id="imagebox">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
.
.
.
</div>

CSS


#imagebox {overflow: hidden; width: 400px;}

#imagebox img {float: left; padding:0; border:0;}
14

“Why not? That would take less than a minute in Photoshop.”

I never gave that a thought, I use gimp, but I could create one image from them all I guess.

15

This is very much along the line of what I was trying to work out, but I am just now learning CSS and it was just not comming to me.

I will give this a shot.

Thanks MUCH!

16

It depends on what the need is. If this is just for decoration, use a single background image, but if this is an image gallery, use individual images.

17

Relative path, first can reduce the size of page, it is conducive to search engine spiders.
Use URL is not necessarily conducive to search engine

18

Full path is preferable when you don’t want any confusion about the root.
If you are sure about your root (domain), then it is advisable to use only relative path , because it eliminate extra words for path. On using relative path it don’t need to change frequently your path for testing on local before uploading it.

19

I would go with the relative path as it makes thing easier if you change your domain or are viewing the files locally on your computer. I also recommend you do make the 16 images one big one as it would save a lot of code.

20

I always use the relative path. If you need to move your site from your development to your live server it will make the job a lot easier…