cache image on website increase browsing experience, load faster - php

Question

Link http://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.

Answer 1

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

Answer 2

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