PHP Classes

Speed Image Load: Resize images in GIF, JPEG, PNG and WebP format

Recommend this page to a friend!
  Info   View files Example   View files View files (13)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 450 This week: 1All time: 6,178 This week: 560Up
Version License PHP version Categories
speed-image-load 1.0.5GNU Free Document...7Graphics, PHP 7
Description 

Author

This class can resize images in GIF, JPEG, PNG and WebP format.

It can take the path of a given image file and creates a new image with a new size given the limit size of the target image.

The resized image is saved to a new directory that is passed to the class as parameters.

Picture of riccardo castagna
  Performance   Level  
Name: riccardo castagna is available for providing paid consulting. Contact riccardo castagna .
Classes: 7 packages by
Country: Italy Italy
Age: 55
All time rank: 101037 in Italy Italy
Week rank: 411 Up18 in Italy Italy Up
Innovation award
Innovation award
Nominee: 3x

Winner: 1x

Recommendations

i want to resize image class
want resize exact width and height image which i provided.

Example

<?php
/**********************************************************************************************************************
 * Author: Riccardo Castagna Mba, Php Web Developer (Via Pindaro, 45, Palermo, ITALY) tel: +39 3315954155 email: 3315954155@libero.it
 * Title : Responsive mobile image load for high speed.
 * According to the browsers simultaneous connection limitations on HTTP/1 (six for many modern browsers) so when we are developing
 * a web page we have to evaluate the number of requests to the same domain server and than process the right and lighter load strategy.
 * A stategy could be to use the CDN and to put max six resource for page into a CDN, so you sort the web page resources in different
 * domains.
 * In this example with no CDN the goal is to load faster the web page, loading less resource possible at the beginning and then defer
 * all the other resources (images in this case) that do not appear on the mobile screen and therefore do not need to load immediately.
 * As reported by google, about 53% of smartphone users do not open a web page if a page does not load within 3 seconds.
 * The three seconds are refered to the fast 3G network with a 4x slowdown cpu throttling.
 * In short, less is the page weight and less are the requests for page (HTTP/1) to the same domain server, less are DOM breakpoint,
 * more we get in performance speed.
 * In this example, the layout resize of the div elements, is processed through the transparent gif image of only 2kbit,
 * with a webp image it is possible to obtain less kbit but in this example let go on with a gif.
 * The load event listener javascript function charges only the images that go inside the screen of a mobile device
 * and the scroll event listener defer the loading of the others images (in this example only one more).
 * In this example three images are loaded at the beginning while the fourth one is defered, so if you
 * have many images (the case could be of an e-commerce web site or a booking system
 * for an hotel web site) you will be able to have, with this method a very fast page.
 * The weight, the size and also, optionally, the file format coversion of the new images for mobile screen is processed by
 * php 'class.resize.php'.
 * The css @media screen options set the size of background images.
 *
 * Php Class usage:
 * include_once('./lib/class.resize.php');
 * $ref=new imageResize;
 * $newImage = $ref->resize('imagefile_source','directory',integer,integer,NULL,FALSE); with this we generate the new image
 * file resized;
 * $newImage_name = $ref->newfilename; with this we get the name (src) of the new image file resized;
 *
 * param1 = 'imagefile_source' -> is a string with the src of the image file es: 'http://www.example.com/image.png'
 * or './images/image.png' ;
 *
 * param2 = 'directory' -> is a string with new directory name or the same local directory of the image source,
 * example: 'new_mobile_images' or './images/new_mobile_images' or 'images' ;
 *
 * param3 = integer -> number integer, is the new width in pixel of the new image, usually we should use : 300 or 768 or 1024 ;
 *
 * param4 = integer -> number integer, is the compression level, default value is NULL = No compression but this is good only for gif
 * IMPORTANT NOTE: if the original file format is not a gif you have to insert a value; possible values are from 0 to 100 for jpeg
 * and webp where 100 is no compression and 0 is the max compression;
 * for png image files format, possible values are from 0 to 9, at the contrary: 0 is no compression and 9 is max compression,
 * I repeat, use NULL only for gif;
 *
 * param5 = 'string' or NULL -> if it is set to NULL = no file format will be converted, the possible values are string: 'webp'
 * or 'jpeg' or 'png' or 'gif';
 *
 * param6 = the possible values are: TRUE OR FALSE -> TRUE to set Transparency (Alpha Channel), FALSE to not set Transparency.
 * IMPORTANT NOTE: set transparency only if the file format is png, gif or webp, or if you wish to convert into png, gif or webp.
 *
 * the new image files are generated only one time if the files do not exist, if the files exist the class will get only the file names.
 ***********************************************************************************************************************/

