I'm uploading 300DPI images to my Magento E-commerce shop, however the category view only displays 96DPI Images. I guess it compresses the images when resizing them. How to avoid that? I have setQuality at 100.
And I desperately need all images to be 300DPI as otherwise, my products look very poorly on mobile devices.
Thank You.
For category view you should edite catalog/product/list.phtml and replace
<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(200); ?>
with
<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>
or with bigger image
<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(400); ?>
Quote about DPI and web usage
PPI (Pixels Per Inch) settings are not used in web images. Images on the web, retina displays or otherwise, are displayed by their pixel dimensions (width and height) not any PPI/DPI setting. In fact, many web images such as png, gif, jpg may not even store a ppi setting in their internal data and rely on width and height settings.
A 100 pixel x 100 pixel image displays as that on the web regardless of any PPI/DPI setting.
This is why images for retina displays are saved at 2x size, rather than an increased ppi setting. The pixel density of retina displays is higher however, they still display image at whatever the screen states is the width and height of an image not based on any PPI setting.
In reality, a monitor using a pixel density of 72ppi hasn't been seen since the early to mid 1980s. 72ppi hasn't been accurate for nearly 30 years. In fact, it was never accurate for Windows systems since Windows uses a default of 96ppi for pixel density.
Don't believe me? Try it for yourself. Create two images in Photoshop both 100 pixels by 100 pixels. Make one image 72ppi and the other 300ppi. Save them both for web.. are they any different in a web browser? Nope. They are both 100px by 100px images still.
DPI (Dots Per Inch) settings are only applicable when printing an image. DPI has no bearing on images destined for screen. DPI refers to the amount of ink dots/spots the press will place within an inch. Since no display on Earth uses ink, DPI is an incorrect term to use for anything related to display screens.
Be aware some mobile manufactures chose to use the term DPIx or xDPI which is sometimes shortened to simply DPI. This is not the traditional form of the acronym and the manufacturer has simply muddied the waters a great deal. If you see DPI in relation to mobile screen resolutions, they are speaking about effective PPI and not really referencing Dots Per Inch. A more appropriate acronym would have been xPPI or PPIx because mobile screens, like all displays, use pixels and not ink.
It doesn't make any difference what ppi setting you use for web images. It's the (pixel) width and (pixel) height of an image which are important.
When working with multiple images it's important to remain consistent. You will want all your images to be set at the same ppi to avoid resizing and scaling of aspects should you move pieces between images. Whether you choose to use 72, 96, 200 or 145.8 ppi doesn't matter, but all the images should be set the same.