PHP Classes

File: index.php

Recommend this page to a friend!
  Classes of riccardo castagna   Speed Image Load   index.php   Download  
File: index.php
Role: Example script
Content type: text/plain
Description: Example script
Class: Speed Image Load
Resize images in GIF, JPEG, PNG and WebP format
Author: By
Last change: Update index.php
Update index.php
Date: 6 years ago
Size: 11,570 bytes
 

Contents

Class file image Download
<?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>