I've read the book Retinafy Me. This basically says double the size of images. When it is then displayed on a retina screen at half the image size it will look great.
My problem is that the original images I have can't be doubled in size. i.e. the images are 750px wide. They are to be displayed 500px wide. What do I do? Is a x1.5 image better looking that a x1 image (on a retina screen) or is it just needlessly adding to the file size?
I've tried using the x1.5 images (750px scaled down to 500px) and the images looked good on a retina screen in the Apple store where I checked them out. But I couldn't do a definative comparison, I don't have a retina screen of my own and I can't find any info about it anywhere.
A pixel is still a pixel on a retina screen. The difference is simply that a retina screen uses 4 pixels to display one, if they have no additional information such as more pixels. This is why the suggestion is to double the image size.
Essentially your image will be rendered by stretching it to 1000px wide. When stretched, a 750px wide image will still look better than a 500px wide image. You can try this for yourself in Paint.
There is a pretty good explanation of how it works on http://crypt.codemancers.com/posts/2013-11-03-image-rendering-on-hd-screens/
Hope this helps.
Related
I have an image that is 320 x 482 pixels size and 72 PPI. I can change the image resolution with GIMP for example, but why would I use it if the images suits its pixel size for each display pixel size? I mean, an image changes its size in inches depending on the display density, right? So why would I want to change the PPI of an image, that doesn't make sense to me, although I understand that GIMP and any other image editors wouldn't put this feature for nothing.
PS: I tried to change the resolution of some images and compare it with the original image and apparently nothing happened but the size in inch of the image.
An image's DPI is defined by the capturing hardware and will impact it's size when printed out.
Changing the resolution won't change the number of pixels in the image.
My app is forced to Portrait mode. I am using landscape images as clickable buttons in various locations. But I am having a hard time figuring out the best width/height ratio for the images so that no matter the smartphone screen size the image will retain a good ratio.
I need the images wide enough so that it will fill the full width of the screen but also with proper ratio that if it needs to shrink to fit the screen width that the height will adjust proportionately.
I have been toying with 480 x 120 (4 to 1 ratio) but I am noticing on screens of 360 width the image height should be 90 but the height is actually coming out as 82 - cause the image to be skewed. Also, on some devices like iPads, 480 isn't wide enough so I am forcing the image to width:100% of the container div and then that skews the image as well.
I have done reading on this in multiple places but there seems to be no consensus or best practice that I can find.
CSS3 Hero Image question:
Whats the best pixel dimension and Image Size for a full screen responsive background?
Whenever I use the cover property, it always seems to miss out most the image.
Thanks,
Steve
Used photoshop to crop the image to a 16:9 ratio, 1920 x 1080 pixel dimension for best image quality. Seems to work well with my website, hopefully the file size (507kb) won't be an issue on page loading response times.
Also, consider running your images through a compressor, which can greatly reduce their file size.
https://compressor.io
my plan is implementing an image in a Matlab GUIDE figure. Somehow the output is always blurred (see screenshot). On the left you can see the image in Photoshop on the right in Matlab - notice how the font and other parts become blurred.
I experimented with JPEG and PNG file formats (no compression), I also tried various pixel sizes(resolutions smaller, same and bigger as the actual position of the image) and DPI(values between 30-300) settings, because I expected some scaling issue. Somehow I am stuck - Looking forward to your input!
Thank you,
Florian
Screenshot of the issue: http://s1.bild.me/bilder/260513/6875414Screen_Shot_2014-06-29_at_23.19.34.png
Most probably the reason for the blur is interpolation.
If the axis size you allocated for the image is different from the size of the image MATLAB will resize the image to occupy the whole area.
In order to prevent any interpolation you must set the axis dimension to be the image dimension.
I'm using the custom UI editor to upload images to a custom ribbon tab. I need the images to look like this:
but currently they are looking like this:
These images are directly from Microsoft shapes. I tried saving them the shapes directly but they were really messy. There must be a way to get the shapes perfect as per the first image - I'm just not sure how.
Any help would be appreciated.
Your images need to be saved in exactly 16x16 pixel size. Anything else, and they will be scaled to fit a 16x16 area, and thus have fuzzy lines.
Your top image (the rectangle) measures 16 pixels wide by 10 pixels tall. If that is the extent of that image, then when you import it, it will get stretched. You need to also include the white (or empty) space around the image (in this case, above and below) when you create the image.
The example above shows the exact same 16x10 px rectangle, in two different formats. The top image included the white space above and below the rectangle and was saved as a 16x16 px image. The bottom image only had the 16x10 px rectangle and was saved as a 16x10 px image, so it was stretched by the UI editor to fit the 16x16 available space.