$img0 = "./images/trp.gif"; //original image size 2000 px x 1200 px transparent, this is a no background image to insert within the div element (I need it only to resize the div where there are the background images that I wish to display )
$img1 = "./images/1.jpg"; //original image size 2000 px x 1200 px background image
$img2 = "./images/2.jpg"; //original image size 2000 px x 1200 px background image
$img3 = "./images/3.jpg"; //original image size 2000 px x 1200 px background image
$img4 = "./images/4.jpg"; //original image sze 2000 px x 1200 px background image


// ok all set (I hope) , let go on ... ;-)


//Since we need three images resized (300,768,1024) from one image source I write a function to do all in one ;
function newimages($src,$compression,$file_format,$alpha_channel){
include_once(
'./lib/class.resize.php');
$ref=new imageResize;
$new_300 = $ref->resize($src,'mobile_images',300,$compression,$file_format,$alpha_channel);
$new_300_name = $ref->newfilename;
$new_768 = $ref->resize($src,'mobile_images',768,$compression,$file_format,$alpha_channel);
$new_768_name = $ref->newfilename;
$new_1024 = $ref->resize($src,'mobile_images',1024,$compression,$file_format,$alpha_channel);
$new_1024_name = $ref->newfilename;
return array(
$new_300_name,$new_768_name,$new_1024_name);
}
$images_0 = newimages($img0,NULL,NULL,TRUE); //these are the transparent gif images resized, with no compression
list($newImg0_300_px_name,$newImg0_768_px_name, $newImg0_1024_px_name)=$images_0; //here the list name (src) of the new three images
$images_1 = newimages($img1,90,NULL,FALSE); // these are the jpeg images resized with a 90% of compression and no transparency
list($newImg1_300_px_name,$newImg1_768_px_name, $newImg1_1024_px_name)=$images_1; //here the list name (src) of the new three images
$images_2 = newimages($img2,90,NULL,FALSE); // these are the jpeg images resized with a 90% of compression and no transparency
list($newImg2_300_px_name,$newImg2_768_px_name, $newImg2_1024_px_name)=$images_2; //here the list name (src) of the new three images
$images_3 = newimages($img3,90,NULL,FALSE); // these are the jpeg images resized with a 90% of compression and no transparency
list($newImg3_300_px_name,$newImg3_768_px_name, $newImg3_1024_px_name)=$images_3; //here the list name (src) of the new three images
$images_4 = newimages($img4,90,NULL,FALSE); // these are the jpeg images resized with a 90% of compression and no transparency
list($newImg4_300_px_name,$newImg4_768_px_name, $newImg4_1024_px_name)=$images_4; //here the list name (src) of the new three images


// ok all set, I hope this work could be usefull for someone and please let me know if there are errors
             
?>
<!DOCTYPE html>
<html lang='it'>
  <head>
    <title>responsive images load</title>
    <meta charset='utf-8'>
    <meta name='description' content='load speed image test'>
    <meta name='keywords' content='lighthouse test image load'>
    <meta name='author' content='Riccardo Castagna'>
    <meta name='robots' content='all'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
    <link href='./php-icon.png' rel='shortcut icon' type='image/png'>
<style>
body {
margin: 0px;
padding: 0px;
}
div, img {
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
}

