arrow_back The question of image optimization, load the area that is visible, the rest do not load, how to implement?

1 vote
Hey guys.

Faced with the issue of optimizing images, I do not mean its size, and the loading of the visible part.
Adaptive sites, and not all loads the whole picture, how to load only the part that is visible.

For mobile devices, there is a script that determines whether I logged in from a cell phone or computer, and loads a mobile or normal picture.
function check_mobile_device() { 
$mobile_agent_array = array('ipad', 'iphone', 'android', 'pocket', 'palm', 'windows ce', 'windowsce', 'cellphone', 'opera mobi', 'ipod', 'small', 'sharp', 'sonyericsson', 'symbian', 'opera mini', 'nokia', 'htc_', 'samsung', 'motorola', 'smartphone', 'blackberry', 'playstation portable', 'tablet browser');
$agent = strtolower($_SERVER['HTTP_USER_AGENT']);
// var_dump($agent);exit;
foreach ($mobile_agent_array as $value) {
if (strpos($agent, $value) !== false) return true;
return false;
And how do you wrap two pictures on the front, one for the computer, one for the mobile. It seems that there is a script that will load the visible part of the picture, and not load the rest. Is it worth using such a script?

1 Answer

0 votes
If it is a question of optimization, why not use lazyload or Intersection Observer API so that pictures are loaded only when they enter the viewing area?
Or, if you have different pictures for different types of devices, you can use Picturefill


What kind of candy is this? Picturefill, it's all in English.
Anton Web Site , here's in Russian example of use
ThunderCat , )))))))))
Anton Web Site But they (surprise!) have to be done anyway.
Anton Web Site ,
Picturefill is a Javascript library that initially loads the smallest image and then updates it depending on the screen resolution of the device being used.
Danny Arty , not a bad thing, but it will have to do different pictures ))