1

you can use inspect element to see product image source and download the images .

the sizes of image are more than 400 kb.

I want to reduce the size of the image.

media.phtml =http://pastebin.com/QBVrCu2X

please help me to find solution.

2

Use the Resize function in magento like;

$_imageUrl = $this->helper('catalog/image')->init($_product, 'small_image')
    ->resize($width, $height);
<img src="<?php echo $_imageUrl; ?>" />

or use the bellow extension allows you to optimize all the images in your site, also you can Schedule your Optimization.

  • hi, thanks a lot for reply. can you please tell me in which file, i have to add this code? and for zooming images can we make it lesser download size? means if you click on "view larger" or "+" image, it will load big image.... – Baby in Magento Feb 27 '15 at 12:08
  • 1
    See app/design/frontend/Your_theme/default/template/catalog/product/view/media.phtml <?php $i=0; foreach ($this->getGalleryImages() as $_image): $_imageUrl = $this->helper('catalog/image') ->init($_product, 'image', $_image->getFile()) ->keepFrame(false) ->constrainOnly(true) ->resize(1200);?> <img id="image-<?php echo $i; ?>" class="gallery-image" src="<?php echo $_imageUrl; ?>" data-zoom-image="<?php echo $_imageUrl; ?>" /> <?php $i++; endforeach;?> – jason statham Feb 27 '15 at 12:27
  • but it's not our theme media.phtml => pastebin.com/Sd2emcu9 are you sure the zooming image will take 1200 size in magento 1.9.9 version? – Baby in Magento Feb 27 '15 at 12:31
  • 1
    dont know more about but try this; Example Size: 265 x 265 pixels (without zoom) Example Size: 1100 x 1100 pixels (with zoom) – jason statham Feb 27 '15 at 12:33
  • please visit this link : demo.kidsdial.com/boys-toys/bikes-trikes-ride-ons/… on botttom right of the image there is "+" image, if you click on that real product image will open. is it possible to decrease the size of that image? – Baby in Magento Feb 27 '15 at 14:15
1

@jason's answer is entirely correct, you probably just need to add the 'resize' part to your template where it pulls through the hi-res 'thumbnail'.

Obviously there is more than one way to do anything. You can just set the web server to only serve images of a certain size (or smaller), with it dynamically resizing and optimising anything it finds.

Add Google's Pagespeed Module to your server and configure it to just work on your images for now. The instructions for that are here:

https://developers.google.com/speed/pagespeed/module/filter-image-optimize

This entry is particularly worth the read for where you are:

ImageResolutionLimitBytes

The advantage of the Pagespeed way is that you don't have to manually worry about uploading the correct size images or making sure your templates are behaving. You can just let Pagespeed sort it out and you can then focus on developing other aspects of your site.

  • please visit this link : demo.kidsdial.com/boys-toys/bikes-trikes-ride-ons/… on botttom right of the image there is "+" image, if you click on that real product image will open. is it possible to decrease the size of that image? – Baby in Magento Feb 27 '15 at 14:15
  • 2
    Find this in your templates: <a id="zoom-btn" rel="lightbox[em_lightbox]" href="http://demo.kidsdial.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/c/s/cs-box.jpg" title="Toysbox Mind Builder construction set 37 models, 44 pcs" class="hoverZoomLink">Zoom</a> and edit it with @Amit's code for doing a resize. – Henry's Cat Feb 27 '15 at 15:13
  • hi Woolfie are you speaking about @jason code. – Baby in Magento Feb 27 '15 at 15:19
  • 1
    More precisely: magento.stackexchange.com/users/20144/jason-statham – Henry's Cat Feb 27 '15 at 15:20
  • 1
    This lacks the resize, there could be more: <a id="zoom-btn" rel="lightbox[em_lightbox]" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" title="<?php echo $this->escapeHtml($this->getImageLabel());?>">Zoom</a> – Henry's Cat Feb 27 '15 at 15:29
1

Why not run your image folder thru Photoshop and resize/optimize the images. Drop them back in your media folder and be done with it? Batch process your images to a smaller/progressive format and use a standard image size like 900x900 or whatever for your future images. Irfranview is a free alternative that can batch process. Your images are 400kb because they are huge and not optimized.

1

Instead of resizing each image individually, you will get more benefit from making sure you are serving the right image. Eg when to use Spriting, PNG, JPG and others.

It is possible to do this manually or to automate the browser optimization and quality globally using a image processing platform.

If you automatically serve WEBP images instead of JpG to chrome users and JPG XR images to Internet explorer- you gain an immediate benefit of up to 50%-80% reduction in size. Adding in a CDN will also give a lot of advantages and make the images faster.

If you share the url - then I am happy to give specific advise.

Otherwise here is a case study - that might be useful: http://www.magecloud.net/blog/a-case-study-speed-up-magento-pages-by-over-50-with-automatic-image-processing/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.