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 un

Answer 1

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 2

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 3

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 4

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 5

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

Answer 6

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 ;)