I'm writing a windows store app, which uses a zoomable/pannable div to show a large image and allow a user to locate specific sections within the image.
Through this work I've been provided an (admittedly huge) image (from a design house) which does not render when set as the img.src (loaded via a blob from a storage file object). It just shows a plain white screen where the image should be.
The image in question is > 35000 pixels wide and about 11000 high.
I've established that re-saving the image (as large as Fireworks would let me!) with a 10000 pixel width renders as expected.
I'd like to go back to the design guys and let them know the maximum size that the app will support, but I can't find this information anywhere.
Does anyone have any ideas as to the limits here?
Related
For each record, I have two images, small and large size. What is the best way to show an image size according to the size of the screen?
I know I can use css and mediaquery and show the small or large image using a div display none / block, but in this way, I understand that the user has downloaded both images even if they are not displayed, is that correct? Then, the page load increases. If so, what is the best option to do this?
For this problem the most efficient way is using the User-Agent to detect if a client is desktop, tablet or mobile.
I prefer to use Mobile_Detect or jenssegers/agent (based on Mobile_Detect).
Edit
Recently I installed the Google Pagespeed Module on my server. There is a filter, resize_rendered_image_dimensions, that returns images with sizes of the current client view (exactly what you are looking for).
Some other implementation would be lazyloading with Javascript and adding dimensions to the requested url depending on the viewport sizes.
Im trying to achieve something like this. These were recorded from some sites I came across. Im talking about how it uploads images almost instant, not about template.
I used a 3.5 mb image.
https://www.youtube.com/watch?v=cnGsJuyWs9s
So far I've managed to achieve this by copy/pasting codes:
http://adspottest.cf/simple-thumbnails.html
I don't have lot of knowledge in these things. I managed to do this with the knowledge I picked up here and there.
My questions are:
When scaling is on, if I upload several big images at once (like 2mb, 3mb), some images don't generate the preview correctly.
When scaling is off, above error doesn't occur. But it doesn't upload image almost instantly. Is it possible to turn scaling off AND upload the images instantly?
Im trying to get this work for a classified site. In this site the placeholder for image is a fixed one (640 x 480).
As you can see I have set scaling.sizes: maxSize option to 640
If I upload a 5500 x 3010 image; it will be scaled to 640 x 350. This is OK as it doesn't go over the website placeholder max width.
But if I upload a 3010 x 5500 image; it will be scaled to 350 x 640. That means it goes over the placeholder max height. I need it to be scaled to 263 x 480.
So is it possible to set max width AND height?
Thanks
Not sure I understand what you mean by "upload images instantly". Files are always uploaded as quickly as your network connection allows. Also, there are no known issues with the latest version of Fine Uploader regarding image preview generation. This is a stable feature that hasn't changed much in some time. If you are able to reproduce what you believe to be a bug, submit a bug report with all of your code and detailed reproduction steps in the project's issue tracker at https://github.com/FineUploader/fine-uploader/issues/new.
Regarding your final question, all images will be scaled proportionately, taking aspect ratio into account. As a result, you are asked to provide the largest length or width. Which you provide is not significant - you should simply provide the largest size of any side and Finr Uploader will scale it appropriately. There is no feature that allows you to specify both a max width and height. Please file a feature request if you'd like to see this in a future version.
I'm creating a magazine to read on an iPad and am having problems with creating readable pages. What size (DPI and MB) should my files be? And I'm doing an export from InDesign, are there any suggested steps that should be taken here?
The iPad display is at 132 PPI.
The iPad display is 1024 x 768 - I'd recommend making your images that size.
That's right, the image size for iPad is by default 1024x768, but I recommend you to create your file in 1152x1536 px if you want to zoom-in in your image on iPad end keep a good quality of display.
Are you creating a pdf of the entire document or saving the pages as images? You may also want to consider the way users will be accessing the document (online, each page downloaded or as an application) If it is an application you will be able to have larger page sizes. If online, then download size will definitely become a factor in how it looks. If you shrink the quality too much, your rendered text will be the first thing on the page to suffer.
Have you done any research into what you find a comfortable to read text size (i.e., with popular science, wired, or project magazines? Another one to check is digital2.0 or the first of the RAW applications which was put out) These magazine apps use scrolling text regions in a lot of cases, but you can at least see how they use fonts and how comfortable they will be at different sizes.
Windows phone asks for specific image sizes when submitting an application. When I take the image I wanna use and resize it to the dimensiond they want it distorts the image. If I keep it proportional Ill never get the exact sizes they need. What do you guys do to resolve this?
I used Photoshop. Open the image, choose "Image" > "Canvas Size". That will adjust the size of the image without distorting it. I am sure you can also use any of the free image applications like gimp http://www.gimp.org/
We would like to display very large (50mb plus) images in Internet Explorer. We would like to avoid compression as compression algorithms are not what CSI would have us believe that they are and the resulting files are too lossy.
As a result, we have come up with two options: Silverlight Deep Zoom or a Flash based solution (such as Zoomify). The issue is that both of these require conversion to a tiled output and/or conversion to a specific file type (Zoomify supports a single proprietary file type, PFF).
What we are wondering is if a solution exists which will allow us to view the image without a conversion before hand.
PS: I know that you can write an application to tile the images (as needed or after the load process) and output them; however, we would like to do this without chopping up the file.
The tiled approach really is the right way to do it.
Your users don't want to download a 50mb file before they can start viewing the image. You don't want to spend the bandwidth to serve 50 megs to every user who might only view a fraction of your image.
If you serve the whole file, users will eventually be able to load and view it, but it won't run smoothly for most of them.
There is no simple non-tiled way to serve just a portion of an image unless you want to use a server-side library like imagemagik or PIL to extract a specific subset of the image for each user. You probably don't want to do that because it will place a significant load on your server.
Alternatively, you might use something like google's map tool to provide zooming and scaling. Some comments on doing that are available here:
http://webtide.wordpress.com/2008/08/27/custom-google-maps/
Take a look at OpenSeadragon. To make a image can work with OpenSeadragon, you should generate a zoomable image format which mentioned here. Then follow starting guide here
The browser isn't going to smoothly load a 50 meg file; if you don't chop it up, there's no reasonable way to make it not lag.
If you dont want to tile, you could have the server open the file and render a screen sized view of the image for display in the browser at the particular zoom resolution requested. This way you arent sending 50 meg files across the line when someone only wants to get an overview of the image. That is, the browser requests a set of coordinates and an output size in pixels, the server opens the larger image and creates a smaller image that fits the desired view, and sends that back to the web browser.
As far as compression, you say its too lossy, but if thats what you are seeing you are probably using the wrong compression algorithm or setting for the type of image you have. The jpg format has quality settings to control lossiness, and PNG compression is lossless (the pixels you get after decompressing are the exact values you had prior to compression). So consider changing what you are using as compression, and dont just rely on the default settings in an image editor.