0

Link https://i.stack.imgur.com/9F0q5.jpg

I am trying to make my webpages load more faster and better user experience, I am trying to resize those images in my website. My website has a lot of images

As for the image above, you can see the original size of the image (Natural Size) is 960 x 960 and the image displayed on the website is 214 x 214.

What if one of the images is huge, like 1920 x 1080, HD size. It will take a longer time to load the whole page waiting for the HD images to fully loaded.

Can anyone tell me the solution. I see many website has use image cache, and when click on the image, it will load the original image.

Sanbron Liong
  • 63
  • 2
  • 8
  • 1
    cant you store a smaller size(thumbnail) too?that way you can view it which will cost less – Gun2sh Jan 06 '14 at 14:17
  • I can, but the images will be post by a lot of users. If it were my images, I wouldn't ask how to cache it :P I want to know a more dynamic way to auto cache big photos to be smaller. – Sanbron Liong Jan 06 '14 at 14:35

2 Answers2

0

You need to work with thumbnails.

To perform this, you need where you put in your downsized pictures (=thumbnails). On the website, you only show the small pics, by clicking onto them you show the realsized pics (I suggest doing this with some kind of Javascript).

Rassmussen
  • 1
  • 3
  • I found a couple of plugins that uses php to shrink down original image into thumbnails. But I cannot figure out how it is done. Is there any plugin you can recommend. Is it possible to use javascript? – Sanbron Liong Jan 06 '14 at 14:37
  • Resizing them in Javascript defeats the entire purpose, which he said was to reduce the amount of data needlessly sent over the wire. – sequentiallee Jan 07 '14 at 16:41
0

for storing smaller images(thumbnails):

function make_thumb($src, $dest, $desired_width) {

    /* read the source image */
    $source_image = imagecreatefromjpeg($src);
    $width = imagesx($source_image);
    $height = imagesy($source_image);

    /* find the "desired height" of this thumbnail, relative to the desired width  */
    $desired_height = floor($height * ($desired_width / $width));

    /* create a new, "virtual" image */
    $virtual_image = imagecreatetruecolor($desired_width, $desired_height);

    /* copy source image at a resized size */
    imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $width, $height);

    /* create the physical thumbnail image to its destination */
    imagejpeg($virtual_image, $dest);
}

It uses GD functions of php.

For resizing image on client browser:

//on js
var thumbSize = 64;
var canvas = document.getElementById("canvas");
canvas.width = thumbSize;
canvas.height = thumbSize;
var c = canvas.getContext("2d");
var img = new Image();
img.onload = function(e) {
    c.drawImage(this, 0, 0, thumbSize, thumbSize);//64x64
    document.getElementById("yourImgID").src = canvas.toDataURL("image/png");
};
img.src = fileDataURL;

Courtesy:ref

Pick the best one that suits you

Community
  • 1
  • 1
Gun2sh
  • 870
  • 12
  • 22