Suppose you have an image that is 1500 × 1500 CSS pixels to be displayed on your web page, but you expect that all of your users will be using a mobile device whose width and height do not exceed the equivalent of 500 CSS pixels. What is the best practice?
Keep the original image and set the width and height attributes to 500 or less in the HTML.
Display the image as is, setting the width and height attributes to 1500 or less in the HTML.
Keep the original image and set the width and height attributes to 500px or less in the CSS.
Resize the image to 500 X 500 CSS pixels or smaller in a program such as Photoshop.
Related
In the srcset attribute of img element in html, we can specify either the width or the pixel density of each source. We use w to specify width and x to specify pixel density. I have some questions about w and x.
Does 500w mean that the width of the image is 500 pixels? If so, why is it w and not px, as used when in the size attribute?
Does 1x means a pixel density of 72pixels/inch
Why does an image have pixel density? I thought pixel density means the number of pixels within a physical length/space. For example, the number of pixels per inch. But a digital image doesn't occupy a physical length/space, it only occupies a number of pixels. So what does the pixel density of a digital image mean?...This is my guess, please tell me if I'm right: An image only occupies a number of pixels, but it could have been intended for a physical length. For example, an image of a button of 144 pixels width was intended to occupy a physical space of 1 inch. Therefore, it was intended for a device of 2x. We tell the browser this by specifying 2x in the srcset attribute. To sum up, the pixel density means the pixel density of the system the image is intended for.
#1. The 'w' value that appears to the right of each file listed in the srcset attribute of the <img> tag is known as the "w descriptor." The value of each 'w' descriptor is the intrinsic width, in pixels, of the file the 'w' descriptor is associated with. "Intrinsic width" means the native width of the image when it is was originally created or the last time its width changed. You can view a file's intrinsic width in Photoshop or the Windows 10 Photo Viewer (click the three-dot menu "..." and select File Info). "px" is not used to describe intrinsic width because it is used to describe various other types of image widths. The 'w' descriptor describes a specific type of image width that is measured in pixels - intrinsic width - and is used only with the srcset attribute of the <img> tag.
#2. "1x" does NOT mean a pixel density of 72 pixels per inch. That's because pixel density is NOT device resolution. Pixel density is the ratio of browser image width in pixels (known as "CSS pixels") to the native pixel width of the device's display screen. Pixel density has nothing to do with device resolution.
#3. An image does NOT have pixel density. It has only two types of width measurements - both in pixels. One width measure is the width the browser is displaying the image at. The other width measure is the intrinsic width of the image (see #1). For example, suppose I have an image whose intrinsic width is 800px wide. Also suppose that the browser is displaying the image at 650px wide. These two measures are not related in any way (this is NOT pixel density!) - they're just two different ways an image can be viewed which results in two different width measurements.
I've answered your questions directly, without any other context or explanation, and I'm certain that you are scratching your head saying, "That didn't help!" That's the exact same reaction I had when I first started to educate myself about how inline images (images that are specified with the <img> tag in HTML) are selected and displayed by browsers. I suggest you read this post to begin to gain a thorough understanding about how inline images are specified in HTML markup and how browsers select the appropriate image from the srcset attribute of the <img> tag. You can expect several weeks of study before this topic comes into sharp focus. And when you've finished mastering inline images, background images are waiting for you to master with a completely different set of rules. :>)
I'm validating my HTML 5 pages and I get a lot of errors because I specified the width and height of my images in percentage. I though that this was the best way because if I specify it in pixels it won't resize when the site is viewed on a smaller device.
What's the correct way to specify the width and height of an image in HTML?
Thanks
If the original image is the aspect ratio that you want then just specify the with % and the height will change automatically. Make sure that the height of the parent div does not have a specified height as that may cause some problems. Also positioning of the rest of the page should be relative.
I'm trying to convert a psd mockup file into html & css, but the width of page is 1700 px, too big to be rendered without horizontal scrollbars. So I want to limit the width or to set a percentage value for it, but doing so I'd have to change sizes of all the elements.
As Justinas says, you should fit your site to maximum 1200px, so you need do redo your design.
I can recommend 960 grid system. All the important things should be within 960px.
I'm experimenting with foundation. Link: http://foundation.zurb.com/docs/index.php
I've got a very simple Div:
<div style="background:url(gymBasketballHoops.jpg);height:100%;"> </div>
When I set height to 190 px it says 190 no matter the browser size, but when I set height ot 100% it's only show 50 px of image. I use lots of stuff in my current site that is going to be a background image, but i also want those heights responsive. How do i accomplish this?
<div style="background:url(gymBasketballHoops.jpg);height:100%;"> </div>
When I set height to 190 px it says 190 no matter the browser size,
but when I set height ot 100% it's only show 50 px of image.
Without seeing the rest of your HTML/CSS, I cannot recommend anything further than the following...
190px is a fixed size and will be 190 pixels high no matter what browser or resolution.
100% is the size with respect to the outer container of the div, not its content. If the outer container is 500 pixels high then your <div> will be 100 percent of that.
Since the <div> is empty except for the , you have to set a size or it will only be large enough to enclose the So without a specified size, it will only be responsive to the size of its content.
Therefore, you can set a percentage based upon the outer container, you can set a fixed height, or you can leave it out and allow content to dictate height.
Is there any way that I can use just HMTL and CSS to force an image to resize to fit a fixed dimension while maintaining its aspect ratio (without stretching/shrinking)?
Consider my required dimension to be a 64x64 pixel square, and the following cases for images I want to fit within this dimension:
A 64x64 pixel image
An image 96 pixels wide and 135 pixels high
An image 135 pixels high and 96 pixels wide
I've been able to figure out a way to solve either 1 & 2 or 1 & 3 by explicitly declaring the image's height="64px" and width="64px" respectively, but one does not work for both, and declaring both causes the image to stretch or shrink.
Is there a way to solve this problem only using HTML and CSS?
use max-width and max-height instead. don't set width/height in css.
style="max-width: 64px; max-height: 64px;"