PHP Classes

File: index_2.php

Recommend this page to a friend!
  Classes of riccardo castagna   Speed Image Load   index_2.php   Download  
File: index_2.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:
Date: 5 years ago
Size: 9,294 bytes
 

Contents

Class file image Download
<?php
/**************************************************************************************************************************************
  * In this other example I have converted all the original image files into webp
  * and we have lither image files but we have to set up the opacity when we convert from the transparent gif image to webp
  * and to do this we need imagick and the php 7.3.0
  * I have set up the opacity in this example on to the css but this set up make a lot of cpu usage and we lose performance,
  * set up opacity into css make a lot of cpu usage,
  * so the best solution, is convert all the background images into webp and use an original transparent webp, unconverted image, as
  * initial resource and make only the resize.
*****************************************************************************************************************************************/

$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 four images resized (300,768,1024,2000) from one image source I write a function to do all in one
// and if the browser support the webp we convert the original file format into webp file format;
function newimages($src,$compression,$alpha_channel){
include_once(
'./lib/class.resize.php');
$ref=new imageResize;
if((isset(
$_SERVER['HTTP_ACCEPT']) === true) && (strstr($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false)){
$file_format='webp';
$new_2000 = $ref->resize($src,'mobile_images',2000,$compression,$file_format,$alpha_channel);
$new_2000_name = $ref->newfilename;
}else{
$file_format=NULL;
$new_2000_name = $src; // we don't need a new 2000 px file if the browser does't support the webp because alredy exist
}
$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,$new_2000_name);
}

$images_0 = newimages($img0,90,TRUE); //these are the transparent images resized, compressed 90% and converted into webp if the browser support webp
list($newImg0_300_px_name,$newImg0_768_px_name, $newImg0_1024_px_name, $newImg0_2000_px_name)=$images_0; //here the list name (src) of the new four images
$images_1 = newimages($img1,90,FALSE); // these are the jpeg images resized with a 90% of compression and no transparency and converted into webp if the browser support webp
list($newImg1_300_px_name,$newImg1_768_px_name, $newImg1_1024_px_name, $newImg1_2000_px_name)=$images_1; //here the list name (src) of the new four images
$images_2 = newimages($img2,90,FALSE); // these are the jpeg images resized with a 90% of compression and no transparency and converted into webp if the browser support webp
list($newImg2_300_px_name,$newImg2_768_px_name, $newImg2_1024_px_name, $newImg2_2000_px_name)=$images_2; //here the list name (src) of the new four images
$images_3 = newimages($img3,90,FALSE); // these are the jpeg images resized with a 90% of compression and no transparency and converted into webp if the browser support webp
list($newImg3_300_px_name,$newImg3_768_px_name, $newImg3_1024_px_name, $newImg3_2000_px_name)=$images_3; //here the list name (src) of the new four images
$images_4 = newimages($img4,90,FALSE); // these are the jpeg images resized with a 90% of compression and no transparency and converted into webp if the browser support webp
list($newImg4_300_px_name,$newImg4_768_px_name, $newImg4_1024_px_name, $newImg4_2000_px_name)=$images_4; //here the list name (src) of the new four images


// ok all set, I hope this work could be usefull for someone and please let me know if there are errors or questions
             
?>
<!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;
}

.img {
opacity:0;
}

@media screen and (max-width: 29.999em){
.img {
opacity:0;
}
.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) {
.img {
opacity:0;
}
.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){
.img {
opacity:0;
}
.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){
.img {
opacity:0;
}
.image_1{
background: url("<?php echo $newImg1_2000_px_name ?>") 100% 100% no-repeat;
}
.image_2{
background: url("<?php echo $newImg2_2000_px_name ?>") 100% 100% no-repeat;
}
.image_3{
background: url("<?php echo $newImg3_2000_px_name ?>") 100% 100% no-repeat;
}
.image_4{
background: url("<?php echo $newImg4_2000_px_name ?>") 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 class="img" src="<?php echo $newImg0_2000_px_name ?>" alt="img_0" srcset="<?php echo $newImg0_2000_px_name.' 2000w,'.$newImg0_300_px_name.' 300w,'.$newImg0_768_px_name.' 768w,'.$newImg0_1024_px_name.' 1024w' ?>" sizes="100vw" /></div>
<div id="image_2" ><img class="img" src="<?php echo $newImg0_2000_px_name ?>" alt="img_0" srcset="<?php echo $newImg0_2000_px_name.' 2000w,'.$newImg0_300_px_name.' 300w,'.$newImg0_768_px_name.' 768w,'.$newImg0_1024_px_name.' 1024w' ?>" sizes="100vw" /></div>
<div id="image_3" ><img class="img" src="<?php echo $newImg0_2000_px_name ?>" alt="img_0" srcset="<?php echo $newImg0_2000_px_name.' 2000w,'.$newImg0_300_px_name.' 300w,'.$newImg0_768_px_name.' 768w,'.$newImg0_1024_px_name.' 1024w' ?>" sizes="100vw" /></div>
<div id="image_4" ><img class="img" src="<?php echo $newImg0_2000_px_name ?>" alt="img_0" srcset="<?php echo $newImg0_2000_px_name.' 2000w,'.$newImg0_300_px_name.' 300w,'.$newImg0_768_px_name.' 768w,'.$newImg0_1024_px_name.' 1024w' ?>" sizes="100vw" /></div>
  </body>
</html>