I am developing an iPhone camera app that uploads an image to Amazon S3 and that image is displayed on a website. When the iPhone takes a picture, it always saves the photo in an upright orientation, while the orientation used to correctly view the photo is saved in the image's EXIF data. So if I take a photo with the iPhone and open it in FireFox without processing the EXIF data, the image could be sideways or upside down.
My problem is that I don't know how to display the photo in it's correct orientation on the website. My current solution is to rotate the photo in the iPhone app, but I'd rather not do that. Is there anyway to respect the EXIF data when displaying on the web without pre-processing the image?
You have several options, listed in my order of preference.
Rotate the image on the camera.
Upload the data through Amazon EC2 and use program to read the exif and do the rotation
Run a program on your web server that proxies s3 and does the rotation.
Use some fancy Javascript and DHTML.
Option 3 might not be reliable across browsers, and I'm not sure of the performance. Option 2 would add unnecessary complexity. You might not want to do it, but unless you are planing on using the net for anything but storage, option 1 is best.
Rotating on the camera might be the best option, but if you rotate before storage and the image is a JPEG, rotation is a lossy operation -- so the image you store will immediately lose some quality.
Luckily, it doesn't have to be that way -- if instead of reading in the JPEG, rotating the image and then re-encoding as JPEG, there are ways to apply rotation directly to the file.
JPEG is stored as a series of 8x8 cells -- they can individually be rotated and rearranged without losing quality (90 degree increments) -- then you need to update the meta-data that has the size information.
Here's some C++ code you could try to port
http://eng.neologica.it/download/downloadIJGWin32.html
For .NET, my company (Atalasoft) provides an SDK that can do this.
Another option is reading the JPEG, rotating and then storing as PNG, but the file size will be much larger.
Related
I'm developing IPS 4. I have profile popup:
The profile cover loads very long, because cover dimensions and size are big. So I've decided to make a PHP API which resizes images to needed size and then displays the resized image.
Is this good idea to make cover upload faster?
You need to populate a 436x85 box with user-provided pictures.
My own digital camera has a 18 MPx sensor that produces 4896x3672 pictures that use around 7 MB when compressed as JPEG. Imagine you display e.g. a dozen profiles per page. That's 84 MB worth of network transfer (more than a typical MP3-encoded music album) for a single page. JPEG compression roughly accomplishes a 1/10 ratio so you can assume 840 MB of RAM just to store the pictures. And they you have the overhead of having the browser resample pictures real time.
On the other size, a 436x85 JPEG can use 8 to 22 KB on average (depending on quality settings).
So if you use the raw pictures uploaded by users, of course it's not going to be fast.
Conclusion: always resize pictures yourself. And please do it only once, it's a heavy process even for your server.
Yes, it is a good idea to store not only the original image, but the resized ones too, because each time a new user is requesting certain page he is getting this big image, what is basically a waste of transfer and makes user wait what leads to poor user experience.
You should make a script which resizes and saves newly uploaded images to your server and use them instead of these big original ones. But also don't forget that resizing is really CPU-heavy, so it would be a good idea to queue this action and not do it instantly during the user's request.
Google Page Speed Insights suggests me to optimize webpage images on a webpage I'm currently working on. Images are uploaded from a server. I want to display optimized images on the page but don't want the original image on the server to change. Is there any way to do this in PHP?
You should reduce image size while uploading. Try this code.
reduce image size while uploading using the following PHP code used to upload image
If you don't want the original image to change then you'll find any optimisations you perform to bring the file size down / serve a move appropriately sized image will be redundant due to the overhead of "optimising" the image on the fly. (Unless your original image is just that big)
As I see it, you have 3 options:
Unless it has a massive impact (or you can envisage it will have a massive impact) just ignore Google Page Speeds for now.
You can use lossless compression which will reduce the file size without reducing the quality of the image. This is something you can do on your server with various different apps (just google what type of server you have followed by lossless image compression)
Just create a copy of the original image upon upload (or whenever) and serve that image to your users. The benefits to this are you can have different sized images which can be rendered for different devices, e.g. small image for mobile, and again you can use lossless compression on all of them. The downside to this is you'll obviously be using more server space.
Hope this helps!
I've been struggling to an issue of saving an image into jpeg which loses quality. As a project for my degree, I'm making an app where i upload the images on facebook.
I have a nice colored image, for which i shuffle the pixel values to get a mapped image. Then I upload it onto the facebook. When, i download and move the pixels back to original image, it loses the quality too much.
Below are the original, mapped and retrieved images:
I've tried many strategies like using png files, which works. But, currently, whatever the image is, facebook converts it to jpeg. So, if i upload maskedimage.png to facebook, it converts it to .jpg and loses some of the pixel-correlation values, which doesnt end up giving me the right image to retrieve original.
I'm using PHP and facebook-php sdk.
Please suggest.
Thank you
-Kaur
You're stuck. JPEG is a lossy algorithm which depends on human vision characteristics to mask the inaccuracies. By scrambling the pixels you've changed the nature of the loss so that it's not invisible anymore.
This isn't primarily about JPEG being lossy; it's about Facebook forcing image recompression, even if you check "High quality" when uploading.
The best you can do is to double the source image resolution, and for solid colors, try to introduce noise. Details in this GD.SE question
Note that the trick of uploading images <100kb has no longer been working, since at least June 2012.
I currently have a website that aggregates images, the problem is those images are very large, and when I display them at smaller sizes, they still eat up a lot of computation.
I'm curious as to how to actually force reduced size/quality without just smooshing it into a <div> element.
Here is my site in question, you can see how 'laggy' it gets when you produce images:
http://newgameplus.nikuai.net/TEST/index.html
I was using timthumb.php to resize the images, but the host doesn't allow that script for some reason.
The best way to do this is to use some sort of image re-factoring service.
I have written my own one that uses ffmpeg and imagemagik to resize images on the fly and to generate arbitrarily sized thumbnails from videos. I memcache the results to make subsequent requests super snappy, and have some interesting additions such as automatic Point of Interest detection using Face Detection and Image Entropy, with the aim being "nice thumbnails, no matter the size"
An example of such a service is src.sencha.io - the documentation for this service is here but I have included the important bits below.
Specify Image Size
<img src='http://src.sencha.io/320/200/http://yourdomain.com/path/to/image.jpg'
alt='My constrained image'
width='320'
height='200' />
This will take your image (http://yourdomain.com/path/to/image.jpg) and run in through the resizing service, returning a 320x200 version of your image. You cannot set the gravity/point-of-interest using this service though (as far as I can tell).
You can also use this service to change formats, resize dataurls, do percentage resizes and use the resizing service to detect the width/height of the user agent requesting the image.
There are many such services available on the web.
I agree with slash: It depends on how the images are being resized. One thing I do for a site is use photoshop (or GIMP) to resize the image to the exact dimensions i need for the page i'm using the image for. Then i also include the same dimensions in the width-height attributes on the image itself.
Additionally, you can use your photo editing software to check the size of your image if you were to save it with a different file extension, and (specifically with jpeg and png files) photoshop will let you reduce the quality, which lowers file size and speeds up page loading.
Lot of user opening my site in mobile,
Tell me which image type will load quickly in mobile device ,
jpg,gif,png ,
Which one is best ?
Go with PNG8 where possible and limit the color palette. Try to only use as many colors as strictly needed not more.
There are PNG tweaking tools which allow you to get rid of unnecessary chunks of that PNG. For more information on PNG chunks there is the PNG chunks specification found here.
http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html
The tweaking tool I was talking about can be found here. It runs on Linux using wine as far as I have tested it.
http://entropymine.com/jason/tweakpng/
Additionally TinySVG is a pretty interesting format. SVG graphics allow lossless rescaling and because it is in fact a XML file you can modify it in a programmatic way.
EDIT: One note on JPEG graphics. If the file size exceeds 10kb save it progressive if it is under 10bk save it baseline. It is a small optimization for JPEGs.
There is no single "best" image type. The image that loads the quickest is the smallest one. But quick loading does you no good if your image is distorted and unidentifiable.
Pick image format base on the type of image you are trying to render:
JPEG is hands down the best for photos 99% of the time when you consider perceived image quality relative to file size; but JPEG's lossy compression algorithm relies on the existence of noise (lots of soft/subtle color transitions) and a lack of sharp lines/edges in the source image for the best effect. Never use JPEG for rasterized text!
PNG is the best option for rasterized images comprised of sharp edges and smooth/solid color blocks. Basically, anytime you need clean/lossless images (logos, icons, UI elements, text, etc.—anything but photos/paintings basically), you'd use PNG. It is also the only real option when you need alpha channel/partial transparency.
GIF is the only universally support animated image format, but aside from that I would just use PNG in most cases.
SVG is for vector images, but I'm not sure how many mobile browsers support it.
From a quick read, it seems that jpeg would be the best option. However, that is dependent on any specific needs you may have for some images (ie jpeg does not do transparent backgrounds, etc.)
Also, especially for a mobile site, if the images are frequently used parts of the website's layout (ie buttons, etc.) then using CSS Sprites is a good practice as it reduces the number of elements being downloaded to the user (of course, at the tradeoff that the image(s) which are downloaded are larger).