Android Development help please.
Can somone tell me how I might increase the quality of background images in my app? I have been using Photoshop where the images look great, then I save for the web as a png...then add it to my app... Then on the phone the image looks a little blurred.
Whats the best way to increase my image quality?
I would make sure you're saving it at an adequate resolution. I'm will to bet that "save for web" reduces the resolution to 72 dpi which may not be enough for an android handset. In photoshop, try bumping the resolution of the final png to something like 300 dpi and see if that makes a difference. From there you can experiment with different resolutions to figure out what's the smallest value you can use and still have a crisp image. Alternatively, you could just look for the documented resolution requirements.
The apparent quality of your images may also depend in the type of device you are displaying the images on. For example, if your image is saved as 72px x 72px in your image editor, then displayed with a size defined using 72 scaled pixels (sp) in android on a high pixel-density device, then the OS will stretch the image before display. As such, the pixel density of the display device can affect the apparent image quality.
You can provide different resolution images for different pixel densities by using the hdpi, mdpi and ldpi folders for drawables. See these links for more info:
Screens support
Icon design
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.
I've read a lot of different posts and articles about how screen sizes are determined and it's pretty confusing to say the least so I thought I'd just ask!
Here are the facts:
I have developed an app that has a big logo on the login screen. This logo is 958x496 and is 30.6KB. It's a real nice big sharp looking image!
I have four development phones that each use different drawable sizes ranging from hdpi to xxxhdpi.
I currently have a dawable-nodpi folder that has the logo in and every phone uses it but I feel like this isn't the 'proper' way to do it so I'm trying to have different sized images for each phone.
So, I want to use this full 958x496 image as the baseline for the xxxhdpi drawable and I will scale them down accordingly using the 3:4:6:8:12:16 scaling ratio (meaning the full image will be my '16').
As it currently stands if I do that, for the hdpi phone I get an image that is 354x183 as its roughly 37% of full size. I run up the app and yes the logo looks great but here is the question.. if I use drawable-nodpi instead it will use the full 958x496 image and it looks better so why should I downsize my image when it will look slightly blurry? Why not just use the best possible version of the image? I thought this was because I wouldn't get the benefits of the high quality image on the lesser phone, but you can definitely tell a difference.
Various web graphics I've created are blurred on high resolution smart phone screens, unlike desktops screens.
Do I need to:
double the image size and programmatically resize it to half
increase the resolution (e.g. 72 to 300).
My understanding is that the latter only affects print rather than digital screens.
Are others experiencing this issue and if so, what it is the recommended work-around?
Your assumptions are correct. You need to double the image size, maybe even a little more if you wanted to get picky as some screen resolutions have 3x or more pixel density than a desktop monitor. Double works pretty well though so I would start there.
Resolution, as in DPI, won't do anything for web graphics on screens besides make the image resource's filesize larger than it needs to be. You could have a resolution of 5 DPI and they would look the same as 300 DPI on a screen. The main issue with lowering DPI for web graphics is when a user wants to print your page, then any images with really low DPI would be very pixelated.
Depending on the graphics you've created you have some options besides your standard image formats. You can use SVG or create your own icon font. Both are vector images so they will look sharp on any device that supports them. Icon fonts are widely supported and SVG is decent but might need a small shim depending on what you need to do.
Double image size.
You should even render image (simple or doubled), depending on the device/viewport resolution.
increasing resolution is quite a complicated matter. Print/digital/dpi/ppi; it could work on a bunch of devices but not all.
Hi Guys And Ladies and the Others,
I develop a project. It have a lot of images. And it just run on 4.0 and above device. So If I resize all of images to xxhdpi, xhdpi blabla, the size of application became very huge. If Am I just create 72x72 (hdpi size), is it just enough ? Or do you suggest anything else ?
Thanks a lot for the answer..
The proper way to do it is to have different bitmaps for each density. This is because high density images are ideally not just high resolution copies: they're custom designed with more detail in. Also, low density devices tend to be underpowered, and so have a hard time scaling down high resolution images.
It does depend on your application and your needs, though. You might find that your application runs at a decent speed, and looks OK, with just one image of each type.
Something else you should consider is whether you can use vector graphics for some of it, or a ninepatch, which will scale automatically.
Lower quality images end up getting stretched on higher resolution screens, which can look pixelated. If you need to cut down on images, there are a number of approaches that I would suggest:
Consider the format. If you need a rasterized image, does it need to be a PNG rather than a compressed JPEG image, for example? Can you get away with using an SVG (which would allow you to support all sizes and resolutions using a single image asset)?
For rasterized images, consider whether you can tune the compression ratio.
Try supporting the highest resolution, and then skip a few resolutions in between and provide some lower resolution images for lower resolutions where details appear lossy or where you seem to be getting a performance hit from downscaling the high resolution image (that is, xxhdpi will probably be fine on xhdpi and hdpi, but then you will likely want to provide separate mdpi and ldpi images).
Which is the correct sizes of background images for the different densities ldpi, mdpi, hdpi, xhdpi, xxhdpi?
I have transparent background images (.png) and want to reduce image size as much as possible. (not concerning the .apk size, but concerning memory issues on lesser powerful devices)
I assume, the first thing is to make sure the images are in the correct sizes, so that they do not need to be scaled. However, I don't know how the densities relate to certain screen resolutions (if any).
What other options are available to reduce image size . I am using GIMP to create the background images. Which settings should I use in GIMP?
Any recommendations?
EDIT:
Should a device with a 800 x 480 pixel screen use a background image of 800 x 480 pixel?
Android would not have to scale it, but on the other hand, the image would require a significant amount of memory?
What would be the best resolution?
And how do I know which devices have which screen size?
I.e. the SGS GT-I9000 has 800 x 480, but is a ldpi device (only 233 dpi).
The only solution I know for this is using 9-patch. Of course, it puts a restriction on the nature of the background you are using but in most cases it solves the problem.
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch