Magento – responsive design category page optimization

categorymobile

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.?

Best Answer

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.

Related Topic