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
Related
there are a ton of scaling instructions for GIMP but all of them tell you to scale and save easy peasy. I feel like I'm taking crazy pills.
This is what my save or export generates:
How can I simply export a selection? Shouldn't the GIMP instructions include this detail? Sorry for ranting.
In Gimp (and some other popular image editors) the image you work on is actually made of separate images (a.ka.a layers) held together on a "canvas". The "canvas" gives the size of the final image.
There are three different ways to scale things and you have to use the right one:
The Scale tool : scales the active layer by dragging corners. Doesn't change the size of the canvas. This is probably what you used.
Layer>Scale layer: scales the active layer by providing explicit dimensions. Doesn't change the size of the canvas.
Image>Scale image: scales the whole image contents and the canvas. This is probably what you should have used.
What happened to give you the image above is that you resized the layer using the Scale tool, so you got a tiny image in the corner of the canvas, which didn't change size. The uncovered part of the canvas was displayed as a checkerboard pattern. If you exported to a format that supports transparency such as PNG or GIF the image would have been transparent, but since you exported to JPG which doesn't support transparent images Gimp replaced the transparent part by the default background color.
Everything is well explained on their website. https://www.gimp.org/tutorials/GIMP_Quickies/
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.
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'm looking for a way to store a very large image (e.g. 100.000x100.000 pixels) on a webserver. I must be able to retrieve parts of that image and write parts into it. The cherry on top would be a way to get parts of that image, resized to a specific resolution (for example, i want alle pixels from 0,0 to 10.000,10.000 resized to 1000x1000 pixels).
Anybody know a kind of DB, or a data-structure or any other way or service or programm that can handle something like that?
thx, tux
How about Tiles?
Just like what popular mapping application (Google Maps / Bing Maps ) does. Divide and pre-process your image in to tiles for various sizes (zoom levels). Display them on a webpage with zero margin, zero border.
While retrieving, calculate positioning of tiles (which tiles should be retrieved as whole and which ones as partial) and then return as single image.
http://143.117.54.5/idl/images/img_pyrm.gif
(image ack: http://143.117.54.5/idl/Image_Tiling.html)
Search for "map servers": there are a bunch of them already available. I'm sure they at least contain components that might be of interest for you.