Developing (v7+)

On the fly image optimization

Permalink March 25, 2016 at 1:23 AM

Just posting this for posterity and also so I can find it later. Hope it might be helpful to some. I was having a problem with high quality banner images being too large even on mobile devices with limited bandwidth. I decided to find a way to reduce the size based on the screen width. Part of the problem is that there is really no way to do this server side. So I looked around some and with the combination of the following code, I've dropped page sizes by 28% while still maintaining sufficient view quality. At some point I'll have to account for ppi calculations. Anyways here it goes:

At your html head place the following code:

<?php
        if(!isset($_GET['w']))
        {
            echo "<script language='javascript'>window.location.href = window.location.href+'?w=' + screen.width;</script>";
        } //triggers your page to put the screen width in the $_GET array under 'w'.
    ?>

Now we have access to the screen width via $_GET['w'] and the rest is just a little math.

$ih = Loader::helper('image');
    $thumbnail = $c->getAttribute('main_image'); //assuming you have a thumbnail image but any $image from $filelist = new FileList() will do
    if ($thumbnail) {
        $oldHeight = $thumbnail->getAttribute('height');
        $oldWidth = $thumbnail->getAttribute('width');
        if (isset($_GET['w'])) {
            $newWidth = $_GET['w'];
            $newHeight = $oldHeight/$oldWidth*$_GET['w'];  //our code to resize by aspect ratio based on width.
        } else {
            $newWidth = $oldWidth;
            $newHeight = $oldHeight;
        }
        $thumbnail = $ih->getThumbnail($thumbnail, $newWidth, $newHeight, true);
        $thumbnail = $thumbnail->src;
        $html = '<img class="imageOverflow" alt="" src="' . $thumbnail . '"/>'; //our view

Viewing 15 lines of 17 lines. View entire code block.

 
    $ih = Loader::helper('image');
    $thumbnail = $c->getAttribute('main_image'); //assuming you have a thumbnail image but any $image from $filelist = new FileList() will do
    if ($thumbnail) {
        $oldHeight = $thumbnail->getAttribute('height');
        $oldWidth = $thumbnail->getAttribute('width');
        if (isset($_GET['w'])) {
            $newWidth = $_GET['w'];
            $newHeight = $oldHeight/$oldWidth*$_GET['w'];  //our code to resize by aspect ratio based on width.
        } else {
            $newWidth = $oldWidth;
            $newHeight = $oldHeight;
        }
        $thumbnail = $ih->getThumbnail($thumbnail, $newWidth, $newHeight, true);
        $thumbnail = $thumbnail->src;
        $html = '<img class="imageOverflow" alt="" src="' . $thumbnail . '"/>'; //our view
        echo $html;
    }

Overall, I would say its not pretty. But its fast and it gets results. But, being very new to all this. If anyone has a faster way that doesn't involve making custom css for every possible @media query and actually renders imagesizes smaller, please let me know or add here.