I am working on a web app that allows users to upload files to our CDN network, and then displays the images on the web app. However, I noticed something weird when uploading images through iOS (Safari) and possibly other browsers too.
When the highest resolution image is selected, the image is uploaded in its correct dimensions and shape.
However, when a lower resolution is selected, the uploaded image ends up being rotated on upload. I am not sure, if this happens with the CDN, or somewhere with the iOS file select feature, but its weird, since it works fine with the "Actual size" image.
You can see images below, to re-produce the error.
Pay attention the image shape, and file size. As "Actual size" the file size is 3.5MB!
Now, after we click on "Choose image size", following appears. I will choose "Medium".
After, you will see the file size is just 164KB. Reduction of -95.31%.
Then, pay attention to the shape, after the image is uploaded. You will see it is different rotation.
Does anyone have any clue as to why this happens? I am not sure if this has anything to do with the CDN I am using, because as I said before, when the "Actual size" image is selected, the uploaded image is perfectly fine. Only when size is changed through iOS "File selector" it changes rotation.
Also, another concern I have, is that these high resolution images are not necessary for my application. Sometimes we are talking +8MB for images, due to their high resolution and dimensions. Does anyone know if it's somehow possible to specify the image size for uploads on iOS/Android as default - so the user does not have to do anything? That would be ideal.
The images generated during choosing by iOS are missing the data for Orientation in the EXIF data for the image. That's why the image is correct when you upload the actual image, it seems oriented properly, but isn't right when it is a different size. You can check that by uploading the original and different sizes at https://exifinfo.org/. You'll see the different Orientation data in the EXIF section.
Since this is an iOS Safari specific feature, you can't rely on being able to choose multiple sizes of images that are being uploaded. A more reliable, cross-platform solution would be to resize the image yourself using a Canvas. This will however still probably require the user to upload the full size image, then you would have to process it on the canvas and upload it to your API.
Related
When I load my website half of the page size is loading different than the other half. This only happen sometimes. This is ruining my website view.
I assume you're using webfonts to display text in fonts that aren't on your device. You see the sizes change when a similar looking font that exists on your device is swapped for the webfont when the download completes.
You see this "sometimes" based on caching and or speed of your connection to get and render the fonts.
The company I work for stores some of their product images in Google cloud storage, and I've been able to fetch the images however when putting the img tags onto a page, they appear to be in the wrong orientation i.e landscape instead of portrait (no issues with images taken in landscape mode).
When viewing the image in a new tab however they appear correctly!
Is there a reason why this may be? Suggestions are appreciated.
I have tried putting the img on a blank page without an anchor wrapping it to see if that made a difference and it did not.
I'm guessing the OP is having problems due to EXIF data. If the original images contain EXIF data indicating that they should be rotated, special measures must be taken to get that data interpreted by a web browser when displaying a page. It is discussed here:
Is there a way to tell browsers to honor the jpeg exif orientation?
If the the solutions provided for exif orientation are not acceptable, the OP will have to preprocess the images to rotate them to proper orientation and save them that way on the serverside. Then the correctly rotated images can be delivered on web page.
I have an issue in PDF exporting functionality in SSRS report.The report contains a PNG image with several lines.When I preview the report in browser(Both IE and Chrome) that image is displaying correctly but when I exported it to the PDF and open the file in PDF viewer software, the lines inside the image are getting blurry.
The image is loaded to a standard image control in SSRS report.I already have tried all the image size properties inside the image controller(like Original Size / Fit to size etc) and images with different resolutions, but still the issue is there. Please note that I can't change the image format from PNG to other one since I want to keep the image background as transparent.
Can someone help me to resolve this issue please?
This can be a number of things. Sometimes the image is fine but your screen resolution and the PDF viewer combined can make them look bad.
First, try to print the PDF and see if if still looks bad, if it looks OK printed then the chances are it's the screen resolution and/or PDF viewer causing it. I use Nitro PDF and they always look better than using Adobe Reader.
In anyway case, savingthe PNG with higher DPI setting will usually fix the issue. Typically I save PNG's at 600 dpi, which might be overkill but it does mean they are sharp on the PDF.
If you need a Windows tool to save at a different DPI, try Inkscape which is free. When you export images you can set the DPI to whatever you want. Try 600dpi and if that works.
I have some photos that were uploaded by a user who complained that the vertical photos were changed to landscape orientation when they were resized. Indeed, that was the case and in an effort to just move things along I reoriented the photos and uploaded in place. That had no effect when the pictures were viewed inside of a webpage though!
To make as simple a test as possible I created a bare bones web page with no CSS and a single IMG element with no attributes other than src. That continues to show the photo in landscape mode. Copy the photo's URL and paste into another tab and the photo shows in vertical mode. Download the file and open in Windows and it shows in vertical mode.
http://www.texashiking.com/test/PhotoOrientation.htm
The files are being stored on Azure BLOB storage.
I've duplicated this with Chrome version 56, Edge version 38 and Internet Explorer 11.
What could be causing this?
Your image has embedded exif orientation data which is presumably being ignored when rendering the page. See this answer for a bit more detail.
Basically, the camera you took the image with stored it in landscape, but stored some metadata with it saying that the image needs to be rotated 270°. The browser is apparently ignoring this tag when rendering it in the webpage, but not when you access the image directly.
I've used Fancybox (and similar) in the past to display images on websites. When I upload images to the server that are higher resolution than 72dpi, they usually take noticeably longer for Fancybox to load and display.
I was under the impression that all websites were displayed at 72dpi, and I threw images in under that general assumption. Can images be displayed at higher resolutions in a web browser? Is that why these images that I've used take longer to load? Or are they still displayed at 72dpi, but have to be scaled every time the page loads?
Thank you.
Images are shown at the resolution and dpi in which they are - for example; if i upload an 388dpi image to my site it will show at 388dpi at the same original resolution. The evidence behind this is that I am a web app developer. When first testing with one of my first apps we uploaded a full background image at 72dpi and the text wasnt very good so we made it higher dpi and same res and all worked perfectly!
Hope this helps!