I have many small icons in my website. Instead of loading all of them independently, I am thinking of using CSS sprites due to performance gain.
Consider the following code
<div style="width: 24px; height: 24px;background: url('img.png') -10px -10px;"></div>
vs
<img src="css-sprites.png" style="width: 24px;height: 24px;">
As expected, both gives same result. When loading as an image (second case), if I keep resolution of actual image a higher value, say 128*128, and using 24*24 for display, I am getting better resolution even when we zoom the page in browser (tested in mozilla).
But when using css sprites, since I have to keep the same display resolution in the sprite, the image gets blurred when zooming.
Is this expected behavior or am i doing something wrong? Is there any way to overcome this issue when using css sprites?
I do not have much experience with html and first time going to use css sprites. Please help.
Edit: also, many posts I could see in internet about cross-browser issues while zooming. Is this some point of concern even now?
If your sprite size is 200x200 px, and you want to get better resolution by zooming - make you background-size: 100px 100px;. So if you will zoom to 200% - the quality of you image will still be good. Obviously, your sprite image should be twice bigger the size you are going to use on your website. To avoid problems - do not mix % and px or any other different units in one background-size. Use only px in your case and everything will work just fine.
Summarizing. Make sprite twice bigger, set background-size twice smaller the size of sprite image. Tested it in Chrome and FF. Works fine on zooming.
If you are familiar with svg files - try to do your own vector font (for icons) using http://fontastic.me/. No scaling issues will disturb you. You can set size by font-size and make them any color by color in CSS, like a text.
Related
So I just created a blog on Blogspot. And I'm currently using a simple free blog template from the internet.
You can refer my blog here - https://hariinisayarasa.blogspot.com
Im using the free template from here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
As you can see, you can compare the slider image on my blog is blurry and pixelated compared to the one on the Demo Page here - https://sylva-way2themes.blogspot.com/
Is there any way I can resize my image or any setting that can be done in my template coding so that the slider images are not blurry anymore?
Please let me know if I can provide any code for you so that you can help me solve this problem.
Or you can download the code here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element.
Resizing img with HTML
<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg"
width="400"
height="500" />
Resizing img with CSS
img { width: 400px, height: 300px}
From what I've seen, you're using very small raster images.
notice the 'intrinsic size' property
same goes here
Photographs are always saved as raster images. It means that the data of an image is stored in the form of a pixel map - a matrix of squares. If you try to scale the image up, every pixel is also scaled up. Therefore, you lose quality, and the pictures seem pixelated/blurry.
There's no way to keep both the size and detail. Alternatively, you could try to keep the initial size of an image (or at least scale down) - this would, on the other hand, not fill the entire container space.
now check the intrinsic size of one of the images on the demo page
The more scaled image is, the more blurry it gets. The pictures on the demo page have the scale aspect of 2. However, your photo that is 72 x 72px has been scaled up a lot more.
If those photos have been taken by you in higher quality, you might want to use the raw version.
I would like to find out how to present a banner or logo on a responsive design but I can't find a question that is not flagged as bad or likely to be closed. I've tried numerous ways of phrasing the question and none of them are liked. So, I have no idea how to even present this question or even where to begin to look for the answer or how to ask the question. PLEASE, PLEASE give me an idea of how to word this so someone will see my question. I've tried web searches but nothing addresses the issue and I cannot even figure out how to work it.
In case someone sees this, what I am doing is taking a site that was not responsive and had a banner that was 1100 px wide by 110px in height. The trend seems to be to move away from such banners and use logos that are square or round instead or to use text for branding. If I just reduced the size of the banner to 500px wide then the height would proportionally decrease to only 40 or 50px if a percent value was used. That clearly won't look good on a small screen.
Also, if I reduced the image to a more square dimension the image isn't actually resizing by percent values when the CSS background-image style is used instead of an img tag surrounded by div tags. I haven't found a way to control alignment and size using percent values on the background-image property of a container. I could tell my client that we shouldn't use a wide banner in a responsive design but I don't know if that means I am missing an option.
A different image seems to be required on smaller displays using media queries. Can alignment and resizing as percent values be used with the background image CSS style or should different images be served using the img tag?
Lastly, on a high pixel density display tablet or even smartphone serve a large image due to the number of pixels wide being greater than 900px or 1000px? With high-density displays, it seems that even a smartphone could have a width greater than 1000px but that may not look right.
this will size it:
.img-class {
background-image: url('path/myImage.png');
background-size: 200px 200px;
}
first value is width, second value is height, you can also use %, or to scale the whole thing use a single value like for example: background-size: 80%;
A different image seems to be required on smaller displays using media
queries. Can alignment and resizing as percent values be used with the
background image CSS style or should different images be served using
the img tag?
Yes as long as you scale it down and not up, or it blurs out.
Lastly, on a high pixel density display tablet or even smartphone
serve a large image due to the number of pixels wide being greater
than 900px or 1000px? With high-density displays, it seems that even a
smartphone could have a width greater than 1000px but that may not
look right.
Just be sure your images are 'retina ready' and that's all, meaning if you want to place on your website a 200x200 px image, create it 400x400 px instead, then using css you force it to always be 200x200, so it will read a 400x400 and resize it to 200x200 making it not blurred on mobile.
Side note: If you have graphic images and not photographs, i recommend you using svg (vector images) now supported on all browsers, that are scalable so retina ready by default let's say, and way smaller in size.
I have a WordPress site, which has an issue with the logo.
If you'll view it on a desktop(not retina),
it will be blurred after load BUT after scaling-up and scaling back its appearance becomes normal.
The source image height is 100, and height is 50, so why does it gets blurred?
I believe it is the original image resolution that create this.
Optimising your picture for the actual size would solve your problem I believe or setting the custom CSS to the following (with the current image size):
.nm-header-logo img {
height: 51px;
}
When an image is bigger than what you set it for 50px the browser shrinks the images to that size. In a lot of cases the result is not good and it may even be worse in some browsers (e.g. Chrome). You end up with blurry or jagged edges. Since you still need retina support you should try using 2 images, a smaller one that has 50px height that will load for non retina and one for retina which is twice as big. You have to modify the code for that:
You can use this method here.
E.g.
<img srcset="logo-twice-as-big.jpg 2x"
src="logo-normal-size.jpg" alt="Logo">
Try adding this property to your image.
.nm-header-logo img {
image-rendering: pixelated;
}
The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions.
The possible values are : auto | crisp-edges | pixelated
pixelated: as the image changes size the browser will preserve its pixelated style by using nearest-neighbour scaling. This value only applies to images that are scaled up.
This is my use case:
I have a web page with a responsive design. The page is vertically split in two halves, on the right hand side I want to show an image (a PDF page rendered as PNG or JPG). The size of the image should change as soon as the window is resized.
I thought I already solved this. I render the image on the server to be big enough for the biggest possible window size (according to our company setup). Chrome and Firefox scale down (and interpolate) the image just fine.
But then there is Internet Explorer 10: If the image size is scaled down to anything beneath 100% it looks like a million flies randomly covering the image ... I cannot seem to find a solution for this.
I learned that in the ol' days (IE7) there used to be a CSS rule for this called -ms-interpolation-mode that could be set to bicubic. But this has been declared obsolete and is not available in IE9+
Do I have to accept it like that? How can this setting be called obsolete if there is no interpolation for scaled images in IE9+? Is there any solution for this?
I know: Usually you don't let your browser scale your images. But do you have a better solution for this use case?
EDIT: I should have mentioned that the images in question are black text on white background. The effect is better visible when using thin lined fonts in the image.
EDIT2: Please recheck the fiddle (http://jsfiddle.net/7grxut1t/16/) before you close this thread. If you resize to a very small size in Chrome and IE you will see the difference!
The relevant part of my code
<div>
<img src="http://websocket.bplaced.net/test.png"/>
</div>
CSS:
div {
position: relative;
width: 50%;
height: 100%;
}
img {
width: 100%;
}
Ok, I found a quite dirty, yet applicable workaround
The angular service from https://gist.github.com/fisch0920/37bac5e741eaec60e983 uses the canvas element to interpolate the image on-the-fly. It works for me in IE10 (I am not sure about IE9- though).
Its method imageService.resizeStep is amazingly fast in IE ... it renders noticeably faster than the native Firefox image interpolation rendering.
I don't really like it, but it works and it doesn't even slow down the user's workflow.
I've read all over the Internet that I should not define fonts (or anything) with absolute pixel height/width/size and instead, use EM ... so that on higher resolution displays, my web site can scale appropriately.
However, what do I use to define IMAGE height/width ... because images won't scale well (they look pixelated)
UPDATE:
To clarify, I'm not referring to page zoom. I'm referring to how to make my web application resolution independent so that it will look correct on higher DPI displays.
I know this question is a bit old, but want to put this out there for anybody who may come along later. When talking about mobile devices which have higher pixel densities, the mobile browsers will zoom the page in by an amount to make it appear as though the web page is not very small. Devices implement this zooming as per the CSS 2.1 specification.
For example, many devices today have a 1.5x pixel density ratio compared to desktop monitors. As a result, the mobile browser will zoom websites by about 150% to compensate for the extra pixels. The new retina display has a 2x pixel density ratio... and as such the browser zooms in websites by about 200%.
Point of the matter - developers should not have to worry about different resolution devices. If you wish for your images to show up clearly on high resolution devices, you will need a higher resolution image. You generally don't have to worry about 1.5x devices as the quality difference is negligible and not worth the effort. However, the new retina display causes some really blurry images, and as a result you should use 2x the image.
So for the following image, you would want to export a 600x400px image in order for the image to show up clearly on the new retina display:
<img src="photo.jpg" style="width:300px; height:200px" />
Font sizes should be set in em (or %) because if the user changes the text size in IE (View > Text Size), text set in px (or have a fixed size somewhere up the inheritance chain) won't be resized. (Other browsers have no problem resizing text set in px.) See How to size text using ems for more on this.
Images with px dimensions are not resized when the user changes text size; images with em dimensions are resized. So if an image's size should be relative to the text size (a rare case), then use em. Otherwise px dimensions is fine.
For page zoom (where the browser makes everything larger or smaller), it doesn't matter if dimensions (text or image) are defined using em or px.
Normally, I use em for most elements and exact pixels for images. Your images will not scale with everything else when the text size is adjusted, so you need to review how the page looks at different text sizes and adapt when required, but I find this a reasonable compromise (versus scaling the images that is).
Using em when resizing the text in IE, it becomes larger than it should when made larger, and smaller than it should when made smaller.
The solution that works in all browsers, is to set a default font-size in percent for the body element:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
http://w3schools.com/css/css_font.asp
You can find a perfect example of image styling using px with source code here: http://w3schools.com/css/css_image_gallery.asp. The images scales perfectly with the text increasing or decreasing it.
see the solution of this page
http://nickcowie.com/2005/elastic-images/
HTML
<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>
CSS
.widecolumn .imageholder {
width:51.5em;}
.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}
It's not really possible to make a page resolution-independent when it comes to images.
You can use SVG for images, because vector graphics truly are indepent of DPI, but this won't work well for photos.
You can use high-resolution images and display them at smaller size. This way, when sized up, they look a lot better. On some browsers, the downscaled image won't look too bad.
This is an example page, http://www.cssplay.co.uk/menu/em_images it has high-res images that are sized with ems. On Opera with page zoom, the high res images retain their clarity at higher zoom levels.
For retina devices you can also have a second image twice the size and add #2x to the file name...
so if you have a 200px x 300px image called image.jpg you just put in another one that's 400px x 600px and name it image#2x.jpg and retina devices will display that instead.