further reduce image sizes

  • Resolved timholz

    (@timholz)


    4 years, 6 months ago

    Hi – some images may have a margin or padding. To take this into the calculation i experimented with adaptive-images-front.php:

    <!--noptimize-->
        <script type = "text/javascript">

            // 
            // Get screen dimensions, device pixel ration and set in a cookie.
            // 
            
            <?php if ( $options['landscape'] ) : ?>
                var screen_width = Math.max( screen.width, screen.height );
            <?php else : ?>
                var padding = 20*2;
                var screen_width = screen.width-padding;//subtract padding
            <?php endif; ?>

            var devicePixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;

            document.cookie = 'resolution=' + screen_width + ',' + devicePixelRatio + '; SameSite=Strict; path=/';

        </script> 
        <!--/noptimize-->

    I tested a little on chrome. It works for some resolutions. For apple devices i receive inaccurate results. But anyway, this may help to reduce the image size a little more.
    regards – theo

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Takis Bouyouris

    (@nevma)

    Hello, @timholz,

    Thank you for your feedback! Could you perhaps point me to such a case or to the tests you have made? I am not sure I understood what kind of images you mean and how they might have margins and paddings.

    Cheers,
    Takis

    Thread Starter timholz

    (@timholz)

    Hi Takis – here’s the link:
    example
    The images do not extend over the whole screen width. That is what i meant by padding or margin. In this case, it’s margin auto. (I added some values in the console.)
    The previously posted script didn’t take the pixelRatio into account. That’s why some apple devices printed inaccurate results. With this script the images are just about right. PageSpeed does not indicate that images still need to be resized by css or html:

    <!--noptimize-->
        <script type = "text/javascript">

            // 
            // Get screen dimensions, device pixel ration and set in a cookie.
            // 
            
            <?php if ( $options['landscape'] ) : ?>
                var screen_width = Math.max( screen.width, screen.height );
                <?php else : ?>
                    var ratio = window.devicePixelRatio;
                    var padding = 2*(ratio*10);
                    var screen_width = screen.width-padding;
                    console.log('screenwidth: '+screen_width+' ratio: '+ratio+' padding: '+padding);
                <?php endif; ?>

                var devicePixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;

                document.cookie = 'resolution=' + screen_width + ',' + devicePixelRatio + '; SameSite=Strict; path=/';

        </script> 
        <!--/noptimize-->

    It’s just a tiny improvement, but for me it’s worth trying at least.
    cheers – theo

    • This reply was modified 4 years, 6 months ago by timholz.
    • This reply was modified 4 years, 6 months ago by timholz.
    • This reply was modified 4 years, 6 months ago by timholz.
    Plugin Author Takis Bouyouris

    (@nevma)

    Thank you for the clarification, Theo, I’ll see if I can incorporate this in a generalised way in some future version pf the plugin!

    Cheers,
    Takis

    Thread Starter timholz

    (@timholz)

    Hi Takis – thanks for the feedback.
    All the best to you.
    thep

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘further reduce image sizes’ is closed to new replies.