Web Analytics Made Easy -
StatCounter Preloading images - CodingForum

Announcement

Collapse
No announcement yet.

Preloading images

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Preloading images

    Is there a baseline size wise where preloading images is better than not. Meaning if i have 1 or two images per page and they are under 50kb each, is there even any benefit to preloading at all. I was thinking that preloading might make the index load alittle slower but the rest of the pages would load faster because the images are already in memory. But with the size so small is there really any benefit?

    The largest file i have is about 85kb i believe. And probably be about 10 to 15 pics total for the preload.

    And example of 1 file would be something like this either using prload or prefetch..

    HTML Code:
    <link rel="preload" as="image" href="https://www.example.com/images/picture.png">
    What i did was i put the link code in an include file and then in the head i used include_once to only load it once.. otherwise i would be preloading every time a page loaded.
    Last edited by durangod; Jan 24, 2020, 02:37 PM.
    If a php file only has php code within it you do not need to use the closing php tag
    A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
    durangod is short for durango dave

  • #2
    I would say that preloading is suitable for any image that should be displayed immediately when called.
    But not for images displayed per default on the page, nor for gallery images.
    Occasionally a connection can be delayed, either due to a busy/slow server or a busy/slow client, which can result in the image not being transfered immediately.

    So if you e.g are using images for buttons, and you wanna make sure that the mouseover/onclick picture is displayed as soon as you mouse over or click the button, preloading would be suitable.

    My prefered method for preloading images is by calling them by ordinary image tags set to be hidden.
    Index Dot Html/Css - Download a jQuery Library - The W3C Markup Validation Service

    Comment


    • #3
      The preload LINK is shockingly ineffective for images; but it REALLY depends on the page. Really you should restrict preload to any file you want loading before the page layout shows. Using it in other cases can in fact slow the "ready" time of the page as preload are SUPPOSED to hang the render until the file is done.

      In cases like this, you might be better off making sure your hosting supports HTTP 2 "push" (formerly known as SPDY) and sending the links in your HTTP headers instead. This way they share the handshake with the document itself. The issue there is one of the fact that you really only see benefit for push with the first eight files, and anything past that sees little benefit. Basically this doubles the "free handshake" count to 16, setting a minimum of 8. (instead of 8 with a minimum of 1).

      Realistically I'd have to see the site in question to properly weigh in on where optimization efforts should go.

      Side note, are you optimizing for webp with graceful fallback? The size savings of webp often outweighs fancy LINK / push trickery.

      Remember:
      Code:
      <picture>
        <source srcset="testImage.webp" type="image/webp">
        <img src="testImage.jpg" alt="Alt Text!">
      </picture>
      ... and

      Code:
      @supports (background-image:url("image.webp")) {
        // webp supported. image.webp does NOT actually need to exist as a file
      }
      I'll kill you and your dreams tonight, begin new life.
      Bleed your death upon me, let your bloodline feed my youth.
      https://cutcodedown.com

      Comment


      • #4
        Thanks for the examples.. I am also trying to figure out how to convert my images using PS cs3 from jpg/jpeg to jpeg 2000 as it is suppose to have better compression. But my PS does not have the jpeg 2000 option. I wonder if i can import the jpeg 2000 codec into my PS, is there a resource ?
        If a php file only has php code within it you do not need to use the closing php tag
        A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
        durangod is short for durango dave

        Comment


        • #5
          Originally posted by durangod View Post
          Thanks for the examples.. I am also trying to figure out how to convert my images using PS cs3 from jpg/jpeg to jpeg 2000 as it is suppose to have better compression. But my PS does not have the jpeg 2000 option. I wonder if i can import the jpeg 2000 codec into my PS, is there a resource ?
          JPEG 2000 is poorly supported both by tools and by browsers, and provides compression that's really no better than webp. It also lacks the alpha transparency capabilities .webp opens the door to, so I'd just save as lossless PNG and then convert to WebP either using PHP or an online converter.

          Since even PHP 7 has .webp output capability now. As does the GIMP... which being free, well...

          JPEG2000 is a 20+ year old protocol that NEVER gained traction, and at this point is a technological dead-end. Kind of like XHTML. Don't even bother, as .webp gives you all that JPEG2000 provided and more, and has seen near overnight adoption across all browser engines.

          Lemme put it this way.

          JPEG 2000:
          https://caniuse.com/#feat=jpeg2000

          WEBP:
          https://caniuse.com/#feat=webp

          Tells you most of what you need to know. The ONLY browser with out-of-box support for Jpeg 2000 is Safari. You can THEORETICALLY use it in legacy IE if you have Flash or Quicktime plugins installed, but only in an OBJECT tag.

          Much akin to how SVG only worked in IE using EMBED if you had the Adobe SVG plugin installed, with no other browsers supporting it until the mid-2000's. It was stillborn and left in a dumpster by its creators (Microsoft and Adobe), until for some reason the W3C came along, played Dr. Frankenstein, and carried its broken reanimated corpse across the finish line.
          Last edited by deathshadow; Jun 28, 2020, 09:15 PM.
          I'll kill you and your dreams tonight, begin new life.
          Bleed your death upon me, let your bloodline feed my youth.
          https://cutcodedown.com

          Comment


          • #6
            Thanks now that i look again, that was an old article i was reading.. thanks for helping to stop me from waisting my time on that...
            If a php file only has php code within it you do not need to use the closing php tag
            A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
            durangod is short for durango dave

            Comment


            • #7
              Oh i forgot to ask, would it be a good investment to just write a php function to convert the images to webp on the fly. Like i could just call my php function right before the img tag on the pages, is that resource wise?

              Hows this ?

              PHP Code:
              function imageConvertToWebp($source$destination$quality=80)
              {
              $extension pathinfo($sourcePATHINFO_EXTENSION);

                 if (
              $extension == 'jpeg' || $extension == 'jpg')
                 { 
                    
              $image imagecreatefromjpeg($source);

                   }elseif (
              $extension == 'gif')
                      {
                        
              $image imagecreatefromgif($source);

                       }elseif (
              $extension == 'png')
                          {
                            
              $image imagecreatefrompng($source);
                           }

                   return 
              imagewebp($image$destination$quality);

              }
              //close function imageConvertToWebp 
              Last edited by durangod; Jun 28, 2020, 10:29 PM.
              If a php file only has php code within it you do not need to use the closing php tag
              A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
              durangod is short for durango dave

              Comment


              • #8
                It's not a horrible idea. Something I've been implementing is a 404 handler that intercepts 404 on .webp, and if a png or jpeg exists, it creates a .webp from that, saves it so next time it doesn't 404, and sends it with a 200 response replacing the 404. I've been doing the same thing with thumbnails, checking the 404's $_SERVER['REQUEST_URI'] for the presence of "@thumb", and if present in the filename creating the appropriate thumbnail in the same manner off an @full if it exists.
                I'll kill you and your dreams tonight, begin new life.
                Bleed your death upon me, let your bloodline feed my youth.
                https://cutcodedown.com

                Comment


                • #9
                  Well i tried the function and also tried this and i cant get it to work...

                  HTML Code:
                  <picture>
                  <source srcset="https://example.com/docs/images/imagename.webp" type="image/webp">
                  <img src="https://example.com/docs/images/imagename.png" alt="some image"  />
                  </picture>
                  i also tried this

                  PHP Code:

                  $webpimage 
                  imageConvertToWebp('https://example.com/docs/images/imagename.png'); 


                  and with all attempts, all i get is this on the page
                  Click image for larger version  Name:	image_18387.jpg Views:	4 Size:	3.6 KB ID:	2424660


                  Sure seems like a ton of extra coding just to post an image..

                  UPDATE: looks like issue was i added a content header for the webp and i didnt do it right lol, well thats one issue out of the way..
                  Last edited by durangod; Jun 28, 2020, 11:44 PM.
                  If a php file only has php code within it you do not need to use the closing php tag
                  A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
                  durangod is short for durango dave

                  Comment


                  • #10
                    Originally posted by deathshadow View Post
                    It's not a horrible idea.
                    This is probably the closest to praise you’ll ever get from deathshadow
                    Stop solving problems you don’t yet have!

                    Comment


                    • #11
                      LOL funny but also so true
                      If a php file only has php code within it you do not need to use the closing php tag
                      A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
                      durangod is short for durango dave

                      Comment


                      • #12
                        Oh, actually doing it right before the img tag in the PHP is a bad idea, because you're going to run that on every page-load which is a lot of overhead. Again, see my 404 handler suggestion.
                        I'll kill you and your dreams tonight, begin new life.
                        Bleed your death upon me, let your bloodline feed my youth.
                        https://cutcodedown.com

                        Comment


                        • #13
                          ok thanks for the followup
                          If a php file only has php code within it you do not need to use the closing php tag
                          A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
                          durangod is short for durango dave

                          Comment

                          Working...
                          X