Loading images Faster in Webpage

Question

In the web application when i click on a link that should load an image from server, it is taking too much time since the images are sized approxmately 3MB - 5 MB, we are unable to reduce the size because of the image resolution problem.

There is one solution to put height and width, but we are unable to put height and width for the image. How can we resolve it?

I am loading the images from server into div like

<div>
 <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Srtm_ramp2.world.21600x10800.jpg"/>
</div>

Answer 1

There are a couple of solutions to explore for managing large images:

Try to bring down file size (3-5MB is too high IMHO):

• Remove all metadata
• Reduce resolution/pixel-density
• Reduce height/width of the image
• Use JPEG compression
• Use GZIP compression on your server

You can also explore:

• Use a CDN to serve images (to allow parallel loading)
• Use services like Cloudinary/IMGIX which allow you to dynamically select the image size you want

Answer 2

How it works We’re going to remove the images from the HTML, then put them back in using jQuery. Simple as that. This will allow the images to load after all of your other content has finished

PLUS, there’s an important added benefit: search-engines measure your page-load speed by what’s in your HTML, not what jQuery loads after the fact. That means that when Google measures your site’s loading speed, the page speed result will look significantly better. This is how to do it:

Firstly: Remove all of the big images from your HTML (my images just happened to be in an unordered list): Remove all of the big images from your HTML

Secondly: Add a jQuery snippet that will add them back into the HTML, after everything else on the page has loaded:

$(window).load(function(){ // This runs when the window has loaded
    var img = $("").attr('src', 'YourImagePath/img.jpg').load(function() {
        $("#a1").append(img);
        // When the image has loaded, stick it in a div
    });
    var img2 = $("").attr('src', 'YourImagePath/img2.jpg').load(function() {
        $("#a2").append(img2);
    });
});

Done :D

Answer 3

Use HTTP Cache Header for your images . Once loaded images will not reload before cache expiration as defined by HTTP Cache Header.

Answer 4

Try loading images when document loads by utilizing background-image property of a container element ; set container element display:none . This should cache images in browser , eliminating need for additional requests to server for images at time of actual click - image already loaded into document , cached in browser before first click on "link" or button. On click of "link", or button , toggle display property of container element having id same as className of clicked button between "block" , "none" ; displaying , not displaying image , at each click of "link" button .

var buttons = document.querySelectorAll("button[class^=img]");

Array.prototype.slice.call(buttons)
.forEach(function(elem, index) {
  document.getElementById(elem.className)
  .style.display = "none";
  elem.onclick = function(e) {
    var img = document.getElementById(elem.className);
    img.style.display = (img.style.display === "none") ? "block" : "none";
  };
});

