I have the "serve scaled image" issue when I test my website with http://gtmetrix.com/
For example, my image size is 2000x3000 and the recommendation is 104x104px (I set the width and height of img to 104x104px in my css). I tried to resize all my icon images to 104x104. However, those images look blurry? I thought it should not be blurry because the size is correct.
My question is how do I know the size to scale the image when
1. img has fix size (I set the width and height of img to 104x104px in my css) => blurry issue
2. responsive image
I use Wordpress, any free plugin that solves the issue. I used optimole but it makes my images blurry!
Thanks,
Use css properties such as
object-fit: cover
for image tag and
background-size: cover /* it can be contain too, depending on the situation */
for backgrounded images
Use "picture" HTML tag for different window widths:
<picture>
<source srcset="/img/blog/responsive-images-lg.png 730w">
<source srcset="/img/blog/responsive-images-md.png 610w">
<source srcset="/img/blog/responsive-images-sm.png 350w">
<img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>
Related
I am struggling to understand the srcset and sizes attributes in the <img> tag.
First of all, why is my code not working?
<img src="orange.jpg" alt="orange" srcset="coffee.jpg 600w, mycat.jpg 800w" sizes="(max-width:500px) 600px, 800px">
When i run this code, the mycat.jpg image loads regardless of how much i shrink the browser. Why?
I thought this code is supposed to mean that, if the viewport is up to 500px, then the 600px image should load, which is the coffee image, and if there isn't one, then the 800px image should load, which is the mycat image. So why is the mycat image loading regardless of the viewport?
Also, if the browser chooses which srcset image to load depending on the proximity of the sizes, then in what case does the src image (orange) loads?
Also, what happens if i add a wrong number for the resolution size of each srcset image? In my example, I've described coffee image as 600w and mycat image as 800w. What if these numbers are wrong?
Another thing I struggle to understand is, why is the sizes attribute being used here for adding a media condition? Isn't that what the media attribute is for?
The explanation given in mozilla.developers.org and other websites is atrocious. Please do not copy-paste any external sources purporting to explain this. They do not. I've seen them all.
Your code is not working because your code is incorrect because if you wanna put srcset attribute then you have to put it inside source tag which should be inside picture tag tag. Try writing the code attached below.
<!DOCTYPE html>
<html>
<head>
<title>srecset attribute</title>
</head>
<body>
<picture>
<source media="(min-width:800px)" srcset="mycat.jpg">
<source media="(min-width:600px)" srcset="coffee.jpg">
<img src="orange.jpg" alt="orange" style="width:auto;">
</picture>
</body>
</html>
In the above code if the screen resolution/size is more than 800px then mycat.jpg will be displayed.
If screen resolution/size is between 600px to 800px then coffee.jpg will be displayed.
And If screen resolution/size is less than 600px then orange.jpg will be displayed.
And if this doesn't work comment your issue, I will try my best to help you.
you have to put the image and sources inside a picture tag.
<picture>
<source srcset="coffee.jpg 600w" sizes="(max-width:500px)">
<source srcset="mycat.jpg 800w" sizes="(max-width:600px)">
<img src="orange.jpg" alt="orange">
</picture>
When browsers evaluate srcset, they take more than the sizes attribute into account. While I'm not sure the full list of things they consider, I know they also consider screen pixel density.
In your example, if the browser detects a 2x or higher pixel density, it would attempt to load a 1200px image to fulfill the 600px size. Since no such size exists, it uses the largest image available: mycat.jpg.
Is it possible to prevent upscaling when using scrset?
Here's a jsbin showing what I'm talking about:
https://jsbin.com/bukupuq
The browsers (Firefox, Chrome, Safari) are using the largest image to fill the container, even though its width (500px) is smaller. I would expect that it would intelligently use the best image given the viewport width, but not upscale the image.
Is there a way to prevent this without having to write an inline style="max-width:500px"?
It looks like images with srcset will always upscale, even if supplied with a low-res image. It's hard to search for documentation on this because all of the examples people use assume that you already have high-res images on hand. In my case, I'm building a 'responsive image' React component that is handling images supplied by a user from a CMS. Not all of their images are high-res, though.
My solution involves a little CSS balancing of width and max-width, both on the image itself and its wrapping <figure> tag. (This of course could be a div or anything else)
CSS:
img {
max-width: 100%;
}
figure {
width: 100%;
}
HTML:
This is generated according to how many sizes of an image are available. On the CMS side, I am creating thumbnails at 2400px, 1600px, 1200px, 800px, and 400px wide, but only if the source image is larger than that. The <figure> tag then gets all of the resized images, as well as the original one. Then, to prevent the image from scaling up, the figure tag gets a max-width of the largest image available.
So, if the source image is only 500px wide:
<figure class="" style="max-width: 500px;">
<img src="http://example.com/images/img_7804a_web.jpg"
srcset="http://example.com/images/img_7804a_web-400x600.jpg 400w,
http://example.com/images/img_7804a_web.jpg 500w"
sizes="100vw"
alt="alt text">
</figure>
If the source image is 1125px wide, it gets a few more sources:
<figure class="" style="max-width: 1125px;">
<img src="http://stephanie.standard-quality.biz/content/projects/18-2016/3-cargo-cults/cargocults_basketwoman_web.jpg"
srcset="http://stephanie.standard-quality.biz/thumbs/projects/2016/cargo-cults/cargocults_basketwoman_web-400x533.jpg 400w,
http://stephanie.standard-quality.biz/thumbs/projects/2016/cargo-cults/cargocults_basketwoman_web-800x1067.jpg 800w,
http://stephanie.standard-quality.biz/content/projects/18-2016/3-cargo-cults/cargocults_basketwoman_web.jpg 1125w"
sizes="100vw"
alt="alt text">
</figure>
Here's how it ends up looking: in this instance, the third image wasn't high-res enough to span the whole column:
I'm currently in the process of making my website AMP-ified my site is built in bootstrap and everything is responsive so most of my images I just set like so:
img{
width:100%;
height:auto;
}
However the problem im running into with my amp-img is that it requires a width and height to be set on the image. What is the correct way of making responsive images with amp is there anyway to do this without setting height and width?
Without knowing the width or height of your image the only way to show your image is to give it the layout attribute fill and wrap it in a element with add which has the following css property object-fit set to contain.
.ampImg__Wrapper {
object-fit: contain;
}
An amp requires the dimensions to be in the tag for a reason
The size you put in there is the size the amp-script uses to generate a placeholder. The placeholder stops the content from jumping around while the images load.
That being said, just put the organic image dimensions in the tag and use the two following properties in your CSS to make sure images play nice
(make sure you add a selector of-course)
{
max-width: 100%;
height: auto;
}
The AMP way to achieve that is by using the layout attribute. In amp-img, you specify the source, the native height and weight ; sourceset with formats, in "css pixels"(e.g. 96px/in) for your responsive image with layout= responsive and you're done. AMP will maintain the h/w ratio.
Ex.
<amp-img
src="/img/small.jpg"
srcset="/img/medium.jpg 640w,
/img/small.jpg 320w"
width="1800"
height="2777"
layout="responsive"
alt="Don't forget to add one">
</amp-img>
In this example, the layout="responsive" would be inferred by the AMP engine because image size and formats are specified. When height and width are not defined, the default layout is "container" (e.g. like plain div).
You can also include amp media queries in amp-img. The preceding example could be set like this:
<amp-img
media="(max-width: 639px)"
src="/img/small.jpg"
width="450"
height="694"
layout="responsive"
alt="Don't forget to add one">
</amp-img>
<amp-img
media="(min-width: 639px)"
src="/img/medium.jpg"
width="900"
height="1388"
layout="responsive"
alt="Don't forget to add one">
</amp-img>
In this case, the "media" attribute will have precedence over the adaptative selection (but it makes almost no practical differences except if you want to force a certain image upon a certain screen size).
For a good overview: https://www.ampbyexample.com/advanced/layout_system/
Hope this help
I use picturefill.js for responsive image feature. When I place original image without specifying height and width, image is shown in <picture> tag and pull up different size of same images according to screen size.
But when i specify height and width, responsive feature does not work. Image is loaded with <img> tag.
here is link
The documentation of the library explains you should manage the image size by using the sizes tag:
<img
sizes="(min-width: 40em) 80vw, 100vw"
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w"
alt="…">
By defining a style with a width and height you are forcing the image to keep that aspect.
From the site:
The sizes syntax is used to define the spaces your image will occupy in your layout. srcset then defines a list of images and their inherent widths. This allows the browser to choose the smallest appropriate source for the size available in that part of the layout, rather than the viewport size alone.
I have 2 images: one desktop version, one mobile version.
I would like the desktop image to be replaced by the mobile image when the viewport width resizes below 480px, just as would with the following CSS with background-image property :
.logo { background-image: url(http://placehold.it/400x200&text=desktop); }
media screen and (max-width: 480px) {
.logo { background-image: url(http://placehold.it/300x150&text=mobile); }
}
I thought I could achieve this with the srcset HTML attribute :
<img src="http://placehold.it/400x200&text=desktop" alt="" srcset="http://placehold.it/300x150&text=mobile 480w">
But it does not work, the browser shows the mobile image all the time and rescales it on viewport resize, but I wish the 2 images remains in their respective original size.
Is it possible to achieve this behavior with srcset?
It sounds like you want to do "art direction", i.e. the images are different more than just the smaller being scaled down version of the bigger image. If so, you need to use the picture element.
<picture>
<source srcset="http://placehold.it/300x150&text=mobile"
media="(max-width: 480px)">
<img src="http://placehold.it/400x200&text=desktop" alt="...">
</picture>
However, if your small image is actually a scaled-down version of the bigger image, then you can use srcset, but then you have no control over which image gets chosen. It's up to the browser to pick the best one based on screen density, network conditions, user preference, browser cache, etc.
<img src="http://placehold.it/400x200&text=desktop"
srcset="http://placehold.it/400x200&text=desktop 400w,
http://placehold.it/300x150&text=mobile 300w"
sizes="(max-width: 480px) 300px, 400px">
Note: If srcset is used and the larger image candidate is in cache, Chrome will always display this cached image candidate - no matter of the actual viewport size.