Is there a way to maintain the quality as a deepzoom image zooms?
I was curious if there was a way to increase the quality of the image as it zooms without having to use a larger image to create the deepzoom image. I'm using jpgs for my base file to create the deepzoom image using deepzoomtools.dll. I set imageformat to jpg and quality to 1 in my code. When a user uploads an image, I resize it down to 1024x1024 and then create the deepzoom image from the resized image. I can zoom in a few levels, but then it starts to get pixelated. If I create the deepzoom image from the full size, large image (at whatever resolution it is), I can zoom in further before it gets really pixelated. I understand that a higher resolution image will result in a clearer image as you zoom and allow you to zoom further, but was wondering if there was anything programmatically I could do with deepzoomtools.dll to increase the quality of the image (maybe save as png's?)
Thanks for a great tool!
Thanks for a great tool!
1
person has this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
The company marked this question as answered.
The best answer from the company
-
Hey tgakk,
If you're using Seadragon Ajax, maybe the max zoom limit is too high for your taste. The default is 4 -- that is, we'll let the image stretch up to 4x in width and height of its natural size. Try changing it to 2 or even 1 (this is Javascript code, btw):
Seadragon.Config.maxZoomPixelRatio = 2;
This will restrict how far you can zoom, so the image won't appear as pixelated/bad anymore. Does that help?
Btw, if you're going to use JPEG, I wouldn't recommend image quality of 1 as that will bloat the file size a lot. If it's a photographic photo, the default image quality of 0.8 should suffice, but you can up it to 0.9 or even 0.95 if it makes a noticeable difference (the increase in file size is exponential, I believe, so 0.95 is much smaller than 1). I'd recommend PNG only if it's a vector-type image, e.g. a chart or diagram.
The company and 1 other person say
this answers the question
-
Inappropriate?Here is my code if it lets me post it:
Public Shared Sub makeDZI(ByVal thePath As String)
Dim target As String = ""
Dim imagepath As String = ""
Dim fileexists As Boolean = False
Try
imagepath = thePath
Dim ic As New ImageCreator()
ic.TileSize = 254
ic.TileFormat = ImageFormat.Jpg
ic.ImageQuality = 1
ic.TileOverlap = 1
target = System.IO.Path.ChangeExtension(imagepath, "dzi").Replace("UploadedImages\", "zoom\")
If System.IO.File.Exists(target) = False And System.IO.File.Exists(thePath) = True Then
fileexists = True
ic.Create(imagepath, target)
End If
Catch ex As Exception
End Try
End Sub -
Inappropriate?I've never used deepzoomtools.dll, so I'm not sure what it's capable of... but I'm sure you can create deep zoom images using png files for lossless tiles.
I'm curious why you chose a tile size of 254 pixels? -
Hey Scott,
In general, the idea is to optimize for the common case: middle tiles. By having tile size 254 and tile overlap 1, the middle tiles end up being 256x256, and power-of-2 textures are always good in the graphics world. If you had tile size 256, with tile overlap 1, the middle tiles would be 258x258.
I don't think it makes much/any difference in Seadragon Ajax in general, but it might e.g. on a mobile phone. Etc. -
Inappropriate?Thanks for the reply. Maybe for the tileformat I'll try using ImageFormat.png and see if that is any better as the users are uploading jpg files only, not png files.
I'm using tilesize = 254 as opposed to 256 at the recommendation of another individual in another forum. I was having a problem with lines between the tiles when I'd create the deepzoom images dynamically with deepzoomtools.dll. It looked really bad as you zoomed in because you could see all of the square tiles. When I changed it to 254, they went away. Now, there could have been a few more variables as well as a new version of deepzoomtools came out, but I think I tested it on the original version of deepzoomtools that was having the problem and it fixed it. Then I upgraded to the latest version of the dll.
He said:
In order to get rid of the seams (lines) between the tiles you should set tileOverlap to something bigger than 0, ideally 1:
Dim
ic As
New
ImageCreator()
ic.TileSize = 254
ic.TileFormat = ImageFormat.Jpg
ic.ImageQuality = 1
ic.TileOverlap = 1
It can also be beneficial to set TileSize to 254 so the resulting tiles will not exceed 256x256 and therefore have better performance characteristics due to texture buffering.
I had tried tileoverlap set to 1 in the past and it hadn't fixed it, but changing to 254 and tileoverlap one did get rid of the seams.
I'll write back if saving the uploaded jpg to png format gives better image quality in the final dzi. -
Inappropriate?So I tried it with imageformat.png and it doubled the size of the deepzoom image files on disk and essentially just added more color to it. I couldn't see any real difference in quality.
-
Inappropriate?Hey tgakk,
If you're using Seadragon Ajax, maybe the max zoom limit is too high for your taste. The default is 4 -- that is, we'll let the image stretch up to 4x in width and height of its natural size. Try changing it to 2 or even 1 (this is Javascript code, btw):
Seadragon.Config.maxZoomPixelRatio = 2;
This will restrict how far you can zoom, so the image won't appear as pixelated/bad anymore. Does that help?
Btw, if you're going to use JPEG, I wouldn't recommend image quality of 1 as that will bloat the file size a lot. If it's a photographic photo, the default image quality of 0.8 should suffice, but you can up it to 0.9 or even 0.95 if it makes a noticeable difference (the increase in file size is exponential, I believe, so 0.95 is much smaller than 1). I'd recommend PNG only if it's a vector-type image, e.g. a chart or diagram.
The company and 1 other person say
this answers the question
-
Good info--I'll give it a try. The smaller I can make the file size while maintaining quality, the better. I'll do some testing to see if there is a noticeable difference in quality of the dzi if I lower the image quality. That is good to know on PNG files--I was just looking for a way to increase the quality as it zoomed, but then my file sizes were too large and the only difference I could see was that there was more color. Thanks for the assistance! -
Inappropriate?Just a few thoughts around ideas already mentioned here:
PNG files are all about compressing an image's size as much as possible within the parameter of keeping every single pixel exactly as it was originally. This is referred to as lossless compression. Photos do not really compress well using this method but a PNG will usually reduce the size of a purely uncompressed (and therefore trustworthy when image purity is your first concern) image format such as BMP. In other words PNG is primarily about guaranteeing that your pixels stay exactly as you made them (incredibly important when you just spent hours producing an illustration or cleaning small details of an image in Paint Shop Pro or Photoshop or the like) and secondarily about making that perfect image as small as possible. PNG's compression really works best for simple images like text or line art when there are large portions of the image that are the exact same color or when there are linear gradients used where all the rows or columns the entire breadth of the image change in exactly the same way.
By contrast, JPG is able to compress filesizes much more because it is throwing out all sorts of data each time you save. Simply by opening a JPG in an image editor and telling the program to save it (recompress it) you will be making it worse than it just was, even if you did not edit it in any way. You could spend a day doing nothing but opening a JPG and then saving it again. Each time it would become worse than the last time - losing colors, losing detail, becoming increasingly blurry and more filled with static and aliased edges with each subsequent save. The JPG quality setting really only changes how fast you are corrupting your image. If you repeatedly save a JPG at 80% quality, the first time will be 80% of the original image, but the second save will only be 80% of 80% of the original image quality and so on.
In your case it may not matter too much since you are simply 1) receiving an original image from your user, 2) compressing and throwing away tons of detail by resizing it to the absurdly small 1024 pixels in the largest dimension, and 3) recompressing each tile of that now-tiny version of the original image given to you. This means you are really only losing quality due to JPG compression twice and due to reducing the resolution once.
Aseem's suggestion to limit the viewer's proximity to the pixels is spot-on, but I just can't believe that you're really resizing these images to a maximum of 1024 pixels wide|high and then trying to make a deep zoom image out of the result. You're not giving people any room to zoom in at all. If they took the time to upload the full photo to you, you should have the guts to convert the full resolution to the deep zoom image. I'm sure that you're thinking, "That will drive my bandwidth costs through the roof! There's no way I'm doing that, Nate. Go run your own server and I'll run mine!". Well, fair enough. I will say this, though; Have you considered that when you convert a file to a DZI, there is almost no chance that any appreciable percent of your users will ever download the entire deep zoom image pyramid? This means that your server will only ever serve up small chunks of each DZI so that even if I came along and uploaded a 21 megapixel horizontally oriented photo to your service and when you converted it to a DZI (without resizing it to 1024 pixels wide first) it resulted in a 10MB DZI (I'm making up numbers here), I think that upwards of 90% of your visitors would only download perhaps 10% out of the entire DZI and that's only if it were an exceptionally interesting photo. Hosting DZI's is a different beast altogether than hosting other sorts of files where the entire file must be loaded before the user can view it at all. It's true that 1MB for a single image is a lot of bandwidth per image, but you must remember that the longer a person is intrigued by zooming around one image, the less time they are also spending using bandwidth on other images, meaning that it should be roughly the same bandwidth per time spent on your site as usual. You will have a few users who go crazy and want to zoom down as far as they can and pan around every last detail of each image that they like but I think that the average person gets tired of this very quickly. Very soon, even though they like that all the detail is available to them, they will start to zoom down onto the one or two details in a photo that matter to them and then move on to the next one. Having all the images available in high quality means that they can come back any time and quickly look at a different part if they want to, but you will find that people will manage their time so that they can accomplish what they set out to accomplish effectively.
Perhaps it is more of an issue of "I have a limited amount of server space." than "I don't want my bandwidth to go up.". In that case I can only say that offering zoomable images that you can barely zoom into at all does not make sense to me as a user, especially if I uploaded a good high-quality image to your site.
That's enough from me, then.
All the best to you, tgakk.
P.S. Aseem, is there an option with Seajax and Deep Zoom to cache tiles on the user's machine? I know that the Photosynth team opted to not go this route (much to my dismay) but I thought that surely you guys would give the host an option of whether to do this or not. -
Excellent points!
As for caching, both Seadragon Ajax and Silverlight Deep Zoom defer all network logic, including caching, to the OS/browser networking stack. So tiles are cached just as any other internet resources are cached. We don't explicitly do anything special here. -
Understood. I was slightly puzzled when the Photosynth switched to the Silverlight 2 viewer and appeared to use some caching when the Direct3D viewer had done anything but. Unfortunately (sorry for wandering into Photosynth territory here) it seems that Deep Zoom doesn't play well with Kit3D or whatever is being used for the polygonal projections and more often than not, I see images load in at, say, 40-60 percent quality, desolve to 0-5 percent quality, and thereafter resolve to the full 100 percent for the current zoom level. Any thoughts on why that is? It's very against the grain of Seadragon to have images desolve and then resolve. So much for buttery smooth in that case. =[
That said, it's only when projected onto a 3D surface in Silverlight that I've seen it act this way. Normal 2D Deep Zoom apps are their normal friendly selves. I'm curious why that might be.
Perhaps the issue will disappear when the Silverlight 3 viewer is released.
EDIT: I remembered a theory I had before about having flipped into Grid Mode in Photosynth before and then gone back to 3D. Perhaps due to the browser's caching with Silverlight, when first navigating to a photo in 3D Mode, the first thing displayed is the tiles cached from having viewed it onscreen at a small size in grid mode and thereafter the normal Seadragon loading process kicks in, moving from lowest to highest grain detail.
David Gedye had told me some time ago that the results of caching tiles might have results that weren't what I expected or wanted. I wondered what he meant and now I wonder if this is it. At the time I simply thought that perhaps performance would begin to degrade as the tile cache grew out of control.
Why would it be the case that if the tile is cached on my hard drive in my temporary internet files it would be called by the viewer in an order different to normal resolving? It seems like it would still begin with a call to the servers for the lowest detail tiles and move up through the hierarchy, grabbing cached tiles faster than those from the server at the appropriate point in time.
Hmm... -
Hey Nathanael,
Sorry for the delay in responding to your question!
The effect you see in Photosynth actually has nothing to do with caching, but rather a technical implementation detail: instead of using just one <MultiScaleImage> control for the entire collection (i.e. setting its Source to a DZC file and using its SubImages property), they need to use a separate <MultiScaleImage> control for each image in the collection (i.e. pointing each one to a DZI file), so that they can individually arrange each image in a 3D scene.
The problem is that multiple <MultiScaleImage> controls (a) don't share resources currently and (b) can't use the DZC thumbnail tiles. This means a lot more network requests have to be made, and unlike the normal DZC case, fetching a low-res tile for one image doesn't also get you the low-res tiles for any other images in the same collection.
We refer to this internally as the "multi-MSI problem". Hopefully we're able to fix this in a future version of Silverlight!
P.S. The reason it looks good in grid mode is because that mode does use a single <MultiScaleImage> for the collection, since no 3D tricks need to be done. -
One last question and then I'm done taking this topic off course:
Is the multi-MSI problem specific to the Deep Zoom implementation of Seadragon, then (ah... disregarding Seajax and Seadragon Mobile)? That is to say, was it an issue in the Direct3D Photosynth viewer or iterations of the original OpenGL Seadragon client?
If I'm reading you right, then no, it's pre-3D-Silverlight specific. True? -
It is specific to the implementation inside Silverlight.
Loading Profile...




EMPLOYEE
