Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Member Pink Spider's Avatar
    Join Date
    Nov 2011
    Location
    Wimbledon, London
    Posts
    58
    Member #
    30014
    Liked
    2 times
    Hi everyone

    I'm trying to speed up one of my page's load times and instead of putting my images (screen grabs of websites I've designed) within a div, I'm putting them as a background image.

    This works absolutely fine. But I want the images (or what is within the div) to link to the websites themselves.

    I've put the name of the website in the div and put text-indent: -3000px but that understandably shifts the link that way too.

    Does anyone know of a solution to this problem?

    Many thanks

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    That's not really going to speed up your load time. The image is still going to be the same size regardless.

    Here's how you'd have to handle something like that, though. I'm assuming your screen caps are 400 x 300 pixels just to make this easier. Adjust accordingly.
    Code:
    div.screen-capture {width:  400px;  height:  300px;}
    div.screen-capture a {display:  block;  width:  400px;  height:  300px;}
    div.screen-capture a span {text-indent:  -3000px;}
    div#website-1 {background:  URL(screen-capture-1.jpg) top left no-repeat;}
    ...
    Code:
    <div class="screen-capture" id="website-1">
    <a href="http://www.website1.com" title="Website 1"><span>Website 1</span></a>
    </div>
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Also make sure if you are using .jpg as your image format to change your resolution to 72 DPI, browsers are only capable of displaying at that level so if you export them out at 150 or 300 DPI , it's just overkill... You can also drop the quality of the image to about 70% before it actually is noticeable to most people... Seen a better than 20% drop in file size just reducing the image quality to right at 70%.

  5. #4
    Member Pink Spider's Avatar
    Join Date
    Nov 2011
    Location
    Wimbledon, London
    Posts
    58
    Member #
    30014
    Liked
    2 times
    Thanks very much for the advice. Although I though that having the images as background in the CSS as a separate style sheet speeded up load time...

    @TheGame1264 - I'll give that code a go (once I've got over the weekend!). Many thanks for that, it'll come in really useful.

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Technically, It really doesn't matter, the first load is the same.

    But to your point,'it's always good practice to have any of the images that you use for styling, menus logos,etc. Called from an external style sheet. Once it's loaded into memory ( or temp Internet files ), your browser won't request the from the server again, unless their browser is set to download all the files everytime.

    For images that are just part of content, not any real benefit to calling them from the CSS, unless of course you use this same image on multiple pages in the site. But for this images, optimizing their size and resolution is key. Some designers/developers try and load content text above images so if the user has a slow Internet connection ( not everyone has broadband ), they have something to read while the images are loading.

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    If you want to speed up or improve the experience during image load time, there are a few things that would help you with that...

    1. Modify your .htaccess to use mod_deflate to compress content. This will decrease the total # of bytes sent to the browser (in the case of HTML, JS & CSS, by as much as 80%!!)

    2. Use Image sprites to combine many images into a single file. This will usually decrease the overall # of bytes of that file, and will act as a single download.

    3. If you want to make the images render at the same time as the rest of the content, you may consider using a preloader script. Not suggested if you're concerned about SEO, though.

    4. For a better user experience, you may also consider using a "default" image as a background to a containing div with a fixed width and height, which will load first and occupy the space the image will take once fully loaded. This will effectively give you a 1-2 image loading experience, which can be nice.

    Cheers.

  8. #7
    Member Janja's Avatar
    Join Date
    Aug 2011
    Location
    Vista, CA
    Posts
    54
    Member #
    28823
    Liked
    3 times
    I agree with the said above. But the answer to your problem would be to give your div with the -3000 margin the height and width of the image and choose display:block, in theory. That should move the link back into view. Read more about image-replacement here : http://css-tricks.com/630-css-image-replacement/

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Quote Originally Posted by smoseley, post: 226699
    1. Modify your .htaccess to use mod_deflate to compress content. This will decrease the total # of bytes sent to the browser (in the case of HTML, JS & CSS, by as much as 80%!!)
    Just to extend this point...for the Windows/IIS folks, in IIS6/7 content compression can be enabled directly on the server. I usually enable it for the default site and then as I add the sites, it's already there.

    Make sure you enable for both static and dynamic content. For some reason, they're kept separate and I never fully understood the reason why.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:18 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com