Website images.....load faster

Discussion in 'Photoshop' started by real_estate, Jul 17, 2006.

  1. #1
    What can I do to make my website sbalanprojects.com images load faster?

    SBalan Group
     
    real_estate, Jul 17, 2006 IP
  2. shamess

    shamess Well-Known Member

    Messages:
    1,127
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    185
    #2
    Other than getting a faster server, the speed of the images loading is reliant on the user's ISP, so unless you want to remove some images, there's no easy way of making it load faster.
     
    shamess, Jul 17, 2006 IP
  3. ahref

    ahref Well-Known Member

    Messages:
    1,123
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    170
    #3
    Reduce the images size
     
    ahref, Jul 17, 2006 IP
  4. Scarface.

    Scarface. Peon

    Messages:
    349
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #4
    if you have photoshop you can save them by using (save for web) this way it cuts down on size but not the quality ;)
     
    Scarface., Jul 17, 2006 IP
  5. 8everything

    8everything Peon

    Messages:
    16,350
    Likes Received:
    903
    Best Answers:
    0
    Trophy Points:
    0
    #5
    A agree with Scarface. What I do (on photoshop) is switch from . GIF and .JPG and compare which format gives you the smaller file. If you're reducing quality, I would suggest using .JPG because it looks better than reducing with .GIF (makes it a bit pixelated)
     
    8everything, Jul 17, 2006 IP
  6. slickricky

    slickricky Active Member

    Messages:
    240
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #6
    Forget reducing the image size, what you need is a <div>/css layout. Alot of the images you're using can be completely taken off of your site. (How's that for reduction)

    If you use css, to code some of the things you have as images, your site could probably be improved by 50% or more. PM me if you need help.

    Here's an example site I coded: http://www.collegerecruiter.com/

    Only 10 images on that entire page. The logo, six images for the menu, the main large image, and two images of people in the lower half. And with seven of them being loaded through css, they only need to be downloaded once for the entire site.
     
    slickricky, Jul 17, 2006 IP
  7. real_estate

    real_estate Guest

    Messages:
    79
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hey thanks everyone....Thats been a gr8 contribution...

    SBalan Group
     
    real_estate, Jul 18, 2006 IP
  8. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #8
    A CSS layout will not (or at least shouldn't) affect the number of images you use on your page, and a browser will cache an image that was placed with HTML just as easily as an image that was placed with CSS. Further, your site is not a good model for a CSS layout, and therefore not a good example for someone else to learn from. (I'm stating all of this more for the benefit of the original poster than anyone else.)

    real_estate, normally I would say that Scarface has the right idea: Re-save the pictures with better compression. I have tried to do so for a few of your images, however, and they actually are about as small as they are going to get. So, shamess actually seems to have the only real answer: You need to find a faster server, or you need to scale down how many images you use.
     
    FeelLikeANut, Jul 18, 2006 IP
  9. slickricky

    slickricky Active Member

    Messages:
    240
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #9
    Is this a joke? If you don't think the size of that site could be extremely cut down through the use of css, then you simply don't know what you're talking about. A programmer of any worth, could cut that site down by at least 50%, AND THATS THE BARE MINIMUM!

    And everyone knows that images cached through css, are more reliable than caching them through html. Simply because they're called from the exact same file, and not separate pages (like html), with which there is an opportunity to cause a re-download for a variety of reasons with every page load.
     
    slickricky, Jul 18, 2006 IP
  10. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #10
    The code would be less bloated, certainly, but that has nothing to do with images.

    Whether you say everyone knows it or not, it's simply not true. Browsers associate a cached image with a certain URL; it doesn't matter if that URL came from HTML or from a CSS rule.
     
    FeelLikeANut, Jul 18, 2006 IP
  11. Scarface.

    Scarface. Peon

    Messages:
    349
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #11
    when view in firefox the site is kinda choppy. just to let you know ;)
     
    Scarface., Jul 19, 2006 IP
  12. slickricky

    slickricky Active Member

    Messages:
    240
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #12
    I'm not going to sit here and get in a forum fight. It's ridiculous. Let's just say I know css, and how to use it, and you're still learning. Many of the images would be completely removed with the use of the css background and border properties alone. If you need a lesson or have some questions, I'll be glad to answer them.
     
    slickricky, Jul 19, 2006 IP
  13. some guy

    some guy Active Member

    Messages:
    350
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #13
    Well I've heard of a code optimizer which makes it all load faster. And maybe the way you save the images as.
     
    some guy, Jul 19, 2006 IP
  14. phog

    phog Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    perhaps offer two versions of your page...if someone has an ISP that is not up to todays standards they could view a less dynamic version of your page however if they have a cable/dsl connection then they should be okay with the site...but also the photoshop tip for save for web works well...

    regards,
    phog
     
    phog, Jul 19, 2006 IP
  15. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #15
    One part of that statement displays ignorance, the other is an uninformed and incorrect assumption. If you would like to prove me wrong, here's what you can do: Visit the CSS forum, link to your page (http://www.collegerecruiter.com) and ask for a critique of your CSS layout and code. I think you will find you don't know nearly as much as you believe.

    A background image is still an image, and the user still must wait for it to download.

    We can talk about this again after you've taken my advice to ask the DP community to critique your code.
     
    FeelLikeANut, Jul 19, 2006 IP
  16. slickricky

    slickricky Active Member

    Messages:
    240
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #16
    And this just proves that you don't know what you're talking about. Of course a background image is still an image, but a background color isn't, and many of the those images could be completely removed, through by using background colors and borders instead. Thus the reason I said, "Many of the images could be completely removed."

    Just move on, you're out of your league.
     
    slickricky, Jul 20, 2006 IP
  17. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #17
    I see you haven't taken my advice to ask for a critique of your own code. I never believed you would anyway; your ego is too big to even admit the possibility that you might be wrong. But you did tell me, "if you . . . have some questions, I'll be glad to answer them," so I'm sure you would be glad to respond to these following questions:

    Why does your page not have a doctype? A doctype shifts browsers into standards compliance mode instead of quirks mode. Working in standards compliance mode makes CSS coding much easier. Your CSS uses a hack of some kind about two-dozen times. If you work in standards compliance mode, you should not need to use any hacks about half of the time, and when you do need them, you should only need one or two—certainly not more twenty.

    Why does your CSS use hacks? A hack might stop working or break your design when any browser releases a new version. (You will almost certainly encounter such a case when IE 7 is released.) Conditional comments are cleaner, safer, and more logical.

    Why does your external style sheet links not specify applicable media types? Certainly your style rules are not applicable to braille tactile feedback devices, paged braille printers, handheld devices, paged material, speech synthesizers, or fixed-pitch character grids.

    Why does your "CSS layout" use tables to construct part of the layout? This is counter-productive to the entire concept of coding your design with CSS, and it means you cannot take advantage of the long-term benefits of a CSS-based layout.

    Why do you set classes and IDs and link to external style sheets, and yet still write inline styles? Hard-coding styles into a page, once again, means you cannot take advantage of the long-term benefits.

    Why do you use class names that do not reflect the page's structure (e.g., left, top, right, red, etc.)? When it comes time to change the design and rewrite your CSS, what if an object identified as "left" no longer goes on the left?—or if an object identified as red will no longer be red?

    Even your HTML is a mess: you don't quote non-literal attributes, you don't give alternative text for your images, you don't nest your tags correctly, you don't escape character entities in URLs, and you open quotes that you don't close.

    Perhaps I should rebuild that page for you, so you can see what structured HTML and a true CSS layout would look like.
     
    FeelLikeANut, Jul 21, 2006 IP
  18. liquidboy

    liquidboy Peon

    Messages:
    281
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #18
    from experience a css image solution definetely improves a sites performance (see this as an example) www.smh.com.au.

    For the common images it uses a image map (all the logical images are stamped onto a single image) and a css is used to access each image as needed.

    When this site originally had individual images it took on averge 30-60seconds to fully load. But after the redesign it can load in under 10 seconds...

    css a winner in this case!
     
    liquidboy, Jul 22, 2006 IP
  19. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #19
    HTML is actually just as capable of creating an image map as well. You could have used that same technique long before CSS came around.
     
    FeelLikeANut, Jul 22, 2006 IP
  20. slickricky

    slickricky Active Member

    Messages:
    240
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #20
    Perhaps you should get a clue about how back end files work before you shoot off at the mouth. Anything that would keep the site from "using the long term benefits" as you put it, is used in an include file across the entire site, and can be removed and or changed from a single file. So I'm saving the website owner time and money by not wasting time on compliancy.

    The table structure, the quotes, and other issues you bring up are all done in the interest of saving time and bandwidth. These are things that don't hurt a page's performance, and actually the lack of extra characters actually increases performance site wide.

    Of course, I could run a page through a validator, and copy and paste the comment just as easily myself, it's oh so constructive.

    But this deflection to my site is of course necessary when you've obviously been shown to not know that changing an image to a background color would save bandwidth for the original poster's website.
     
    slickricky, Jul 22, 2006 IP