I have a transparent sprite PNG image - with 50% size for a Retina screen.
The weird thing is my PNG images on regular monitor have those little white line artifacts on them, which are especially visible in Chrome.
Here is a screenshot (it's a bit small, but hope you see it):
and zoomed to 400%
Retina screens are not different on size, they are different because of the pixel density. So making images 50% smaller, won't do the trick. You will need to assign background-size: 50% 50% instead.
This will make your browser render the image but 50% smaller. Since their size is actually bigger than the displayed size, the remaining pixels will be merged according to the pixel density of your screen.
If you are still doing this and the problem persists, then the problem is from the quality of your image itself.
Related
I have set up a background-image for large and medium screens.
I have a touchbar macbook and it fits perfectly.
If I play with the mouse to make the window smaller (to see how it would be for different resolutions and less pixels), it's completely responsive and looks fine (it cuts a bit the right part of the picture but it's not zooming).
Same when I open the developer tools, the Ipad pro version is half-cut but not zoomed.
But when I try to go on the website with an older macbook, the image is completely zoomed and does not fit the screen anymore.
I don't understand how there can be such a difference as we have different resolutions but same inches.. And as when I play with it on my computer, the image stays at the right size even with less pixels.
How can I solve this problem? Why is it doing this? I am fine if the image is a bit cut on the right or left side but I don't want it to be zoomed.
I have tried - height: auto, width: 100vw, background-size:contain (but it's too small) and no-repeat... basically everything with css
background-image: url(/assets/dessin-ba68b8b….png);
background-size: cover;
height: 100vh;
Thank you
When you use cover for background it is guaranteed that the same image will NOT look perfect on all screen sizes, since the browser needs to display it in different dimensions.
To handle this you may generate several images, each for screen size you aim at and use CSS media queries to apply the appropriate image for each screen size.
I recently noticed this strange behavior in Chrome when increasing and decreasing the size of the zoom and consequently an img.
It might be hard to tell at first but the image on the left is blurred vs the image on the right that is sharp. I took these screenshots from the same image, from the same webpage, in the same browser, at the same size.
The only difference being that, for the image on the right, I scaled my browser zoom up, then down, and took the screenshot before the image had time to 'blur'. The image on the left, is taken a second or two after the zoom in/out commands have finished, and the image gets blurred. As a side note, the same behavior happens when you increase or decrease the rendering size of the img by adjusting the width. I think it's important to note that the image is huge 1920px and being shrunk down to about 300px.
I prefer the look of a crisp image, vs a blurred one, even if it's at a smaller size. Why does the blurring happen, and is it possible to stop it?
I'm building a page which is supposed to be full retina ready. I'm creating a retina version of all the small-medium images.
It looks good when you look at the 100x100 pixel version of a 50x50 image on devices with high density screens. But what if the image is much larger? Like a background image of a slider with 1700x600 pixel dimensions, should this get a retina version as well? The image's size is already much bigger than almost every mobile device's resolution. Would a 1700x600 or a 3400x1200 image look different on a 640x960 display?
Don't forget about retina enabled laptops, and iPads... In my experience most images you can save at a scale of about 150% the expected viewing size, and they still look great on a high density screen. You should play with compression quality as well, a lot of times you can lower the quality and still have an image that looks great because of the shear amount of extra pixels.
See this for an example of what I'm talking about: http://filamentgroup.com/lab/rwd_img_compression/
I'm using this to set my background image.
body{
background: url('path_to_image');
background-size: 100%;
}
I'm happy with how background-size handles small differences in screen size.
I'm designing my background image in gimp to be a blue abstract image. What size would be good to handle the most common screen size ( in pixel width and height ), and what is a good image format to export it in?
Here is an example of one background image I tested with:
http://dooid.me/images/uploads/1334771136brentreader.gif
Most common screen size reported ( link here ) by browsers appears to be:
1366x768
1366x768 sounds good if that's the most common screen resolution these days. File type should be .jpg if your image has many gradients and subtle details, or .png (or .gif) if your image is mostly solid shapes with no anti-aliasing, such as pixel-art. Always keep in mind both the quality and the file size when exporting your image !
It's also good that you're using an abstract image for your background, as using background-size:100% can lead to stretching in unintended resolutions (which would look silly with more figurative pictures !).
I'm working on a responsive design that requires the header graphic to scale with the width of the viewport. I've gone for an svg thinking that this would scale well. (I test for svg support in the full site, and replace a gif with the svg).
In Firefox (13.0 on Windows 7) it's not antialiasing it at small sizes. It occassionally looks good at some sizes, and does if I fix the dimensions, but I want to avoid doing that.
Chrome and Safari do anti-alias the image, and it looks good.
I'm setting the background-size: 100% 100% to scale to the container, I've tried things like cover as well, but seems to make no difference.
I've tried adding image-rendering: optimizeQuality; as well, but this doesn't seem to have helped.
I've set up a test page at http://axminster.digital.linneydesign.com/svg/ - the top one is the background image, and the one beneath is exactly the same file, but added in the html directly as an img. Scaling the browser down to small sizes, you'll see the top one pixelate, but the bottom one will stay smooth.
Any thoughts on how I can smooth this background image without fixing its dimensions?
thanks.
Give the outer <svg> element in the svg file (sophie-conran.svg) a width and height of 100%.
What happens is that the svg image is rasterised at the width and height you give it i.e. 1000px x 350px and that bitmap is then converted to the required size. If you make the width and height percentages then the bitmap is created at final size and there's no bitmap scaling.
Update:
This is all moot with Firefox 24 and beyond though, you can do what you like and it will always work properly i.e. without pixellation.
The solution is to include the SVG as a tag, not as an external file.
Firefox will apply the anti-aliasing correctly.