I can reproduce this issue in both Chrome and Firefox.
This is SVG image in question:
https://www.iconfinder.com/icons/284101/editor_hambuger_list_menu_view_icon#size=512
And this is the minimum code which reproduces the problem:
<img
style="width: 15px; vertical-align: middle;"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMiAxMiIgd2lkdGg9IjIycHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzPjxwYXRoIGQ9Ik0wLjUwMDgzNjEzNCwwIEMwLjIyNDIzMTk3NSwwIDAsMC4yMTQwMzUwMzQgMCwwLjUwNDY4NDQ0OCBMMCwxLjQ5NTMxNTU1IEMwLDEuNzc0MDQ1MDggMC4yMTc3NDE3MjgsMiAwLjUwMDgzNjEzNCwyIEwyMS40OTkxNjM5LDIgQzIxLjc3NTc2OCwyIDIyLDEuNzg1OTY0OTcgMjIsMS40OTUzMTU1NSBMMjIsMC41MDQ2ODQ0NDggQzIyLDAuMjI1OTU0OTI0IDIxLjc4MjI1ODMsMCAyMS40OTkxNjM5LDAgTDAuNTAwODM2MTM0LDAgWiBNMC41MDA4MzYxMzQsNSBDMC4yMjQyMzE5NzUsNSAwLDUuMjE0MDM1MDMgMCw1LjUwNDY4NDQ1IEwwLDYuNDk1MzE1NTUgQzAsNi43NzQwNDUwOCAwLjIxNzc0MTcyOCw3IDAuNTAwODM2MTM0LDcgTDIxLjQ5OTE2MzksNyBDMjEuNzc1NzY4LDcgMjIsNi43ODU5NjQ5NyAyMiw2LjQ5NTMxNTU1IEwyMiw1LjUwNDY4NDQ1IEMyMiw1LjIyNTk1NDkyIDIxLjc4MjI1ODMsNSAyMS40OTkxNjM5LDUgTDAuNTAwODM2MTM0LDUgWiBNMC41MDA4MzYxMzQsMTAgQzAuMjI0MjMxOTc1LDEwIDAsMTAuMjE0MDM1IDAsMTAuNTA0Njg0NCBMMCwxMS40OTUzMTU2IEMwLDExLjc3NDA0NTEgMC4yMTc3NDE3MjgsMTIgMC41MDA4MzYxMzQsMTIgTDIxLjQ5OTE2MzksMTIgQzIxLjc3NTc2OCwxMiAyMiwxMS43ODU5NjUgMjIsMTEuNDk1MzE1NiBMMjIsMTAuNTA0Njg0NCBDMjIsMTAuMjI1OTU0OSAyMS43ODIyNTgzLDEwIDIxLjQ5OTE2MzksMTAgTDAuNTAwODM2MTM0LDEwIFoiIGlkPSJwYXRoLTEiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ibWl1IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgaWQ9ImVkaXRvcl9saXN0X3ZpZXdfaGFtYnVnZXJfbWVudV9nbHlwaCI+PHVzZSBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48dXNlIGZpbGw9Im5vbmUiIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L2c+PC9nPjwvc3ZnPg==" /> Menu
You can play with it and see it in action at:
http://jsfiddle.net/adamovic/s3dZ2/1/
Anyone has an idea why this Scalable Vector Graphics gets resize where lines becomes unproportional and also any idea how to fix this good?
BTW, in production I'm resizing this image to 1EM, to appear next to text "Menu" but to reproduce this issue it is the simplest way.
UPDATE: Updated example from 11.5px to 15px, reproducing same issue.
In production I'm using width: 1EM; or something like that for responsive design, any idea how to responsive scale this image so that lines are proportional?
Maybe some fix like min-width and max-width could work, but I couldn't make it work ever with some mozilla image specific commands.
At 11.5 pixels in with the height of the image should be 6.3 pixels. Of those, 1.1 pixels should be the height of each black line, and 1.5 pixels the height of each white line. And on top of that the browser resizes the picture to 6 pixels height.
If the image had 1 pixels for each line (both white and black) and the size multiple of 5, it would look great.
Later edit
In the given picture a black line is 16.67% of image size(all lines reprezent 50%) and a white line is 25%. So... for a height of 8 pixels the a black line has a height of 1.3 pixels and a a white line 2 pixels. On paper the smallest image that looks good and unaltered has 2 pixels for black line and 3 for the white line, meaning an image with 12 pixels height.
Basically if one pixel has to share both white and black lines the browser will create a shade of gray that is the average of the two as it can only display one color.
EX: a pixel has to show 0.67 white(#FFFFFF or 255,255,255) and 0.33(#000000 or 0,0,0) black:
0.67*255 + 0.33*0 = 170.85 (aproximatly 171) so the color displayed is (#ABABAB or 171,171,171)
Theoretically, SVG image is infinitely scalable. In practice however, the screen has limited resolutions, so if you scale an SVG too small, it won't look very good due to pixelations.
To avoid this problem, you need to set a minimum size for the icon at the point where it still looks good. High quality small-sized vector iconsets would usually be designed to have in such a way that their major lines lie in a grid of integer proportion for many different sizes, so that they will look crisp on different sizes; some icon designers might also provide a separately-drawn raster icons for low resolutions.
Inferring from the size declaration in the SVG, the icon you linked seems to have been designed for 22x12 or multiples of it.
On small sizes, you probably should also use media-queries so that small icons are scaled in a step-ladder of sizes with sizes that are known to look good rather than strictly depending on the viewport size.
Related
I was looking at codes(via inspector mode)for the at the Airbnb mobile app version.Screenshot with extra pixel indicated in red marker As shown in the screenshot, there are extra pixels added to the image, image header("Online Experiences"), and description ("Unique activities... hosts."). I'm not a coder, so maybe I'm not understanding it correctly. From the development perspective, could someone explain why the blue block is defined in such manner?
From UX/UI perspective, designers would usually define the padding(green blocks), but don't think these extra pixels (indicated in red marker) are defined by designers.
If you look at the margin of the blue box, then you can see, that it's centered and the margin on the right has the same size as on the left side. So the responsiveness of that div box is correct.
The "extra pixels" part I think is because the picture can't fit your screen and the picture's attributes are set to keep it's x-y side ratio, plus I think there is a min-height and a width: 100% attribute for that picture.
Ideally the picture can accomplish both min-height and width: 100% css rules, but since the width of the picture is relatively so big comparing to your screen's width, the browser can't accomplish the width: 100% rule and this is how you see the result.
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 apologize if this is not the correct community to ask, but I believe this has to do with HTML so I'm asking here.
I need a small banner with credit card icons (21px high).
I made it in PS and resized it to 21px height (auto width), but I wasn't satisfied with the sharpness.
I now load the full image in HTML and using height and width image tag attributes resize it to the same size I did in PS, but the result is much better.
1) Resized with HTML
2) Resized with PS
Chrome developer tool shows that both of the images are the same dimensions.
Why is there such a difference?
Browsers just display it as it would be 21px high, but higher dpi screens may use the full image to make it sharper. As in the screenshot you shared, both rows are actually ~90px high. Height doesn't actually resize the image itself, it just stretchs it to a smaller area.
Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.
From w3schools
I've noticed when using ruler tools from my browser extensions (I've tried multiple) that pixel specifications are typically short by 2 pixels. After noticing this on a site I'm working on, I tried a very simple html page with a div specified with a width and height of 200px and no border or padding. Measuring it out afterwards across multiple browsers and with various ruler tools, the actual rendered box both width and height is 2 pixels shy of my css.
So, curious why this is. What contributes to the "physical" size of the box, screen resolution perhaps? Not the end of the world if this is really how it is, seeing as how it seems to be a consistent thing.
EDIT
Per the comments and reply, my code, very simple:
<html>
<body>
<div style="width: 200px; height: 200px;background: red"></div>
</body>
</html>
And I'm measuring from outside-to-outside. Like here:
If the box you are drawing with your cursor starts inside the box you are measuring, it will be 2 pixels less than if the box you are using to measure starts outside the box you are measuring.
Here is a little graphic:
best is use reset css to ignore such issue
http://yuilibrary.com/yui/docs/cssreset/
I just measured the height of the box above with the (freeware) pixel ruler I wrote, A Ruler for Windows, and it measured just fine as 200 pixels.
I'm a little confused by your box inside the big red box, but the inside box measures a width of 50 if you count the burgundy boarder as part of what needs to be measured.
Of note, with A Ruler for Windows (when it is horizontal) the line on the left edge of the ruler counts as pixel one, and if the ruler is set to a length of (for example) 200, the line on the right edge of the ruler counts as pixel 200.
In other words if you are measuring something that is, for example 3 pixels wide, you would see the 1 pixel on the left to start the ruler, only one pixel in the middle, and finally one pixel on the right to end the ruler.
This is done in this way to allow the ruler to be moved to the two edges of your screen and to have those pixels on the edges counted.
Would it be possible that the two pixels you seem to be shy are the two 1 pixel widths on either end of the ruler?
ref: www.arulerforwindows.com
I'm chalking this up to browser weirdness. Taking screenshots of pages and comparing them in photoshop, they line up perfectly.
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.