@media screen and (max-width: 29.999em){
.image_1{
background: url("<?php echo $newImg1_300_px_name ?>") 100% 100% no-repeat;
}
.image_2{
background: url("<?php echo $newImg2_300_px_name ?>") 100% 100% no-repeat;
}
.image_3{
background: url("<?php echo $newImg3_300_px_name ?>") 100% 100% no-repeat;
}
.image_4{
background: url("<?php echo $newImg4_300_px_name ?>") 100% 100% no-repeat;
}
}
@media screen and (min-width: 30em) and (max-width: 47.999em) {
.image_1{
background: url("<?php echo $newImg1_768_px_name ?>") 100% 100% no-repeat;
}
.image_2{
background: url("<?php echo $newImg2_768_px_name ?>") 100% 100% no-repeat;
}
.image_3{
background: url("<?php echo $newImg3_768_px_name ?>") 100% 100% no-repeat;
}
.image_4{
background: url("<?php echo $newImg4_768_px_name ?>") 100% 100% no-repeat;
}
}
@media screen and (min-width: 48em) and (max-width: 91em){
.image_1{
background: url("<?php echo $newImg1_1024_px_name ?>") 100% 100% no-repeat;
}
.image_2{
background: url("<?php echo $newImg2_1024_px_name ?>") 100% 100% no-repeat;
}
.image_3{
background: url("<?php echo $newImg3_1024_px_name ?>") 100% 100% no-repeat;
}
.image_4{
background: url("<?php echo $newImg4_1024_px_name ?>") 100% 100% no-repeat;
}
}
@media screen and (min-width: 91.001em){
.image_1{
background: url("<?php echo $img1 ?>") 100% 100% no-repeat;
}
.image_2{
background: url("<?php echo $img2 ?>") 100% 100% no-repeat;
}
.image_3{
background: url("<?php echo $img3 ?>") 100% 100% no-repeat;
}
.image_4{
background: url("<?php echo $img4 ?>") 100% 100% no-repeat;
}
}

.image_1{
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: 0 0;
}
.image_2{
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: 0 0;
}
.image_3{
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: 0 0;
}
.image_4{
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: 0 0;
}
</style>
<script>
window.addEventListener("load", function()
{ myFnc("image_1","image_1"),
myFnc("image_2","image_2"),myFnc("image_3","image_3");
},{capture:true});

window.addEventListener("scroll", function(){
myFnc("image_4","image_4");
},{passive:true, capture:false});

function myFnc(id, cls) {
var element, name, arr;
element = document.getElementById(id);
name = cls;
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;}
}
</script>
</head>
  <body>
<div id="image_1" ><img src="<?php echo $img0 ?>" alt="img_0" srcset="<?php echo $img0.' 2000w,'.$newImg0_300_px_name.' 300w,'.$newImg0_768_px_name.' 768w,'.$newImg0_1024_px_name.' 1024w' ?>" sizes="100vw" /></div>
<div id="image_2" ><img src="<?php echo $img0 ?>" alt="img_0" srcset="<?php echo $img0.' 2000w,'.$newImg0_300_px_name.' 300w,'.$newImg0_768_px_name.' 768w,'.$newImg0_1024_px_name.' 1024w' ?>" sizes="100vw" /></div>
<div id="image_3" ><img src="<?php echo $img0 ?>" alt="img_0" srcset="<?php echo $img0.' 2000w,'.$newImg0_300_px_name.' 300w,'.$newImg0_768_px_name.' 768w,'.$newImg0_1024_px_name.' 1024w' ?>" sizes="100vw" /></div>
<div id="image_4" ><img src="<?php echo $img0 ?>" alt="img_0" srcset="<?php echo $img0.' 2000w,'.$newImg0_300_px_name.' 300w,'.$newImg0_768_px_name.' 768w,'.$newImg0_1024_px_name.' 1024w' ?>" sizes="100vw" /></div>
  </body>
</html>


Details

speed-image-load

* According to the browsers simultaneous connection limitations on HTTP/1 (six for many modern browsers) when we are developing a web page we have to evaluate the number of requests to the same domain server and than process the right and lighter load strategy. A stategy could be to use the CDN and to put max six resource for page into a CDN, so you sort the web page resources in different domains.

* In this example, with no CDN, the goal is to load faster the web page, loading less resource possible at the beginning and then defer all the other; resources (images in this case) that do not appear on the mobile screen and therefore do not need to load immediately. * As reported by google, about 53% of smartphone users do not open a web page if a page does not load within 3 seconds. The three seconds are refered to the fast 3G network with a 4x slow down cpu throttling. In short, less is the page weight and less are the requests for page (HTTP/1) to the same domain server, less are the DOM breakpoint, more we get in performance speed. Higher performance speed means for smartphone users less mobile data consuming and lower cost for loading web contents. Low CPU usage means lower battery consuming. * There are three example with three different speed performance; according the lighthouse speed test the fastest is the example 5 (index_5.php), the example where all image files are converted to webp. * The weight, the size and also, optionally, the file format coversion of the new images for mobile screen, is processed by php class. The css @media screen options set the size of background images. * Php Class usage: include_once('./lib/class.resize.php'); $ref=new imageResize; $newImage = $ref->resize('imagefile_source','directory',integer,integer,NULL,FALSE); with this we generate the new image file resized; $newImage_name = $ref->newfilename; with this we get the name (src) of the new image file resized;

