Managing Magento Product Images of magento


how to resize the base images in magento
that it
The following image types are used throughout the catalog, and you can choose which image you want to use for each. If you do not assign an image to each type, image will be used instead.

Thumbnail The thumbnail image appears in the thumbnail gallery, shopping cart, and in some blocks such as Related Items.
Example Size: 50 x 50 pixels
Small Image The small image is used for the product images in listings on category and search results pages, and to display the product images needed for sections such as Up Sells, Cross Sells, and the New Products list.
Example Size: 265 x 265 pixels
Base Image The base image is the main image on the product detail page. Image zoom is activated if you upload an image that is larger image than the image container.
Example Size: 265 x 265 pixels (without zoom)
Example Size: 1100 x 1100 pixels (with zoom)

By default, the container that holds the product image is square. As a result, you can take full advantage of the available space by making your product images square. However, regardless of their size or shape, images are automatically resized to fit the width of the container, which makes it possible to upload a single image and assign it to all three types.

The base image is the place to start, because it determines the level of magnification that is available for image zoom, and can be reduced to any smaller size that is needed. In one scenario, a single image (1100 x 1100 pixels) can be uploaded and assigned to all three types. Then additional images (470 x 470 pixels) can be uploaded to show different views of the product.

Placeholders

You can change magento’s default product image placeholders in admin, Goto –
System->Configuration->Catalog->Product Image Placeholders

Product image watermarks also editable, change them here –
System->Configuration->Design->Product Image Watermarks

Changing the Size of Catalog Images

 

Sometimes you need to change product image size in product list page, product details page, related/recent/last ordered products list, … So let’s see how to change product image size on some pages:

1. How to change image size on product list page

Open file:

app/deisgn/frontend/default/yourtheme/template/catalog/product/list.phtml

Change resize(what_size_you_want) in line:

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

2. How to change main image size on product details page

Open file:

app/deisgn/frontend/default/yourtheme/template/catalog/product/view/media.phtml

Change resize(what_size_you_want) in line:

<?php
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>

3. How to change thumbnail image size on product details page

Open file:

app/deisgn/frontend/default/yourtheme/template/catalog/product/view/media.phtml

Change resize(what_size_you_want) in line:

<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />

 

Ideal Size&Resolution for magento product images

 

To persuade your consumers to buy your products over the internet is not an easy task. The consumer is on their own, without help from your sales staff, trying to make a buying choice. Product imagery plays a crucial role in eCommerce. When a consumer buys a product, without touching and feeling it, detailed product photographs become the key to selling.

When it comes to product images, business owners find it difficult to decide on image quality, resolutions, dimensions, file size, format, etc. The following are the ideal settings that you should use while saving images for your eCommere website. JPEG is the best file format for photographic imagery. The width and height are given as indicators only. If the image is of a portrait format, the width and height settings will have to swap. The maximum file size of 200kb is good for the main product image. This will ensure fast page loading speeds. Most images at the following settings will not reach 200kb, but if they do, try and compress the quality a bit further.

File Format: JPEG
Max. Width: 1600 pixels
Max. Height: 1200 pixels
Max. File Size: 200 kb

If you have many images to be resized and wish to save time, you can download and follow the <a title="Optimise Guide to Batch Resizing Images" Optimise Guide to Batch Resizing Images.

 

Why Magento is decreasing my product images quality?

 

I discovered that Magento uses GD2, with a quality setting to 80% by default (not changeable via configuration, back-office or XML). A value 80/100 quality is good in most cases. Nevertheless in e-commerce have known that a very good picture quality can make the difference.

The idea is to push the compression quality (jpeg) to 90%, the possible options are:

  1. A new method called setQuality has been implemented after Magento CE version 1.4 and EE 1.8 and can be used directly in templates.
    For example: echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile())->resize(42, 50)->setQuality(90);
  2. Change the compression quality photos Magento later than version 1.4:

Step 1

Copy the file “/ lib/Varien/Image/Adapter/Gd2.php” to “/ app/code/local/Varien/Image/Adapter/Gd2.php” by creating the missing directories if necessary.

Step 2

Open the file Gd2.php (copy, not original) at about line 80 and substitute:

call_user_func($this->_getCallback('output'), $this->_imageHandler, $fileName);

by:

if ($this->_fileType === IMAGETYPE_JPEG) {
call_user_func($this->_getCallback('output'), $this->_imageHandler, $fileName, 90);
} else {
call_user_func($this->_getCallback('output'), $this->_imageHandler, $fileName);
}

Step 3

Finally, don’t forget to empty the cache of images via System> Cache Management.
That was simple, effective and reusable on any project, from the time you work with images in jpeg format (which format most common with digital photography) and your server supports GD2.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s