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.
Related
For each record, I have two images, small and large size. What is the best way to show an image size according to the size of the screen?
I know I can use css and mediaquery and show the small or large image using a div display none / block, but in this way, I understand that the user has downloaded both images even if they are not displayed, is that correct? Then, the page load increases. If so, what is the best option to do this?
For this problem the most efficient way is using the User-Agent to detect if a client is desktop, tablet or mobile.
I prefer to use Mobile_Detect or jenssegers/agent (based on Mobile_Detect).
Edit
Recently I installed the Google Pagespeed Module on my server. There is a filter, resize_rendered_image_dimensions, that returns images with sizes of the current client view (exactly what you are looking for).
Some other implementation would be lazyloading with Javascript and adding dimensions to the requested url depending on the viewport sizes.
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 have uploaded a photo in WordPress. I am trying to post a thumbnail of the image using a predetermined width while constraining the height proportionally.
In functions.js:
add_image_size('width-130', 130, 0, false);
On the page that outputs the thumbnail:
the_post_thumbnail('width-130');
According to the WordPress docs(http://codex.wordpress.org/Function_Reference/add_image_size), it says:
WordPress will create a copy of the post thumbnail with the specified
dimensions when you upload a new thumbnail.
Currently it is outputting the full thumbnail image with a width attribute of 130. This still requires the full size image to load, which is not what I want. I would like for WordPress to create an actual copy of the post thumbnail with the correct dimensions, and not just to set the width attribute. How can I achieve this?
I discovered my mistake.
Since I had not re-uploaded the image file, it was still trying to access the full size image which was the assigned image for that post, while adding the width attribute. Once I re-uploaded the image, the add_image_size() function is now actually creating a copy of the thumbnail with the correct dimensions.
I apologize for asking this question. If the community wants, I can close it but I figure it might be good reference for WordPress newbies such as myself.
Use this plugin to regenerate thumbnails.
http://wordpress.org/plugins/regenerate-thumbnails/
In case anyone runs across a similar problem, this may help. add_image_size generates derivatives that are smaller, but not bigger or the same size. Thus if you are trying to make a monochrome derivative image, uploading an image the same size as the monochrome, it will not be available and techniques like this one won't work.
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.
We would like to display very large (50mb plus) images in Internet Explorer. We would like to avoid compression as compression algorithms are not what CSI would have us believe that they are and the resulting files are too lossy.
As a result, we have come up with two options: Silverlight Deep Zoom or a Flash based solution (such as Zoomify). The issue is that both of these require conversion to a tiled output and/or conversion to a specific file type (Zoomify supports a single proprietary file type, PFF).
What we are wondering is if a solution exists which will allow us to view the image without a conversion before hand.
PS: I know that you can write an application to tile the images (as needed or after the load process) and output them; however, we would like to do this without chopping up the file.
The tiled approach really is the right way to do it.
Your users don't want to download a 50mb file before they can start viewing the image. You don't want to spend the bandwidth to serve 50 megs to every user who might only view a fraction of your image.
If you serve the whole file, users will eventually be able to load and view it, but it won't run smoothly for most of them.
There is no simple non-tiled way to serve just a portion of an image unless you want to use a server-side library like imagemagik or PIL to extract a specific subset of the image for each user. You probably don't want to do that because it will place a significant load on your server.
Alternatively, you might use something like google's map tool to provide zooming and scaling. Some comments on doing that are available here:
http://webtide.wordpress.com/2008/08/27/custom-google-maps/
Take a look at OpenSeadragon. To make a image can work with OpenSeadragon, you should generate a zoomable image format which mentioned here. Then follow starting guide here
The browser isn't going to smoothly load a 50 meg file; if you don't chop it up, there's no reasonable way to make it not lag.
If you dont want to tile, you could have the server open the file and render a screen sized view of the image for display in the browser at the particular zoom resolution requested. This way you arent sending 50 meg files across the line when someone only wants to get an overview of the image. That is, the browser requests a set of coordinates and an output size in pixels, the server opens the larger image and creates a smaller image that fits the desired view, and sends that back to the web browser.
As far as compression, you say its too lossy, but if thats what you are seeing you are probably using the wrong compression algorithm or setting for the type of image you have. The jpg format has quality settings to control lossiness, and PNG compression is lossless (the pixels you get after decompressing are the exact values you had prior to compression). So consider changing what you are using as compression, and dont just rely on the default settings in an image editor.