* param1 = 'imagefile_source' -> is a string with the src of the image file es: 'http://www.example.com/image.png' or './images/image.png' ;

* param2 = 'directory' -> is a string with new directory name or the same local directory of the image source, example: 'new_mobile_images' or './images/new_mobile_images' or 'images' ;

* param3 = integer -> number integer, is the new width in pixel of the new image, usually we should use : 300 or 768 or 1024 ;

* param4 = integer -> number integer, is the compression level, default value is NULL = No compression but this is good only for gif; IMPORTANT NOTE: if the original file format is not a gif you have to insert a value; possible values are from 0 to 100 for jpeg and webp where 100 is no compression and 0 is the max compression; for png image files format, 0 to 9, at the contrary: 0 is no compression and 9 is max compression, I repeat, use NULL only for gif;

* param5 = 'string' or NULL -> if it is set to NULL = no file format will be converted, the possible values are string: 'webp' or 'jpeg' or 'png' or 'gif' ;

* param6 = the possible values are: TRUE OR FALSE -> TRUE to set Transparency (Alpha Channel), FALSE to not set Transparency; IMPORTANT NOTE: when resize or convert the images set transparency only if the original file source is completely transparent and the source file format is png, gif or webp or if you wish to convert a sorce image into png, gif or webp completely transparent.

* the new image files are generated only one time if the files do not exist, if the files exist the class will get only the file names.

Here you will be able to see some lighthouse speed test: * example 3) file: example_3.php -> https://googlechrome.github.io/lighthouse/viewer/?gist=cf021d19916ffaa3202059b409e837f5 * example 4) file: example_4.php -> https://googlechrome.github.io/lighthouse/viewer/?gist=07bd22ddd02bcaae5c18f05d2482f591 * example 5) file: example_5.php -> https://googlechrome.github.io/lighthouse/viewer/?gist=a03c7d0235e4be8dac5af0ed7df5334f

NOTE: * Before this, I have tested the speed performance, converting the sources image files to '.webp' base64 encode. But, with my great amazement, the speed performances with base64 encode were slower and the CPU usage of the browser was higher. More CPU usage meaning more battery consuming. To decode the browser use CPU.

  • I have also noted a decline in speed performance and higher CPU usage when I have set up opacity into the css style, perhaps, a tip could be, instead of setting up opacity into CSS style, could be better using a background image with the opacity setted.
  • During the processing of this project in PHP for the resizing and conversion of image files, addressed more to evaluate the differences among performance of speed and optimization in the loading of resources, I stumbled into an error that I thought was due to a bug of the GD PHP library. I then opened an issue: https://bugs.chromium.org/p/webp/issues/detail?id=389 and it seems that the images converted with the PHP gd library are well formed and therefore should not have any problem, instead, there is a bug on the plugin of GIMP, software with which I tried to open WEBP files: [1] http://registry.gimp.org/node/25874 [2] https://bugzilla.gnome.org/show_bug.cgi?id=769651

  Files folder image Files  
File Role Description
Files folder imageimages (5 files)
Files folder imagelib (1 file)
Accessible without login Plain text file index.php Example Example script
Accessible without login Plain text file index_2.php Example Example script
Accessible without login Plain text file index_3.php Example Example script
Accessible without login Plain text file index_4.php Example Example script
Accessible without login Plain text file index_5.php Example Example script
Accessible without login Image file php-icon.png Icon Icon image
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  images  
File Role Description
  Accessible without login Image file 1.jpg Data Auxiliary data
  Accessible without login Image file 2.jpg Data Auxiliary data
  Accessible without login Image file 3.jpg Data Auxiliary data
  Accessible without login Image file 4.jpg Data Auxiliary data
  Accessible without login Image file trp.gif Data Auxiliary data

  Files folder image Files  /  lib  
File Role Description
  Plain text file class.resize.php Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:450
This week:1
All time:6,178
This week:560Up