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
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
In using Tumblr theme tags, you can use {PortraitURL-16} or {PortraitURL-128} to get a 16x16px or 128x128px (respectively) portrait image URL. Similarly you can use {PhotoURL-500} to get a 500px wide URL to that image in a photo post.
I'm wondering if it is at all possible to do the same thing (specify a dimension value) for custom uploaded images in my Tumblr theme. For example, I use {image:Avatar}, and if someone were to upload a 1280 pixel-wide photo, I'm still going to be display it at 60x60px. Is there any way to specify {image:Avatar-60} so I'm not loading a huge image on every page load?
Afaik, no. Images are processed in three different ways on Tumblr.
Photo / Photoset / Panoramic Post
When creating a new Photo / Photoset post any images added, Tumblr will process, and create multiple copies at various sizes. You can then retrieve a specific size by using the appropriate theme operators:
{PhotoURL-HighRes}
{PhotoURL-500}
{PhotoURL-400}
{PhotoURL-250}
{PhotoURL-100}
{PhotoURL-75sq}
Theme Assets
You can also upload an image whilst customising a theme, via the customisation page. Unlike Photo / Photoset Post, these images are processed and retain their original size and multiple sized versions aren't created.
Post Body / Caption
Finally you can upload an image whilst adding content to the post body / caption. These images are processed and capped at 500px high / wide.
Hope that helps!
My site have 2 pages and the 2 pages contain a similar picture. If a user comes to the first page, he downloads the picture and then come to the second page, if I make the website so that the picture is shared between the 2 pages then the user no need to download the picture again?
If I want to put the same picture but different in size on the webpage, is it better to make 2 pictures by using image software editor or using CSS to change the width and the height of the picture?
you have answered your question.
if the image is from the same source, and if you have configured the caching on webserver correctly (and if the client has enabled cache), then there are no re-requests sent to view the same resource.
you dont need to create multiple images for different sizes, use html image attributes to show it in the grid dimensions you wish to.
Exception: if the original image is quite large, and you are not sure if the user will want to view the image, then create smaller image for faster loading. Thumbnails on a photo album is a good example for that. There is a program called re-sizer which accepts a folder and create a new set of images with the required dimensions
Resources below
Image Resizer
HTTP Compression
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.
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.