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

  • 0
    Good guys.

    Faced with the issue of image optimization, I'm not talking about its size, but about loading the visible part.
    The sites are responsive, and the whole picture is not loaded everywhere, how to make sure that only the part that is visible is loaded.

    For mobile devices there is a script that detects from a mobile phone I entered or a computer, and loads a mobile picture or a regular one.
    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 to wrap 2 pictures at the front, one for a computer, the other for a mobile.

    It seems like there is a script that will load the visible part of the picture, and not load the rest. And is it worth using such a script?
    JavaScript Anonymous, Jan 20, 2020

  • 1 Answers
  • 0
    If the question is about optimization, why not use lazyload or Intersection Observer API so that images are loaded only when they enter the viewport?

    Or, if you have different pictures for different types of devices, you can use Picturefill

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!