I am using ImageResizer to resize the images and display on the bootstrap layout.
Here I am fixing the image sizes while retrieving them to display the sizes in URL.
Issue is, image quality is lost as dimensions are different for different screen sizes and I am unable to adjust the image which is retrieved to fit exactly to the screen size.
Eg: for 14 inch monitor if size of image is 300*300 which gives perfect quality image, if the same image is viewed in 21 inch monitor the 300*300 image retrieved from imageresizer is loosing quality and getting blurred.
Can some one say what is best solution to retrieve images?
Thanks in advance.
Praveen.
Slimmage.js offers automatic resolution and dpi-switching using the ImageResizer URL API. It is probably the easiest way to achieve what you are looking for, as you just install it and set a CSS max-width on images. Done.
Why this is a problem (like Amy says in the first comment):
Because of high-density displays, browser pixels and screen pixels are not 1-1. Thus you need to use a images-swapping technique like srcset, picture, or Slimmage.js. srcset and picture require polyfills to work on older browsers.
Related
In mobile view mapbox renders black image instead of raster image. I suspect this is because of the size of image(3.9 MB), also this is happening mostly on chrome browser for mobile. Please help me find the potential issue here?
This sounds as if you could be running into the No-Data issue, when rendering transparency.
The black background that appears is the part of the raster image that does not contain any data. Generally a raster image is a rectangular grid of pixels. When you are working with data that is not rectangular, there are pixels within the grid that don't contain any data. These pixels are expressed as NoData values and represent the absence of data. GeoTIFFs that are uploaded to Mapbox Studio are displayed as JPEG to save space and make maps load quickly. Since JPEG cannot display transparency, NoData values appear black.
Please see this documentation on how to resolve this:
https://docs.mapbox.com/help/troubleshooting/raster-transparency-issues/#why-black-backgrounds-appear
We are developing an image sharing service using GAE. Many users have reported since last week that "portrait images are oriented in landscape".
We found out that from a specific timing, the specification of images uploaded and distributed through GAE has changed.
So the specs seem to have changed around 3/18 03:25(UTC) .
The "orientation" of Exif is not properly applied.
We are using GAE/Python. We save images uploaded by the users to GoogleCloudStorage, then use the URL we get with get_serving_url to distribute them.
Is this problem temporal?
Also, is it possible to return to the specs before 3/18 03:22(UTC)?
I think it happens because when get_serving_url service resize the image, it always resize the image from the longest side of the Image, keeping the aspect ration same. If you have a image of 1600x2400, then the resize image is 106x160 to keep the aspect ratio is same.
In your case one of the image is 306x408 (which is correct)as Image is resized from the height, and the other image is 360x270 (in which orientation change) the image is resized from width. I think in the later-one the orientation is changed just to keep the aspect ratio same.
I'm designing a responsive site using edge reflow with the following rules for breakpoints:
<480px, <768, 1024>
I'm using a different background picture for each breakpoint of respective widths. However when I add them to Reflow with contain for scale-x it seems as if the image I created is not that size. Most of them were at least 200 pixels shorter than designed.
So my question is what dimensions should I use background images for each breakpoint as well as any other guidance for this using Reflow or suggestions of I'm doing something wrong.
Normally I'd use cover rather than contain but then the image scales and doesn't show what I need it to from device to device.
Thanks
I've created a little gallery in drupal 7 using views module and colorbox formatter for image field. The thing is, I'd like to provide url for full size image download. Mind You - "full size image" is not the same image that appears in colorbox overlay. In fact I don't have full size image at all, since I've limited max image dimension on upload (1000 x 1000px). And I'm not sure how to overcome this restriction.
So, user should be able to click on a thumbnail (100 x 100px) and view 1000px wide version of an image in colorbox overlay. And apart from that there should be download link to full size photo (4000px wide, for example) - preferably in an overlay, but may be on the gallery page as well.
I could just skip size limits on upload and pull the link from image src, but I wanted to save bandwith and speed up display. Well, creating a gallery full of 16 Mpx photos isn't the way to go, anyway.
Is there any clever way to achieve what I want, or do I just need to hack file upload module a bit?
Ok, I've found an answer. And it's pretty simple, now that I think of it.
Since image derivatives are created on the fly, I just needed to create another image style in admin/config/media/image-styles, 1000px wide and high, and remove upload limit in image field.
"Full size download link" may be then created by a regex in JS, just replace one path to image with another.
I've seen a couple posts about the UIImage automatically loading the filename-568.png image in the new iOS6, but I can't seem to recreate it in the UIImageView class.
I'm using the Storyboard (not my app, just having to do some checks), and I've a simple layout with just the Image View scaled to fit, no code in the view controller, and I've sure the filename.png and filename-568h.png exist (as well as -568#2x.png just in case) but when I load it up in the iOS6 simulator. This has been for iOS 4 and 5, loading the #2x image for retina, doesn't seem to work in iOS6 though. Any ideas?
The image happens to be called Default.png since it is the same as the launch image, could this be the issue?
Thanks for any help in advance
iOS6 does NOT automatically load -568h as it does with the #2x images. The only exception is the default screen, but further than that you have to manually set you 568h image yourself.
I created some code to mimic the loading behavior for -568h images when using the [UIImage imageNamed:#""] method, but from the IB I do not know the way. If you are interested in such a solution, check it out at http://angelolloqui.com/blog/20-iPhone5-568h-image-loading
Typically, you should only use 568h for the launch image. If you notice yourself using different image assets within your app for the new display height, you should consider that you might be making your UI too static.
The most obvious place people want to use 568h for images is for background images. An alternative is to just have one asset that has the largest possible dimensions and align it properly using the contentMode property of UIView.
But perhaps you have something floating in the image at the top and the bottom, so contentMode doesn't solve it. You could consider that the top and bottom floaters should probably be separate views anyway.
Remember, we have always been making apps with variable heights. Every time a keyboard pops up, its as if the size of the screen has shrunk.