-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
229 lines (217 loc) · 11.3 KB
/
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<?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>