Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Image Optimization Issues

    Hi,

    I have an art site (still in progress) and my images are optimized to png-28 with transparency (they have drop shadows). They load slowly, doing that progressive load thing... So far I've been experimenting with saving them as jpg's since I can get a smaller file size, but unless I make them so small that the image suffers they still tend to take more time to load than I want.

    I've seen sites with super high res images that load in a flash. How is this done?
    Thanks!

    http://alexcieminski.com/pages/big_i...ciliation.html

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    1) Unless you need transparency, it's more efficient to use .jpg. I downloaded one of your png images and it was 132KB on my PC. After optimising for the web with 88% compression and removing some of the jpg header data in Photoshop, I saved the file and its size on my PC is now only 7.7KB. Other image editing software should also allow you to compress jpg's to whatever you like before image quality is affected.

    I have attached the optimised file (without the transparency).

    2) You can preload the images (cache them in your browser) using javascript while the page is loading so that they are fully downloaded when the page has finished loading. They will then appear "instantaneously" when they are needed.

    You can preload images using something like -
    Code:
    var myImage = new Image();
    
    myImage.src = '/pathTo/somePic.jpg';
    in the <head>

    Then when an <img id='imgID' src='' alt=''> needs a pic to be assigned to it, you can do -

    Code:
    document.getElementById('imgID').src = myImage.src;
    and the image will appear straight away.
    Attached Thumbnails Attached Thumbnails Image Optimization Issues-b_red_yellow.jpg  
    Last edited by webdev1958; 03-08-2012 at 12:44 AM.

  • Users who have thanked webdev1958 for this post:

    AlexanderC (03-09-2012)

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Preloading via JavaScript like that would actually slow the loading of the page - any JavaScript in the head slows the page from loading because browsers can't download other files while a JavaScript is downloading whereas they can download 8 files at a time as long as none of them contain JavaScript. That's one of the reasons why it is now recommended to put all JavaScript at the bottom of the page. If you do put the script at the bottom then it will load the images as soon as the page finishes loading so they will still possibly be available by the time they are asked for if they are not a part of the page as initially displayed.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    I thought the preloading of images is done in a parallel stream to the "normal" javascript, so the total time it takes for a page to load is the same whether you put the js in the <head> or just above the </body>

    The only advantage I see in putting js just above the </body> is that the actual content appears in the browser a fraction of a second sooner, but the total load time for the page (js, images, css, html) will be the same.

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    These are good suggestions. Thanks. I might go to jpg's but i do want that drop shadow so I might just have to be ok with a slower load time. I'll see.

    I was actually wondering about preloading with js. Didn't know it was possible though. I'm not sure I have the energy to work out more script though.

    About having the java in the head: I have my initialization script at before the closing body tag, but does it make a difference to also put the links such as:
    <script type="text/javascript" src="../../scripts/zoomy.min.js"></script>
    at the bottom too?

  • #6
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Technically js can be placed in the <head> or <body> but any js that tries to access any html elements can be run only after the html element has actually loaded into the DOM.

    While any js is loading, none of the html is being loaded so techinically yes, putting js just above the </body> will result in the html above the js appearing a fraction of a second quicker than if the js was in the <head>. So unless you are running a huge amount of js or doing something unusual, most times you won't notice any difference in page loading time whether the js is in the <head> or above the </body>

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    No, just a few snippets of Java. I couldn't really tell a difference. But might as well but it at the bottom since it is interacting with the html.

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I often use Smush.it to compress images even further without a visible quality loss (jpg, png and gif). Sometimes it spares just 5%, sometimes 50%.
    Last edited by Aedan; 03-18-2012 at 05:40 PM.

  • #9
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by AlexanderC View Post
    Hi,

    I have an art site (still in progress) and my images are optimized to png-28 with transparency (they have drop shadows). They load slowly, doing that progressive load thing... So far I've been experimenting with saving them as jpg's since I can get a smaller file size, but unless I make them so small that the image suffers they still tend to take more time to load than I want.

    I've seen sites with super high res images that load in a flash. How is this done?
    Thanks!

    http://alexcieminski.com/pages/big_i...ciliation.html
    use photoshop to save as> for web

    then put a drop shadow into your CSS.

  • #10
    New to the CF scene
    Join Date
    Apr 2012
    Location
    Essex
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Google have a pretty cool lossless compression tool at https://developers.google.com/pagespeed/


  •  

    Posting Permissions

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