The problem:
I want to use a WebView to enable dynamic loading of ads in my app. I'm currently running on a HDPI device, and images width a width of 480px are clipped/scrolled. If I use images with a size of 320px, they are zoomed in and rendered at too low a resolution.
The content of the loaded WebView url is a simple web page with just an image tag wrapped in a link, as well a simple head. I've tried playing with the viewport meta-tag, but without any luck.
Any suggestions?
Ok, I seem to have worked it out. It's all explained here: http://developer.android.com/reference/android/webkit/WebView.html, under the heading Building web pages to support different screen densities. Not sure if this section was there when I asked the question, but since my question has had a few views and no solution, I thought I'd post it here.
I had the same issue with a subway map image (1000px, also tried 3000 px width before) in a webview: when zooming, the image gets totally blurry, even though the original graphic is very sharp and uncompressed.
The only way I found is to split the images into multiple slices and put them back together via html table. This way, the sharpness remains when zooming.
Not sure, which device you're on, but there are i.e. some display issues in general with the Nexus One for example: http://www.displaymate.com/Nexus_One_ShootOut.htm
Related
Working on an Application that displays images in various sizes as grids, lists (Instagram like), images that take up the whole screen.
Ex. - you might have is a grid view image (not very big), but also this same image is shown in another screen that's almost the size of the entire screen. It's like a blown up version of this. There are also the smaller thumbnails of these images.
Working with the Backend team to come up with an optimal solution.
Questions:
What's the most optimal way to handle images for different screen sizes? I know instagram sends the URLs for high resolution low resolution and thumbnails.
Do we need multiple sizes for each image? example. grid view (do we need a 1x, 2x or 3x) for each image?. or can one size serve all phone screen sizes and we can just set the scale mode in code? Would this be ok even for smaller screen sizes? Would this be a poor experience for smaller phone sizes since they need images. To me this wouldn't be optimal since smaller phones like SE don't have the same processing power as iPhone 8 plus.
If we're using the same API to serve iPhone and Android - how can this api be leverage for android given that they have more image sizes to handle.
Any guidance would be greatly appreciate it.
PREMISE:
You are talking about images from web server. Not svgs, not interface
graphics. There's no official documents of this field, just
suppositions and results of experience. I'm sharing mine.
If you meant interface graphics, there are official documentations from Apple and Google. If you meant svgs, they're automatically scaled. If you intended to have answer for those, please edit the topic or open new ones
A solution could be, instead of acting only on images sizes, to change the quality of JPGs.
You can use a full quality ~200x~200 image for little thumbnails (avatars, photo icons), which could be ok for all devices sizes, resolutions and models, without being too heavy.
Then, for bigger previews/full image opened you could maintain the same size (the original one, or a maximum size you define) but, using two version of the image: one with little JPG quality (so that it can be loaded quickly, consume less bytes and show the image content) and the other with the original quality (which requires loading and bytes, but it's only shown by demand).
To choose the right value of the little thumbnail (the ~200px), check the bigger thumb size you have. If you have an avatar bubble which is 96x96 on smallest res, multiply it for 3 (96*3=288) and you have the size!
It is true that the smallest res screen will only require a 96x96 image, but, given that those are little numbers, the difference is not relevant (also, because we are talking about photos and not vectorial images, if you scale manually or if you leave the scaling to the device, the result is the same).
I've found some documentation from Google, which explains some things about image formats and how to reduce download sizes: https://developer.android.com/topic/performance/network-xfer.html
They say to use JPEGs, PNGs, or WebPs and show some examples and guidelines for choosing the right format
You can use svg resources(which is a vector-based-image) : By doing so, you don't need to generate a resource for each resolution, and just need 1 resource. In realtime, the svg image will expand to the resolution of the device.
According to the documentation, you have a lot to gain here :
Using vector drawables instead of bitmaps reduces the size of your APK
because the same file can be resized for different screen densities
without loss of image quality
I have used this in Android, and it solves your issue in Android.
I Haven't used this in iOS but, it looks like there's a similar solution as well.
Your all questions are nearly have same goal. So Basically save 6 versions of images like 50px 100px 200px 400px 800px and 1600px etc.
6 will be enough since you can cover nearly all screen sizes like google does in android. which is ldpi mdpi hdpi xhdpi xxhdpi and xxxhdpi
Use an API for picture requests, send your screen sizes to api as parameter then give back resulting images width and height. for ex: for a 800x600 screen send back 400px version of it.
If you not do so, you will have to resize them on client size which is bad for performance and also bad approach for auto layout in IOS.
You can use third party image managing solutions like Cloudinary.
https://cloudinary.com/
Cloudinary generates images of different aspect ratio which can be serve to all types of devices.
is there any method maybe using php (excluding js/jquery as i don't know how to use it) to get the users screensize and use it to make the css work with that
for example if i use percentages instead of pixels to set up my heights and widths it still doesn't respond to the screen size of my phone and the user has to zoom in to see the information clearly, it doesn't make it bigger, and by that i don't only mean text, images and html elements such as divs/spans/w.e....
also i don't want to use bootstrap, i want to understand how it works, using bootstrap is like driving an automatic car without knowing how to drive a manual...
One essential thing in web design for smaller devices is to include this in the header of all pages:
<meta name="viewport" content="width=device-width"; initial-scale="1.0" />
It deactivates the automatic "shrinking"/downzooming of the page content to the current viewport (= screen) size, which is important for smartphones and tablets. A pixel remains a pixel, so if your smartphone screen is only 320px wide, that's what's the width limit in absolute pixels.
If this isn't included, the built-in automatic just interprets the width of a non-responsive page as 100% and compresses it to the width of the device, which will result in tiny fonts and images, which you can see in every non-repsonsive website.
After that, you'll have to become friends with media queries...
There are some frameworks tha will help you get this kind of behavior. One of the easiest ones to use is Twitter Bootstrap. It is very easy to setup and understand. It uses a grid to determine the size of the elements in your page relative to the width of the device. Also, there are many prebuilt items that might help you getting started.
Another useful framework is foundation, the concept is very similar to twitter bootstrap. Altough it is more flexible it requires a bit more time to lear how to use it.
If you are going to do the adaptative functionality by yourself, or if you are interested in learning how this is actually done you should investigate media querys.
I'm loading external images from a url, which they are all the same resolution. However, the images that are below 100dpi do not appear. The rest are 100 dpi and they do appear.
I can't wrap my head around this dpi resolution concept, and why I can't use these images even though they are the same resolution at the others.
I've added two test images. Could someone try to add these images externally to imageViews? I want to see if you are able to display them.
http://bloggr.geespot.ca/offbroadway-poster.jpg
http://bloggr.geespot.ca/eppleworth.jpg
Well it looks like dpi was not the issue after all. The cause was probably the way it was encoded, which I'm not sure how it was done. But I ran it through photoshop and all is fine now.
I am building Javascript application for mobile browsers (not wrapped-as-native app).
I noticed that Android (tested 2.3 emulator and Galaxy S device) reduces the quality of loaded images if the image dimensions exceed certain threshold (width above 1400 px or so). This make it impossible to load big bitmap images (2000 x 2000 px) without the quality going unusable.
I tested this by
Loading one big image and drawing it on the - I got pixel garbage out. If I draw grid lines using lineTo() on they have perfect quality, so the bad must be in the image pixel data
Slicing the big image to 100 x 100 slices and drawing them to a canvas - this is the only method I found resulting no quality reduction. However, slicing is cumbersome, adds extra step to preprocess images and page loading times suffers
I tested tring to load image with new Image() object, tag and CSS background: everything suffers from the reduced quality, so I suspect the probelm is the image loader itself
I also tried everything with CSS image-rendering https://developer.mozilla.org/En/CSS/Image-rendering - no luck
Viewport tag seems to have no effect to the image loading - the data is already garbage when you try to touch the loaded pixel data. I tried all possible values suggested in Android's SDK documentation http://developer.android.com/reference/android/webkit/WebView.html
Tested also Firefox mobile, desktop browsers, iOS: everything is good there.
So, what is going on - Android WebView simply can't load big images?
(smiley of hung Android robot here)
Android unconditionally resamples images and reduces quality if a certain threshold of memory usage is exceeded.
https://android.googlesource.com/platform/external/webkit/+/android-3.2.4_r1/WebCore/platform/graphics/android/ImageSourceAndroid.cpp
There is no way to access the original image data in intact.
I posted a question regarding this to android-developers Google Group and kindly asking to maybe provide some kind of flag to opt-out from this behavior.
Meanwhile, if you are considering developing HTML5 web apps and you might use big images, you simply need to preprocess them on the server-side by slicing, send in smaller images to the device and then reconstuct the original image using or putting many tags inside a container element.
Another option would be load image "manually" by writing a PNG decoder which directly loads the image to , bypassing ImageSourceAndroid class.
The question is old so probably few things changed, but if you are having image quality issues with WebView then consider converting your image into PNG format.
Somehow when I load the jpeg version of the image the quality is low, while loading the png image with the same resolution the quality is high.
I'm developing a mobile web application and I have a home screen with a number of icons on it, so I tried to use a sprite to serve all the images in one swoop.
I noticed, however, that the iphone4 scaled the images in my sprite fairly well (they looked a little dithered), but on my HTC Evo the sprite rendered images look really blocky. I switched to standard images (background:(/image_url/) w/o background-position) and the image looked much better - see this , where the left image is served using the single image, and the ones to the right of it are served from the sprite (but are the same images in the sprite).
Is there a way to get the Android browser to interpret the sprites better?
You're hitting the maximum decoded image size barrier in the Android browser. This size limit was upped to something reasonable in 2.3. Try splitting up your sprites into smaller images.
This is just a guess but, which one are you using? Your operator or wifi connection? Some operators do compress images over certain size.