SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image source: Relative Path or URL ?

    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. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by inconspicuous View Post
    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)
    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)

  6. #6
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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.
    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. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by willyd57 View Post
    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?
    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. #8
    SitePoint Enthusiast nrg_alpha's Avatar
    Join Date
    Dec 2008
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by willyd57 View Post
    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.
    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. #9
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by willyd57 View Post
    I do not have the luxury of changing that.
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    View the original page with all 16 images.
    Take a screen shot
    Cut out the big image
    Problem solved.

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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

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

    Code:
    #imagebox {overflow: hidden; width: 400px;}
    
    #imagebox img {float: left; padding:0; border:0;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "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. #15
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

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

    Code:
    #imagebox {overflow: hidden; width: 400px;}
    
    #imagebox img {float: left; padding:0; border:0;}

    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. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by willyd57 View Post
    I never gave that a thought, I use gimp, but I could create one image from them all I guess.
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  17. #17
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #18
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #19
    SitePoint Zealot My220x's Avatar
    Join Date
    Dec 2008
    Location
    United Kingdom
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #20
    SitePoint Zealot evilunix's Avatar
    Join Date
    Jun 2008
    Location
    York, UK.
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  21. #21
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's best to use relative paths instead of URLs. It just doesn't just save up space(which helps your site load faster) it also helps from hotlinking.

  22. #22
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)

    Thumbs down

    Quote Originally Posted by peter0611 View Post
    It's best to use relative paths instead of URLs. It just doesn't just save up space(which helps your site load faster) it also helps from hotlinking.
    FALSE. The type of path you use makes absolutely no difference as to whether people can hotlink your images.

    If I visit your website, and there is an image referenced in the page, the URL interpreted by my browser will be the same whether you have used a relative, root or absolute path. If I right-click on the image and select "Copy image location" (or whatever phrase your browser of choice uses), that will give me the complete and absolute URL of the image, regardless of whether you have used a relative, root or absolute reference in the page.

    Anyone who is savvy enough to look at the source code for the image URL will almost certainly be savvy enough to piece together a relative reference with the address of the page to produce a complete URL for the image.

  23. #23
    SitePoint Enthusiast nrg_alpha's Avatar
    Join Date
    Dec 2008
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by peter0611 View Post
    It's best to use relative paths instead of URLs. It just doesn't just save up space(which helps your site load faster) it also helps from hotlinking.
    In addition to Stevie D's comments, while shorter relative pathnames use less characters (and thus less characters are used in the document in question) I would be hard pressed to believe that the speed difference would be noticable (granted, having said that, I have nothing against squeezing the document size down as much as can be realistically done).

    IMO, the greater advantage to relative paths is what others have mentioned; ease of use on either localhosts or live production servers without fussing over pathing when going from one to the other.

  24. #24
    SitePoint Enthusiast amirsyazi's Avatar
    Join Date
    Oct 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by evilunix View Post
    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...
    Same as I am...


  25. #25
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by evilunix View Post
    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...
    yes, always it would be best to give the relevant path, instead of giving all URLs.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •