I am totally fresh to html language. In the image attached in the html, something we need to specify the width of the image by the following tag
<img width=350 src='/var/tmp.jpg'/>
So what is unit of the width here? I guess it is in pixel? If that's in pixel, does it mean that the size of the image actually relative to the resolution of the display? I open a webpage with a image shown in the width of 350 in different machine with different display of different resolution. I measure of the width of the image shown on the screen, they are the same. So is that any way to I figure out the absolute width of the image in cm or mm (in php)?
pixels. the answer must be 30 chars long. so I'm typing more.
you can't really work out the absolute width/height in the end display. If you are targeting a specific resolution /screen size then you can work backwards.
users can change their screen resolution with ease, so that affects how big/small the final result is. As a rough guide, its 96dpi (dots per inch), while new iphone displays can be over 300dpi.
Related
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 found a similar question here, with the answer: "you should always define the width and height in the image tag." But it is from 2009.
In the meantime, many things has changed on frontend. We are all doing responsive page design now, for many devices and sizes simultaneously (mobile, tablet, desktop...).
So, I wonder is it still necessary to specify the width and height attributes, and for what reason (for responsive, page speed, SEO...)?
An img element has width and height attributes, but they're not required under any DOCTYPE.
Width and height attributes were only 'required' or relevant to reserve the space on the page and prevent the page moving around as it loads - which is important. This can be achieved using CSS instead providing the CSS loads quickly enough - it is likely to load before the images anyway, so all should be good.
It is also possible (and valid) to specify just one attribute, width or height and the browser will calculate the omitted value in order to maintain the correct aspect ratio.
You can specify percent values in the attributes if required. You don't need to use CSS for this, if that is what you are implying.
Also, it is relevant to add - Under HTML5 the width and height can only take a pixel value, in other words a valid non-negative integer.
Whether you use the width and height attributes can depend on your design. If you have lots of differently sized images, do you want to lump all the dimensions in the CSS or include them with the img?
YES, you want to declare the width and the height of an image in 2016.
To make them retina-ready
If you want your image to be retina-ready, you should define a width and an height lower than the actual pixels. If the image is 800x600 specify <img width="400" height="300" />.
To avoid page jump
Without the width and the height the image does not know how large it is, which causes an unwanted jump in the page as it loads (it reflows). Declaring height and width solves this problem.
Note that:
Images with a defined width and height can still be responsive. Simply add max-width and max-height to your CSS. This will cause the image to scale down (not up) when it does not fit the screen (see this sweet retina-ready, responsive kitten). Defining a min-width and min-height will do the opposite.
Adding a huge amount of compression to your JPG (around 50%) to keep the file size low is recommended when you use a single (relative large) image for all screen sizes.
Well, the basic answer to this question (as with most coding issues) is this: it depends on the situation at hand.
I would say that the “best practice” of always specifying the height and width attributes of images making a significant difference to page rendering speeds hark back to the days when designers laid out their websites using tables and spacer GIFs. We have come a long way since then.
An indication for the future is the introduction of the new picture element being drafted into HTML. The picture element is effectively a wrapper for the existing img element, which allows you to specify several images of different sizes via a source element, and the user-agent itself actually determines which version is used.
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
As you can see from this example code above (taken from the Intel Developer Zone's article on the HTML5 picture element) there are no height or width attributes on the img element itself.
Here are a selection of resources that will help you to decide the most appropriate method of declaring image sizes:
Responsive Images Community Group
W3C Working Group Note: Use Cases and Requirements for Standardizing Responsive Images
WHATWG HTML Living Standard: The picture element
Good standards are always worth a recommendation. With a little extra code it's quite easy to merge static (px) values of the img tag and generic (em, %) values supplied by CSS. And simpler still, get rid of the img tag altogether and set the picture as background of a div with a unique ID. If you have multiple images, use sprites and assign each picture to its corresponding div. Your mark-up sources would then look something like <div id="image_001"></div> - that's all. Scales all by itself; no need for bloatware like JQuery, etc.
If we're talking 'bout responsive, you may use bootstrap (if not, start doing this).
When working with images, you should add the class img-responsive, this will modify the width of the image if necessary and the height will be auto, so if width decreases, height will decrease too.
You will always have an image that keeps the same % of its container and will never loose the aspect ratio.
There's no relation with SEO and image size declarations.
Page speed will be the same always, so if the image is 800 x 600 px, you'll load the full image, even if you declare it as 60 x 40 px.
You must think that, even using img-responsive, the max width and height of this image will be the real size of the image. So if we have a 800 x 600 px image, it will not enlarge it (because it'll become loosing quality).
So in 2016, it's recommendable to NOT declare height and width of an image. Instead use bootstrap's img-responsive class, other responsive framework class that gets the same result, or hand-made the proper jquery and css to reach the same.
Hope it helps!
Yes, It is still relevant to specify width and height attribute on images in HTML.
Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of
the image so that the browser can render the rest of the text on the
page while leaving the right amount of space for the image that is
still loading.
Hence, specifying width and height attribute on image will improve the webpage performance by protecting from delay in loading.
Yes, it is necessary to add height and width attributes to the img tag along with the src and alt attributes to prevent page-jumping. When our page loads, the specified space will be preserved for the image so that the it can occupy that place peacefully.
But, there is another problem that will arise here Responsiveness.
Once we give height and width attribute to img tag, the image will tend to stay in the same height for all screen-sizes which will make the image to shrink.
To avoid this, we need to add height: auto; to the image in the CSS file.
I am designing a site that sells apps. Each product page contains text with screenshots. I'm having trouble controlling the size and behavior of the images.
Each screenshot is a different size and shape - some being tall and narrow while others being short and wide.
My question:
How am I supposed to control the size of these images? Some are perfect at 100%, but some others would be way too big at 100%. So if I set a value in the css, it will be ok for image 1,3,6,9 but not for images 2,4,6,8 (and obvioulsy there are more than 2 types of sizes...).
I tried using max-width, but that obviously failed because if one picture exceeds the max-width, it will be scaled down, while another will not - this produces a funny looking page!
Am I supposed to do local styling for each image in such a case?
And if the answer is that local styling is required here, does that mean that each page needs it's own media queries also to resize responsively?
Thanks.
You can make 5 css class, named .width1 to .width5, having width value from 20% to 100%.
When adding an new image, choose a class that fit your need.
If you need more precision, create a set of 10 class instead of 5 !
Edit : as promised, the code :
.size1{width:10%;}
.size2{width:20%;}
.size3{width:30%;}
.size4{width:40%;}
.size5{width:50%;}
.size6{width:60%;}
.size7{width:70%;}
.size8{width:80%;}
.size9{width:90%;}
.size10{width:100%;}
So the image :
<img class="size2" src="..." />
will be 20% wide.
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.