Let's say I have an image with actual size of 200x200 pixels. I insert it into a HTML page like this:
<img src="some.jpg" width="50" height="50">
Suppose there's no CSS styling for this image.
Will it be displayed consistently across all browsers and devices like a 50x50 image? Are there any exceptions?
This style is supported among all of the major browsers (IE, Firefox, Opera, Safari, and Chrome)
Keep in mind that when doing this, the user is still forced to download the full size image before it is rendered in the size you specified! If it is a particularly large image, it may be wise to downscale it with an image editor before you upload it.
The user is still receiving the original file but the browser is altering it through its respective rendering methods.
The only exceptions to this rule, and this isn't necessarily due to browser rendering but may be helpful to keep in mind, is that HTML 5 no longer allows for you to adjust by percentage -- you can only adjust by pixels (as you already are)
Related
What the specification says about cases when the same path (or probably the same sized images) appear with different pixel density descriptors?
The following example renders differently in desktop (Windows) Firefox 82.0b2 and Chrome 85.0.4183.121. The image appears natively scaled in FF and half the size in Chrome
<html><head></head>
<body>
<img src="testpicture.jpg" srcset="testpicture.jpg 2x">
</body>
</html>
The reason I'm asking is because a commercial CMS I use very often uses such output. In order to encourage them to avoid this I need a clarification. In this CMS the rendered content works mostly properly in FF, but in Chrome the rendering is sometimes unexpectedly scaled or some image content not appears at all (probably relating to cache availability of different sizes).
Update: This is very likely a chromium issue when the browser due to internal logic related to caching chooses a wrong variant. But until it finally fixed, I'd rather not post my own answer
The srcset attribute is a feature that enable responsive images. Specifically srcset gives the browser a hint what resolution images are available. In your case there is only on definition which hints at one image (testpicture.jpg) which has double (2x) resolution. But since there is only one definition, the srcset attribute won't do nothing and could be omited.
A full example would look like this:
<img src="/files/16864/clock-demo-200px.png"
alt="Clock"
srcset="/files/16864/clock-demo-200px.png 200w,
/files/16797/clock-demo-400px.png 400w"
sizes="(max-width: 600px) 200px, 50vw">
Check out the MDN documentation for the image element and their guide on responsive image for further details.
As far as I can tell, the srcset and sizes attributes focus more on applying a suitably scaled image for the device’s size and resolution.
There appears to be no facility to use these attributes to select an alternative image based on the screen size, such as one cropped or oriented differently.
Is this a correct understanding of the situation? Does that mean we will have to wait for the picture element to be widely supported for this task?
You are correct that srcset and sizes are only there to provide different resolution alternatives to the "same" image - there's no guaranty which resource will be picked.
If you want to provide cropped or proportionally different alternatives that are guarantied to match your responsive breakpoints, then <picture> is what you're looking for.
As far as support goes, <picture> is fully supported in Chrome and Firefox, soon to be supported in MS Edge, and not yet supported in Safari 9.
In the mean time, you could use picturefill to add that support to non-supporting browsers.
Personally, I have used the w-descriptors and srcset to display a variety of images based on the width of the available space.
It might seem rather crude but it works for me - I edit the image so that it becomes "art-directed" for a number of common breakpoints - turning it into effectively a number of different images.
Then, based on the size of the agent's screen, the browser will almost always choose the image which I have previously determined to be the most suitable.
For my approach, I did not use size, picture or any other property.
A code as simple as this appears to work:
<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />
I'm seeing a lot of inconsistencies with srcset attribute on img tags (responsive images) in Chrome 40.0.2214.91
Before I updated to Chrome v40 (I was on ~39), srcset attribute worked fine and would swap the image upon browser resize. Now, sometimes, the smaller version of the image will display if I have the browser set to the desired width then refresh the page. Other times it will not work whatsoever.
Testing jsbin:
http://jsbin.com/hulaconake/1/edit?html,output
Image tag I have:
<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">
I'm also testing this in another env with non-Placehold.it images, and using Picturefill.js http://scottjehl.github.io/picturefill/
I'm not having any issues in FF or Safari (both using picturefill).
iOS Chrome has similar problems.
Is my syntax wrong? Is there something going on I don't know about?
It's a feature not a bug. Chrome does not switch the size because Chrome already has a larger image in cache, so there is no need to download new data of the same image.
In case you want to use different images or same image with different crops, use the picture element.
Responsive images can be technically differentiated between 2 types.
srcset with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…):
density descriptor (x) (for static image sizes, Retina vs. normal resolution)
width descriptor (w) and the corresponding sizes attribute (for flexible, responsive / adaptive images (automatically also includes Retina optimization)
and the picture element with its source[media] children (gives the author control about what srcset should be chosen by the browser depending on specific media queries)
So img[srcset] is for resolution switching and picture is for different images reacting to your design
In my html page, I include an image as
<img src="http://i44.tinypic.com/w2o9kh.png" border="0" alt="Image by TinyPic">
I style it from an external css by
img {width:2em;height:2em; }
However I notice that the image quality deteriorates when same image is used more than once in a page.
Compare http://jsfiddle.net/aJ333/50/ and http://jsfiddle.net/zxgQr/ in firefox. The quality of smiley is worse in the first one.
Any insight on why this happens and how to retain the quality ?
P.S. Ive checked this happens even if images are in different div containers.
P.S. This seems to be browser specific:
In chrome both are good quality
In IE9 both are bad quality
In firefox quality of smiley is worse in the first fiddle.
I would like this to work in firefox at least.
Im novice in html so please bear with in case this is obvious
You are setting a height and a width value on your images. If those values are bigger or smaller than the actual dimensions of the picture, the browser must scale it. This process changes the resolution of the picture making it look somewhat blurry.
I am optimizing my site for these higher resolution monitors (especially the new iPad). I have the site formatted the way I want, and I was just increasing the resolution of each image but still constraining it to the DIVs that I currently have. For example, I have an image with a resolution of 483x246 and I have it fitting a DIV with a set size of 188x96.
The images look great on Chrome, Firefox, and most importantly on the new iPad. Even zoomed in it's nice and crisp (as opposed to my old 188x96 image that looked blurry and pixelated when zoomed in)
The problem comes in when I open the page in IE. It displays the image at the correct size but it's jagged. See link to comparison below. I know it's an issue with the way IE resizes and renders pictures on the fly.
My question would be, is there a way to make IE display the picture nicely? If not, is there a way I can put in the code so that if it detects IE, it displays my old low res image? I've looked everywhere but haven't found anything that relates to my specific problem. I know this is a small example but my bigger images do the same thing and are more noticeable. I hope you all can help. Thanks. :)
Comparison:
Have you tried putting this in your CSS?
img { -ms-interpolation-mode: bicubic; }
There's also this https://github.com/adamdbradley/foresight.js which looks very interesting
Make sure IE9 isn't in compatibility mode or IE7/8 mode...
The reason this happends if because the bitmapdata is actually rendered completely different in the IE browser, the thing IE does is it "cuts" away pixels over a set ratio so like every 5 pixels it yanks a pixel and therefor makes it look like it misses certain gradient properties.
not much you can do about this except for keeping the aspect ratio set but I guess you would've known that by yourself already