I've noticed that images being served to the front end are bigger than the image is on the server. From what I can tell, Magento runs the images through some filter that does things like adds watermarks, adjusts colors, etc. Is there a way to disable this feature?
edit: Sorry, I should have been more specific. I'm referring to product images, and actual file sizes, not height/width. The file size of the product images being served are bigger than their original files.
The catalog/product image tags are defined in Magento's template files. The image sizes defined will vary, depending on what images you are referring to.
These templates call the images like this:
In app/design/frontend/base/default/catalog/product/list.phtml
<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>
If notice on the end, there is a resize function that has a set number in there. This number will tell Magento to automatically resize the image it retrieves to that dimension. You can pass a height and width to the resize function, like so:
..->resize(height, width);
As far as I know, there is no configuration setting that will globally disable this resize function. You would have to override and void the function using a overwritten file or extension. I would recommend just uploading the correct sized images (larger than the minimum sizes seen on the site). Magento will then properly scale them down without loss of quality.
Related
I have changed the theme (to OceanWP). Now the catalog images in the store are no longer displayed as desired. Before the woocommerce_thumbnail was loaded (247x296). Now only the original images are inserted. Now there are differences in the display of these catalog images, which looks unsightly.
I have tried to adjust this via customizer. Here I use the thumbnail width 247 and crop to the aspect ratio 5:6. The catalog images do not respond to these settings in any way.
Then I used the Regenerate Thumbnail plugin to regenerate all the thumbnails. Again no success, everything the same as before.
I saw that for the product images that were still uploaded with the previous theme, the HTML code directly pointed to the desired woocommerce_thumbnail. For the new products uploaded via OceanWP, this is handled with "srcset", which doesn't seem to work properly. (examine the different image-object, higher and smaller once)
My wish is that the products catalog reverts to the appropriate woocommerce_thumbnail. Or, that I can override the previous settings with a code snippet so that the thumbnails are all cropped to the same size again.
I am grateful to anyone for even an approach to fixing the problem.
Regards
Tim
Is it possible to resize images on the fly and cache the result with Drupal?
I have some big images (e.g. 2000x2000px) and I want to display a preview of the e.g. 100x100px.
I know there is a theme_image_style function. But it seams to only create the <img> with the right size and not effectively resize the image.
I look at modules/images/image.admin.inc and they used the function [image_style_create_derivative][2].
Yes, you should use Drupal's Image styles (Configuration -> Media -> Image styles). There you should create your style.
Then, on front-end, when ever you want to display image with that style (in that resolution) you can use image_style_url() function:
https://api.drupal.org/api/drupal/modules!image!image.module/function/image_style_url/7
It accepts 2 parameters - one is image style machine name and other is image URI, which you can get if you print out all image field properties.
You can also select image styles from back-end interface...i.e. when creating a view for some image you can select to be displayed in specific image style.
In both cases those image styles are generated the first time image is used.
In response to your comment on MilanG's answer, using image_style_url() is the best option on the backend. There is also
https://www.drupal.org/project/resp_img
which may be something worth looking into. From a UX perspective, you don't want to force the user to load a 2000x2000 px image every time they load the page. Regardless of the outputted size, the image is still going to render as a 2000x2000 px image with a large size. image_style_url() or using image styles in the GUI create a new file that will load much quicker and is the preferred method.
This only happens on the product pages with images with a larger height than 500px approximately. Caching is disabled. Products display correctly at smaller sizes but i need a solution that doesn't require image resizing before uploading.
I believe its something to do with using multiple image resizer program and some of the meta information in the image.
Thanks
It sounds like there is EXIF data in the jpeg which records which way 'up' is. Either this info is getting ignored when you upload but is not ignored on your PC - explaining why the image looks the right way up when you view it on your desktop, but the wrong way up in Magento, or vice versa.
Can you use an art program or bulk convertor like XnView to either apply or remove the EXIF data before uploading? Then you might need to manually rotate some images.
I'm using WooCommerce for a client website, and I'm having an issue with disk space. When an image is uploaded for a product, the system seems to be creating 19 other image sizes for the original image.
Now I know that I set a Thumnbail, Medium, Large and so on in the Media Settings and in WooCommerce settings, but I don't understand why it's creating 19 other sizes?
Here's a screenshot of an image in my wp-uploads/2014/01 folder:
As you can see, one image will take up a fair amount of space - I've got to consider that each product has at least 4 different images!
How do I reduce the amount of images that are being created?
This is because a certain plugin or current theme is registering image sizes. Each registered image size generate an image of that particular dimensions. You need to find out which plugin or theme is doing so. Normally, that should be your theme. Look in your theme's function.php or plugin files and find function calls like this:-
add_image_size( 'category-thumb', 300, 9999 );
Remove the required add_image_size function calls to avoid generating multiple copies of the image.
http://codex.wordpress.org/Function_Reference/add_image_size
About catalog images I found smth here http://www.magentocommerce.com/knowledge-base/entry/resizing-catalog-images/.
But it has a path Design > Themes Editor > Customize (Theme) > Catalog Images that I haven't in my admin panel.
As for product images I haven't any idea how to resize image.
I will be grateful for any link and tips.
PS: I read out that image resize is used in the template file directly. If we have 100 images per page it means that Magento resizes 100 times per page loading. Seems it require a lot of additional resources.
I believe you're going about this the wrong way. It is always best to retain the highest quality version. Let's say right now you want to shrink images to 300x300. What happens next year when you redesign you site and you want to feature product images more prominently and you want 400x400 images? You can't because you only have 300x300. As already mentioned, Magento has an resize mechanism that does exactly what you want. It will resize (shrink) the images once and store them in a cache. The first time that image is loaded then Magento does the resize and any subsequent image load will load the already saved image from the cache. Voila, you have both the original high quality image stored and the resized image stored.