It seems that magento is upsizing the images on the category page. I need to be able to keep them a lot smaller, but if I upload say a 100 x 100 image, Magento upsizes it to 1800 or something and it looks like crap.
Suggestions on how to fix this?
theme is RWD
Solved! Go to Solution.
I get it. That file is located at app/design/[package]/[theme]/catalog/category/view.phtml. But setting a width to the element is not recommended. I took a look at a clean Magento installation and I think your issue is in your stylesheet. It has these lines:
.category-image img { width: 100%; max-width: 100%; }
The width: 100% makes your image fill the entire width, even if the image is smaller. If you change this to width: auto; it should use the width of the original image as the max-width, or the width of the container if that's smaller.
Hope this works.
You can always change the size of the images in the template files. But the idea behind the larger images is that they also look good on retina screens and hi-def screens. On a retina screen you will need a 200x200 image to make it "retina-proof" for a size of 100x100.
Upsizing the images also degrades the quality.
So can you point me to where I need to go to change the files?
The images are in several template files. So it depends on the page you want the images to be resized. For the product overview page it would be app/design/frontend/[yourpackage]/[yourtheme]/catalog/product/list.phtml and for a product detail page it would be app/design/frontend/[youtpackage]/[yourtheme]/catalog/product/view/media.phtml.
I'm specifically talking about the CATEGORY IMAGE, not the products.
Am I making sense?
Let me put it this way.
There is an image that you can display oin the CATEGORY PAGE - IE: NOT a PRODUCT IMAGE, but sort of a banner image on the CATEGORY page. That's the image I'm talking about.
I get it. That file is located at app/design/[package]/[theme]/catalog/category/view.phtml. But setting a width to the element is not recommended. I took a look at a clean Magento installation and I think your issue is in your stylesheet. It has these lines:
.category-image img { width: 100%; max-width: 100%; }
The width: 100% makes your image fill the entire width, even if the image is smaller. If you change this to width: auto; it should use the width of the original image as the max-width, or the width of the container if that's smaller.
Hope this works.