Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Reducing the size of my images

  1. #1
    cew
    cew is offline
    Member cew's Avatar
    Join Date
    Apr 2010
    Posts
    56

    Default Reducing the size of my images 15 Apr 2010 @ 19.00

    Hi there. I have been working on a new website http://www.courtney.co.za, but the site is taking to long to load. I have combined the css and javascript files but my images are still slowing things down. What is the best way to optomize images. I have a variety of different applications, including photoshop, paint shop pro, corel photo paint, irfan view and fast stone image viewer. All these applications have advanced saving features for jpeg where increasing the compression results in smaller file sizes but then the images loose their crispness.

    Any suggestions would be greatly appreciated.

    Many thanks
    CEW
      Reply With Quote

  2. #2
    Trusted Guru Frinkky's Avatar
    Join Date
    Dec 2008
    Posts
    1,678
    Blog Entries
    1

    Default 15 Apr 2010 @ 20.08

    Just using the headmast-home.jpg in photoshop - 50% quality looks acceptable, 34kb down from 93kb. Below this shows slight compression artefacts, but there has to be give and take.
    Assuming you have the uncompressed original, it should look even better and going down to even 40% might be acceptable. Use progressive rather than optimised for a couple of kb saving too.

    I think you might have been over analysing the compressed images - don't squint at the screen with your nose smeared against the glass your site visitors won't.
      Reply With Quote

  3. #3
    cew
    cew is offline
    Member cew's Avatar
    Join Date
    Apr 2010
    Posts
    56

    Default 15 Apr 2010 @ 21.34

    quote
    Just using the headmast-home.jpg in photoshop - 50% quality looks acceptable, 34kb down from 93kb. Below this shows slight compression artefacts, but there has to be give and take.
    Assuming you have the uncompressed original, it should look even better and going down to even 40% might be acceptable. Use progressive rather than optimised for a couple of kb saving too.

    I think you might have been over analysing the compressed images - don't squint at the screen with your nose smeared against the glass your site visitors won't.
    Originally Posted by Frinkky View Post
    Thanks for the reply.
    I opened up the original headmast-home in corel photo paint and increased the compression. This got the file size down to 50kb. It is okay, I think, although I recon it could be better. Will have to experiment somemore.
      Reply With Quote

  4. #4
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 16 Apr 2010 @ 00.29

    Taking a broad performance view, your website is doing quite well. The two problem areas are image optimisation and caching (see this analysis of your site from AOL). So you're definitely on the right track. :001_smile:

    The main problem with your images is that you're using only JPGs. JPGs are appropriate for photographs, but for graphics you should be using PNG. For example, green-yellow.jpg would compress to almost nothing as a PNG-8, and it would look better too. You may also be able to sprite some of these graphical images (probably not the photos).

    The second problem is that you're not taking advantage of lossless compression. Tools such as JPEGtran and PNGcrush allow you to remove useless data from images, reducing the file size without affecting quality. The first step should always be to perform lossy optimisations (as much as you can without ruining the quality), but after that you can get significant additional savings from lossless compression.

    According to Google Page Speed, lossless optimisation of you images could save 173 kb (a 59% reduction). You may also want to look at Smush.it, but bear in mind this will not remove copyright meta-data from JPEGs.

    Apart from images, your other big problem is caching. None of your resources have a far-future expiry. This means that subsequent page views are greatly slowed down, as you're not taking advantage of browser caching.

    Once you've fixed both these problems, you'll be in pretty good shape. :001_smile: If you want to improve your performance even more, however, you should consider using a CDN for static assets (images, javascript, css...). Nowadays there is a CDN for every budget; Amazon Cloudfront has zero up-front costs -- you just pay a tiny charge for bandwidth use.

    You should combine your screen and print stylesheets into one all-media stylesheet, like this:

    Code:
    @media screen {
    /* all screen styles go here */
    }
    
    @media print {
    /* all print styles go here */
    }
    This saves one HTTP request. You could also try sharding dominant domains, but I suspect this won't make much difference as you only have 17 HTTP requests.

    Looking a bit deeper into your website's performance profile, I notice that your HTML document is taking an extraordinarily long time to arrive: over 3 seconds! That's about 5--10 times longer than it should be. Your first stylesheet is also taking a long time (over 1 second).

    Both these resources are extremely small, and I can see that the time is not spent on downloading but on the DNS lookup, establishing a connection, and waiting on the server. Something smells wrong here! Your web host may be overloaded.
    Last edited by Mike Hopley; 16 Apr 2010 at @ 00.33.
      Reply With Quote

  5. #5
    cew
    cew is offline
    Member cew's Avatar
    Join Date
    Apr 2010
    Posts
    56

    Default 16 Apr 2010 @ 05.16

    Hi Mike
    Thank you for your detailed response
    Good call on the png-8 for the little blocks and menu graphics. I can also combine the menu background graphic with the a:link and a:hover graphic which is already a sprite.
    I did try the google page speed loosless compression for the photographs, but to be honest it is not so lossless!
    Will look at Sma**** which is packed with y-slow.
    The caching issue I have also been looking into but I can't figure out how to set expire dates on my server
    All said and done though I think your final observation has hit the nail on the head ... why is it taking so long to call up the actual html page and css? I sit here on my side and look at a blank screen for a few seconds, which should not happen.
    My hosting company assure me it is not them, they have run their checks and everything comes up clean. They are pretty good and I have used them for years so I am inclined to believe them.
    Could it be becuase I am using php includes and as such have had to use absolute url refrences? Does anyone know how to get around this?
    A further observation, according to google page speed, my page has a score of 86/100 compare this to your web site which hits 97/100 and Frinkky's website which has a score of 80/100. My point is, I think I am pretty average. The part where my site hits bottom though, unlike both of yours, I have to wait a couple of seconds for html page to respond, resulting in a noticable and annoying delay.
    Last edited by cew; 16 Apr 2010 at @ 05.28.
      Reply With Quote

  6. #6
    cew
    cew is offline
    Member cew's Avatar
    Join Date
    Apr 2010
    Posts
    56

    Default 16 Apr 2010 @ 05.20

    quote
    Code:
    @media screen {
    /* all screen styles go here */
    }
    
    @media print {
    /* all print styles go here */
    }
    Originally Posted by Mike Hopley View Post
    Do you do this in a css style sheet? Would I put all my styles between the brackets?
      Reply With Quote

  7. #7
    Trusted Guru Frinkky's Avatar
    Join Date
    Dec 2008
    Posts
    1,678
    Blog Entries
    1

    Default 16 Apr 2010 @ 06.28

    I know its not nice, but can your hosting company give you urls to other websites? (just to show its no them). It is there responsibility to prove they are sound.
      Reply With Quote

  8. #8
    cew
    cew is offline
    Member cew's Avatar
    Join Date
    Apr 2010
    Posts
    56

    Default 16 Apr 2010 @ 07.11

    here is another site hosted by the same company on the same server Greenlands Meats I also made this site, but it does not use php includes and on my side at least, definately does not have that delay.
    Here is another one of my sites http://www.chouselive.co.za/ again the delay and again the php includes.
    I did check, the server has the latest version of php installed.
    Wordpress, however, on this server does not have the delay.
      Reply With Quote

  9. #9
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 16 Apr 2010 @ 10.50

    quote
    I did try the google page speed loosless compression for the photographs, but to be honest it is not so lossless!
    Originally Posted by cew View Post
    Really? Your eyes must be better than mine, as they look pixel-for-pixel identical to me. :p I tried flicking between them in two browser tabs, but I could see a single pixel change.

    Unless, perhaps, you're viewing them in IE and the optimisation removes a gamma chunk.

    quote
    The caching issue I have also been looking into but I can't figure out how to set expire dates on my server
    Do you have access to an .htaccess file? Check out Yahoo's performance best practices for the code to do this.

    quote
    Could it be becuase I am using php includes and as such have had to use absolute url refrences?
    This really shouldn't matter. I use lots of PHP in my site, and it's not even very well coded PHP. And I don't understand your point about "absolute url references". Why would that matter?

    Maybe you could post your PHP code, and we could see if you're doing something nutty like an unending loop.

    And here's a test you can do: upload a simple text file (test.txt) to your website, and test the response times to it. If the text file takes a similar time as your web pages, then you have a serious problem with your server.

    Using this comparison, you can approximate how much time is being spent on PHP processing/includes/database access.
    Last edited by Mike Hopley; 28 Jul 2010 at @ 16.11.
      Reply With Quote

  10. #10
    cew
    cew is offline
    Member cew's Avatar
    Join Date
    Apr 2010
    Posts
    56

    Default 17 Apr 2010 @ 00.34

    Thanks guys. I really appreciate your help here.

    quote
    Really? Your eyes must be better than mine, as they look pixel-for-pixel identical to me. :p I tried flicking between them in two browser tabs, but I could see a single pixel change.
    Originally Posted by Mike Hopley View Post
    Yes you are right. I am a little mad in the head.

    quote
    Do you have access to an .htaccess file? Check out Yahoo's performance best practices for the code to do this.
    Originally Posted by Mike Hopley View Post
    I do have access to my .htaccess file but it appears I need to configure apache to allow browser caching first. I have sent an email to my host asking them to help me with this as I have no idea what I am actually doing and they are normally very helpful

    quote
    This really shouldn't matter. I use lots of PHP in my site, and it's not even very well coded PHP. And I don't understand your point about "absolute url references". Why would that matter?
    Originally Posted by Mike Hopley View Post
    I don't think any of this should matter, but only suggested them as it is something different between the different websites examples.
    As for absolute referencing I simply mean my link look as follows:
    HTML Code:
    <link rel="stylesheet"  href="http:www.courtney.co.za/00/styles/default.css" type="text/css"  media="screen" />
    quote
    Maybe you could post your PHP code, and we could see if you're doing something nutty like an unending loop.
    Originally Posted by Mike Hopley View Post
    I am only using php includes and I know I have put the pages together correctly because the end result validates.

    Here is a copy of my head section.
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"  lang="en">
    
    <head>
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type"  />
      <title><?php echo $title; ?></title>
      <meta name="keywords" content="<?php echo $keywords; ?>"  />
      <meta name="description" content="<?php echo $description;  ?>" />
      <link rel="stylesheet"  href="http://localhost//courtney/00/styles/default.css" type="text/css"  media="screen" />
      <script type="text/javascript"  src="http://localhost//courtney/00/scripts/jquery.js"></script>
    And here you can see it put to work on a page:
    PHP Code:
    <?php
    $keywords 
    "";
    $description "";
    $title ="Courtney House International School";
    $active_page ="home";
    ?>
    <? 
    include("head.php"); ?>
    All very standard so I can't imagine that any of this could be the problem.

    quote
    And here's a test you can do: upload a simple text file (test.txt) to your website, and test the response times to it. If the text file takes a similar time as your web pages, then you have a serious problem with your server.

    Using this comparison, you can approximate how much time is being spent on PHP processing/includes/database access.
    Originally Posted by Mike Hopley View Post
    Well here is a link on the same site to a plain html web page Synopsis

    And here is a link to the xml site map which is just a text document:
    http://www.courtney.co.za/sitemap.xml

    What is the best way to actually test this?

    Thanks again for all your time.

    CEW
      Reply With Quote

Page 1 of 2 12 LastLast

Similar Threads

  1. Reducing Images file size for web
    By Jacob in forum Imagery, Graphics & Typography
    Replies: 12
    Last Post: 25 Apr 2012, @ 11.46
  2. How to fix squeezed images?
    By Schwarz in forum Just Starting Out - Help Me!
    Replies: 1
    Last Post: 1 Feb 2011, @ 22.53
  3. Asset Images
    By Tom in forum Coffee House
    Replies: 2
    Last Post: 15 Sep 2010, @ 07.33
  4. screen size
    By sudhakararaog in forum HTML & CSS
    Replies: 3
    Last Post: 15 May 2010, @ 18.44

Tags for this Thread

Posting Permissions

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