Image links in CSS

  • Unknown's avatar
    unfunnyme · Member ·

    According to the WordPress forum, one of the ways to help pages load faster is by removing the HTTP portion of the links and images. I have been able to get this to work in my posts when I link to another post or page on my site, and it prevents self pings as well.

    Example: I can crop a link in a post that refers back to another post from this: http://unfunnyme.com/2011/02/07/okay-okay-i-lied-sue-me/ to this: /2011/02/07/okay-okay-i-lied-sue-me/

    However, I can not get this same method to work on images in the posts or pages, or in my CSS upgrade where I have altered some background images in the Greyzed theme.

    I would greatly appreciate it if someone could help me accomplish this.

    Thanks, TMarie

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    I would suggest against this at wordpress.COM and the actual benefit you are going to get in page loading times is going to be minimal unless you have an extremely large, complex site with a huge amount of post and pages.

    Secondly, your CSS customization file is in a totally different place from your image files and there isn’t a relationship between them – or if there is, it is extremely disjointed.

    Thirdly, even if you were to get the relative links on images to work, if you ever move away from wordpress.COM to a self-hosted installation, the importer is used to dealing with the standard links, so it will not know how to modify those links to work with the new installation and you will have a big job manually updating all those links.

    In my opinion this is not a good idea.

    Drawbacks = huge
    Benefits = tiny

  • Unknown's avatar
    unfunnyme · Member ·

    Whooops! I’m talking about the image SOURCE not the links. I should be able to limit the number of HTTP requests on a post, page, or in the CSS by shortening the source code from this: <img src=”http://unfunnyme.files.wordpress.com/2011/02/my-unvalentine.png”> to this: <img src=”/2011/02/my-unvalentine.png”> – correct?

    Except, it doesn’t work! Please help!

  • Unknown's avatar
    unfunnyme · Member ·

    To thesacredpath:

    Any ideas why my pageloads are so slow then, or how to speed them up? I have optimized all the images, but maybe going to two different sources for the background images is slowing things down? The problem started after I altered the existing background images, uploaded them to my media library on wordpress and used them in my css. I have descent knowledge of css, if that helps.

    Thanks again for any help. My link is http://unfunnyme.com/ if anyone can comment on page load time.

  • Unknown's avatar
    thesacredpath · Member ·

    When I did resource tracking on your site, the bulk of the time required is in loading the images for the theme, and using relative URLs is not going to fix that. a 642k file is going to take x seconds to download no matter whether the URLs are absolute or relative.

    unfunnyme.files.wordpress.com/2011/02/new_wrapper_bg.png is 642k
    unfunnyme.files.wordpress.com/2011/02/wrapper1.png is 584k

    According to pingdom.com:

    total site load time: 5.7 seconds
    total images downloaded: 1.9MB (including all images to display the front page)

    The images take the vast majority of the page load times. You might want to look at getting the two images above smaller. This could be accomplished by going to jpg compression instead of png. I would recommend getting those two background images above down to about 100k or even less if you can.

  • Unknown's avatar
    unfunnyme · Member ·

    Thanks thesacredpath!

    I was under the misguided impression that a png would load faster than a jpg. I will re-do them as jpg compressed and see if that improves things.

  • Unknown's avatar
    thesacredpath · Member ·

    With custom CSS, there is NO relative path from your custom CSS file to your images. They are on entirely different servers.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

    PNGs have a lower level of compression and for graphic style images they will retain more sharpness, but with the physical size of the images in Greyzed (h x w) they get quite large. JPG might be a touch fuzzier, but will compress better.

  • Unknown's avatar
    unfunnyme · Member ·

    @thesacredpath

    unfunnyme.files.wordpress.com/2011/02/new_wrapper_bg.png is now 252k jpg

    this other one:
    unfunnyme.files.wordpress.com/2011/02/wrapper1.png

    was only used on private page I was working on to be a static front page and was specified like so:

    .page.page-id-1405 #wrapper {
    background:url(‘unfunnyme.files.wordpress.com/2011/02/wrapper1.png’) no-repeat scroll center top transparent;
    }

    I can’t understand why this piece of css would have been loading with my current front page, but if it was it certainly would have slowed things down because it would have been loading 2 background images for the same #wrapper.

    Either way, I have deleted all of the CSS for page 1405, since it was all experimental anyway to see if I could have a static front page without the sidebar navigation, etc…

    Would you mind terribly sending me a link to check my page load times or re-checking for me?

    Thanks much! – TMarie

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome. Here is the link (without the http:// since I might get sent to the akismet dungeon. Seems most times when I include an external link I get dungeoned.)

    tools.pingdom.com/

    With load times in the 5-7 second range, I would not worry at all. I have complex client sites that even after I’ve tweaked them to the max to minimize load times are still up around 9 seconds. With pingdom load times under 7 seconds, I don’t even bother to do much optimizing.

  • The topic ‘Image links in CSS’ is closed to new replies.