Autoset html tags/attributes to lazy loading lossless/lossy images (gif, png, jpeg)
- Add 1x1 gif blank image in data:uri attribute to all
tags in html
- Set width and height attributes with original image size (Browser is going to rescale automatically with width/height attribute)
$html = '<!DOCTYPE html><html><head></head><body><div><img src="img/test1.jpg"></div></body></html>';
$lazyload = new GlLazyLoadImg(__DIR__); //root directory parameter for relative url
$result = $lazyload->autoDataURI($html);
$result contain :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<img src="data:image/gif;base64,R0lGODdhAAEAAYAAAPz+/AAAACwAAAAAAAEAAQAC/oSPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0uv2Oz+v3/L7/DxgoOEhYaHiImKi4yNjo+AgZKTlJWWl5iZmpucnZ6fkJGio6SlpqeoqaqrrK2ur6ChsrO0tba3uLm6u7y9vr+wscLDxMXGx8jJysvMzc7PwMHS09TV1tfY2drb3N3e39DR4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5+vv8/f7/8PMKDAgQQLGjyIMKHChQwbOnwIMaLEiRQrWryIMaPGYI0cO3r8CDKkyJEkS5o8iTKlypUsW7p8CTOmzJk0a9q8iTOnzp08e/r8CTSo0KFEixo9ijSp0qVMmzp9CjWq1KlUq1q9ijWr1q1cu3r9Cjas2LFky5o9izat2rVs2x4rAAA7" data-original="img/test1.jpg">
</div>
</body>
</html>
- Add reduced gif image in data:uri attribute to all
tags in html
- Set width and height attributes with original image size (Browser is going to rescale automatically with width/height attribute)
$html = '<!DOCTYPE html><html><head></head><body><div><img src="img/test1.jpg"></div></body></html>';
$lazyload = new GlLazyLoadImg(__DIR__,GlLazyLoadImg::LOSSY); //root directory parameter for relative url
$result = $lazyload->autoDataURI($html);
$result contain :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<img src="data:image/gif;base64,R0lGODdhSwBLAMQAAAQCBIyKjNTS1Dw6POzq7BwaHKyqrPT29BQSFFxeXAwKDLy6vPz+/AQGBJyenNza3ExKTPTy9CwuLPz6/GxqbMTCxAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAASwBLAAAF/iAjjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHEycZVr5zL5tWY1APC4XC6a28+jxRveGETUdoFweCuCgXWGACUACoIME4lzBy6TJHEoAA0tcQQMBwcTFHCYozqXJ6UqAqkupzmui4orEqybtTawlrIqBbeFvjS5I8CPIgGZxa3EMsJ1mixyEJ3QyzHNDJGxcxUq1zPX2SUJgYS6uzjg5zAIl+XY1TDpM2UOcAKo8C/yNXAF+Oq4gOVLAQfBvx37Vrh79MbAQVPA3izU9dCEN2YC9xxCFEdjJgWkAPLLtDASnlV2Lp6F3DGRRbk1LU/E1DEThxoxOHPq3Mmzp8+fQIMKHUq0qNGjSJMqXcq0qdMdIQAAOw==" width="256" height="256" data-original="img/test1.jpg">
</div>
</body>
</html>
By example, you can use LazyLoad (aka Vanilla LazyLoad)