responsive design category page optimization

Question

I am working on a responsive design. In category pages i am showing the product small_image with resize(270,null). This is okay with desktop. But in mobile it takes little more seconds to load the product image.

This i tried to fix as following

1. Loaded image with resize(110,null). but the images is too small and the it just sits in center of the grid with spaces around it.
2. so i gave width to the img tag, then the image looks stretched, and i don't want this.

And there is another problem associated with this. My site is having varnish sitting in front of webserver and uses URL based caching. So once the page is cached it servers the same page irrespective of the device or resolution. So i tried to append a query string to all url that is being accessed with mobile devices so that desktop's and mobile's will have different cached pages.

eg:mysite.com/abc.html to mysite.com/abc.html?device=mobile

But magento simply refuses to redirect to my new url, with htaccess OR php code added in the top of index.php page. If it was working i thought of adding a forth image type called mobile and show that in mobile devices.

Is there a way by which i can show a non-stretched prod image in mobiles with image weight considerably decreased.

I think the question is clear,if it is not i will provide more info

EDIT http://adaptive-images.com/ is a popular way doing this and integration is also pretty easy. But its not working. This involves some htaccess coding to redirect the images to a php file. I think that part is not working

htaccess code

    RewriteCond %{REQUEST_URI} !ai-cache

    RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

just above the line

RewriteCond %{REQUEST_URI} !^/(media|skin|js)/

This is creating cache-images for skin folder but not for media/catalog Any sought of input on this from anybody.?

Answer 1

You can prevent image stretching by adding a css rule like this:

img {
  width: 100%;
  height: auto;
}

If you only use the width-attribute, your browser will use the static height-value and your images get a messy stretching...

It's important that no other css rule overwrite this one, so it's recommendable to combine this snippet with a class like "hScale".

I also recommended to edit the image-tag into something like this:

    <?php
      $img['original_size'] = '';
      $img['retina_size']   = '';
    ?>
    <img class="hScale" src="<?= $img['original_size'] ?>"
         srcset="<?= $img['original_size'] ?>,
                 <?= $img['retina_size'] ?> 2x" alt="">

This kind of image integration provides an optimal display on retina displays, because the corresponding devices load the image url from the sourceset-attribute. All other devices, without retina displays, shows the normal variant, without loading the retina images.

Hope that helps.

Answer 2

You can detect mobile browser at php file via $_SERVER['HTTP_USER_AGENT'].
And apply width based on mobile or desktop.
Also you can apply image width via css in percentage based.

This way also you can resolve your issue.

Answer 3

To make adaptive-images.php work with images in the /media/ folder :

delete: media/.htaccess

(Does anybody know what the .htaccess in /media/ is good for? i dont.)

To ignore the skin folder (adaptive-images.php):

RewriteCond %{REQUEST_URI} !images    
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

---

Regading varnish and apaptive-images.php

You should tell varnish to not cache images so they can be handled by adaptive-images.php on the Magento Server:

Idea 1: Never cache images with varnish but always with adaptive-images.php cache

Edit your varnish VCL File (not yet tested):
if (req.url ~ "\.(jpg|jpeg|png|gif)$"){ return(pipe); }

As Vanish does not cache and delivers the images but the magento and adaptive-image.php the request might take a little longer but the returned files are smaller.

Idea 2: Only Cache images with adaptive-images.php on Mobile devices

Edit your varnish VCL File (not yet tested):

if(  
    req.url ~ "\.(jpg|jpeg|png|gif)$"
    && 
    req.http.user-agent ~ "(?i)iphone|htc|android|ipod|lg9700|blackberry9|nokiae|nokian|docomo|netfront|palmos|ipod|lg9700|htc|opera mini|palmsource|symbian OS|psp"
){
    return(pipe);
 }