body {
  width: 1800px;
  height: 1600px;
}
div[id^="img"] {
  width: 100%;
  height: 100%;
  position: relative;
}
div[id="img-1"] {
  background-image: url(http://lorempixel.com/1800/1600/cats);
}
div[id="img-2"] {
  background-image: url(http://lorempixel.com/1800/1600/technics);
}

<button class="img-1">image 1</button>
<button class="img-2">image 2</button>
<div id="img-1">
</div>
<div id="img-2">
</div>

Answer 5

1. Try to compress the size of your images as big images took time to upload.
2. Use jpg/jpeg files or zip files to upload.

Answer 6

If you really can't reduce the image file size then load the images dynamically :

https://github.com/pazguille/aload

At least the page will be responsive to user input while the images are downloading.

Answer 7

I believe others have given you some good answers on how to optimize the image for downloading. My answer focuses on other aspects which can have a significant effect on web pages.

Preload the dimensions of your image with php with server.

<?php
list($w,$h) = getimagesize("enu_20150522_1.jpg");
echo('<img src="http://myserver.com/enu_20150522_1.jpg" width='.$w.' height='.$h.'>');
?>

This will not improve speed, but it will allow browsers to populate rest of page while img downloads. It will look faster. Sometimes perception can be reality.

In addition, use CSS or Javascript, etc. to Preload your images. I'd use Javascript. There are lots of good sites out there on this. Tops on Google: 3 Ways to Preload Images with CSS, JavaScript, or Ajax

If you combine both of those and compression, you may have a working solution. But it's hard to say without a working sample. SSR

I'd also check out: Best Practices for Speeding Up Your Web Site with reference to optimizing content, specifically cache.

Answer 8

See Dear follow this url: Website Performance Checker

paste your domain name or url and test your site, then find your image link and click on it right click save and uploaded it again. Your image file size will be auto reduced but the image quality will be perfect.

Answer 9

You could go for a solution like google did (still does), with mobile browsing, where you basically setup a proxy, which can

• Gzip it (on the proxy)
• use other protocols (spdy eg)

Here is the data compression google did:

Otherwise if you cant change the image, and you cant reduce the quality in any way, and if you cannot change the server, (and the suggested javascript liberays does not suffice), then it sounds like you dont have any choice. However since you only specifed it should be done in under 5 secounds (which roughly translates to a 10 mbit download for the wiki example), then either you have too many images, or the required internet speed is very low.

Answer 10

You can simply simply using Microsoft Office Picture Manage, so then you will be able to resize your picture as document without loosing it's quality, try it!

Answer 11

Try Loading It Dynamically Using The Back Code In Your .CS File Such As

.ASPX

<asp:Repeater ID="Repeater1" runat="server" Visible="True">
    <ItemTemplate>
        <a><asp:Image ID="Image1" runat="server" Width="1200" Height="300" ImageURL='<%#Eval("ThumbnailPath")%>' class="slide" /></a>
    </ItemTemplate>
    </asp:Repeater>

.CS

    GallerySTR = ConfigurationManager.ConnectionStrings["PPDB"].ConnectionString;
    GalleryCN = new SqlConnection(GallerySTR);

    string LoginQuery = "SELECT * FROM Albums";
    GalleryCN.Open();
    GalleryCMD = new SqlCommand(LoginQuery, GalleryCN);

    GalleryDA = new SqlDataAdapter(GalleryCMD);
    GalleryDS = new DataSet();
    GalleryDA.Fill(GalleryDS);
    Repeater1.DataSource = GalleryDS;
    Repeater1.DataBind();

This is my code using ASP.NET Repeater COntrol i hope this gives you an idea for the faster loading ;) always try to load it dynamically ;) Loading Images Dynamically Gives The Best Results cuz the truth is you cannot reduce the size ;)

Answer 12

Tips:

• If images are common among several pages, you may use CSS Image Sprite thing, that will reduce the round trips and for faster delivery of image you may use CDN.
• If images are random try async loading of Images, this will not kill the UI/UX.
• Convert images to png then use them, or you may try new WebP as stated above.

Answer 13

You can make your image progressive by photoshop. You should save as for web and check progressive checkbox. More details described here.

Answer 14

You have to reduce the file size significantly. As you suggested, the easiest way to do that is by reducing the image's resolution.

In a web server environment, you have two options:

1. Manually open the image in a graphics editor (e. g. Gimp), use the "Save for web" option and set the image's dimensions and quality according to your needs.

2. Set up a batch image manipulation software on your server and some regularly triggered jobs to run over all your images and scale them to a bunch of smaller resolutions for all possible device types.

3. Have your image requests run through a real-time image optimization service like tiny.pictures. They (disclaimer: or "we", respectively) get the original, huge image in real-time, scale and optimize it, and deliver it back to your visitors. You can set the dimensions you'd like as URL parameters (as was probably your first idea, though usual web servers can't do that).

The following snippet shows how you can reduce your image's width from 10800px to 400px (see width parameter), thereby reducing the file size from 5.9 MB to 6.3 kB (a reduction of ~99.9%). All you have to do is prepend the original image's URL.

<img src="https://tiny.pictures/api/demo/?width=400&source=http://upload.wikimedia.org/wikipedia/commons/1/15/Srtm_ramp2.world.21600x10800.jpg" alt="World map">

Answer 15

I was experiencing slow loading of dynamic images recently and I did this simple trick with jquery and the images came a lot faster.

First create container elements to load your images into:

<div id="container"></div>

Next, preload the image you want to appear on click at the start of your JavaScript file (if you want to preload multiple images see here):

const img = $("<img src='http://upload.wikimedia.org/wikipedia/commons/1/15/Srtm_ramp2.world.21600x10800.jpg'/>");

Finally, in your click handler, simply fill in the image into the container:

$('.btn').on('click', function () {
    $('#container').html(img);
});