Images in Browsers - image

Does anyone know why sometimes when you right click on an image in a browser (IE, FF or Chrome), and save the image on your hard drive, you get a different file size image and lower quality than the original image you uploaded to the server? This happens even if you clear the browser cache.
What is strange is that it doesn't happen all the time. What is stranger is that I wrote a simple html page with a link to the image. I right clicked on the link and saved the target image. It saved it with the original size and quality. However, a little later, I tried saving the same image again, the same exact way, I got the lower quality image with the reduced file size.
I know it's not an issue with my PC because the same thing happens on my phone (Droid X) browser. When I save an image into its memory from the browser, it is lower quality and reduced file size.
The lower quality image file size is usually a little bigger than half of the original image file size.
What is going on?
UPDATE AND ANSWER:
My problem was caused by Verizon Wireless compressing images through its network: http://www.macobserver.com/tmo/article/verizon_starts_data_throttling_content_optimization/
I was occasionally tethering using a MiFi device and was apparently in the top 5% of bandwidth users. Therefore, images downloaded through the MiFi into my laptop and on my Droid X were being compressed through the network. The browser was caching the "bad" images, so they appeared compressed even when I was on a different network, making it harder to for me to troubleshoot what the heck was going on. I hope my answer helps others.
I don't want to get credit for my own answer, so I am changing this to a different question: Since a lot of people use such wireless networks now on their mobile phones and through tethering, should web developers test their sites for such use to account for the image loss? Sometimes the image loss is considerable. If so, how do we do it if this occurs only during certain periods of the month for only certain users? What compression algorithm are they using? Can we emulate the compression?

My problem was caused by Verizon Wireless compressing images through its network (see the edit to my question). This problem no longer exists with newer devices (or perhaps Verizon has abandoned this practice).

Related

Chrome/Safari Mobile - Images are being resized & compressed and look terrible

I am encountering an issue I have never seen before. During development of a new website, while testing on mobile I noticed my images are getting resized and compressed. An image that is normally 1600 by 600 naturally, is being resized and compressed to 375 by 140 this is then displayed as the natural size.
I have an older copy of the website with the same images. The issue does not occur with those.I have not implemented any server side caching yet.
Is anyone familiar with this issue? I haven't been able to find any information on it. I looked up 'Image compression bug on chrome', 'chrome resizing images', and at least a dozen other queries, but nothing that seemed to match my issue. Other colleagues are seeing the same issue on their own devices as well.
Nevermind. It turns out one of my colleagues in the past had run a small experiment with cookies and limiting the image widths, and had left it there.

Faster image upload on mobile

So, for my wordpress mobile site, there is a button to upload an image (either from camera or phone gallery).
However since the size of mobile images are well over 3 MB, it takes too long to upload them.
Is there a way to reduce the image size before the upload even happens? or to speed up the uploading process.
Thank you guys!
Yes, you have some solutions:
Compress image before send; open image in your graphic editor and save as JPEG or PNG with lower quality; file will be <3MB
Upgrade your home internet - upload parameter is important here
Upgrade your server plan - maybe you can have better network connection.
You can't make it faster by changing the code or something.

What is the best image size to use on mobile devices? (HTML)

I would be using Google for this, but it would display outdated info, and that's not what I want.
Basing from statistics of 2012,cellphones and tablets have shifted the way we interact with websites. Due to that, I'm planning going fully mobile and I would like to know which is the "standard" image size I should implement (for mobile display only) so they don't slow down cellular connections and the browsing session. Of course... they shouldn't look crap either
Thanks a lot!
40 kb seems to be best images sizes all images used in your original website should be reduced from the original size to this size. as most mobile devices will not be compatible with any image size bigger than this.

Preventing Mobile Safari Cache Overflow

I've got a simple little web app that's aggregating a couple views from some ethernet enabled cameras around my house. This is basically a little dashboard, so that I can easily tell what's going on around the house. I've got it refreshing the images every so often by appending new Date().getTime() to the base URI.
Everything works happy days, except for one little issue. If I leave the dashboard up on my iPad for awhile, it runs out of memory and crashes back to the home screen. I know that its because Mobile Safari is caching each of these images in RAM and it eventually ends up with far too many of them.
Since these images are being hosted on embedded devices; I really have no ability to modify the caching headers directly. I would like to stay away from making a wrapper on my server side as well.
My question is; can anyone think of a way to prevent Mobile Safari from caching these images so aggressively that it crashes?
You might try to reuse your img tags and/or set the src attribute to an empty string before removing an image. It's probably not an aggressive cache that's crashing mobile safari, but how the browser doesn't deal well with releasing image references when image tags get deleted.
You might find more useful information here:
http://www.vargatron.com/2010/08/ipad-html5-js-memory-management/

J2ME cache issue

I have to write a J2ME app to retrieve images from server and display in mobile phone.
I have seen and test that Snaptu have a mechanism to cache image, event with 100 images (both normal size and zoom size). I wonder how they can do that?
I though that those guys use rms to save image stream to data. But when i check in working folder of simulater( I use Windows XP and Sun Wireless Toolkit 3.0, the Emulator device i use to run my program is CLDC Device 1 - my working folder is C:\Document And Settings\Administrator\javame-sdk\3.0\work\6\appdb), i see some .db file. When i delete these files, i still can view cache image in my emulator????
I also thought that those guys use heap memory to save image. But it is not correct because when i set limit device memory is 2MB (like some mobile phones), and i load and view 100 images in zoom size, it didn't make OutOfMemory Error?
It so weird.
Any one can help me? Thanks
RMS is possible solution for trusted and untrusted MIDlet.
JSR-75 file connection is possible solution for trusted MIDlet only. You can't create file if your app is untrusted.

Resources