:)
Recently I changed the default LARGE size from 960px width to 1280px width.
When I upload the image, WP creates the 1280px image, BUT when I insert it into the post, it still uses the 960px settings, even with the 1280 image.
It's like:
<img src="image-1280x853.jpg" alt="" width="960" height="640" class="aligncenter size-large" />
How can I fix this?
Related
Not sure if this started happening very recently, or if this has been an issue for longer, but I feel it's the former. I think I would have noticed, otherwise.
When I add an image to my post, and set the size to 'enlarged' or 'full' (presumably, I'm translating this from Portuguese), my (custom) theme shows these images either enlarged, or in full width. (To allow for this, I added add_theme_support('align-wide') to my functions.php.)
However, the file that is used, on larger screens, is not the correct one.
This is the image tag I get when including an image that is set to have full width:
<img loading="lazy" width="1003" height="564" src="[...]image.jpg?resize=640%2C360&ssl=1" alt="" class="wp-image-115865 shadow" srcset="[...]image.jpg?w=1920&ssl=1 1920w, [...]image.jpg?resize=300%2C169&ssl=1 300w, [...]image.jpg?resize=1024%2C576&ssl=1 1024w, [...]image.jpg?resize=1536%2C864&ssl=1 1536w, [...]image.jpg?resize=640%2C360&ssl=1 640w, [...]image.jpg?resize=1320%2C743&ssl=1 1320w, [...]image.jpg?resize=150%2C84&ssl=1 150w" sizes="(max-width: 640px) 100vw, 640px">
You can see that the image is displayed at 1003x564 pixels, but that the 'sizes' attribute sets a max-width at 640 pixels.
As a result, this image, displayed at 1003x564 pixels, is an upscaled image of 640 pixels wide.
The result is pixelated, which is not pretty.
What is defining the 'sizes' attribute? Why is it, here, set to 640 pixels? Can I change this? How?
The function that adds attr in images is wp_get_attachment_image()
The function that adds size attr in images is wp_calculate_image_sizes()
They have given filter wp_calculate_image_sizes to modify as per your need.
i replaced iframe elements on a dynamic content page by amp-iframes. Please have a look at following structure. I dont know the size of the iframe, because layout is responsive and content is not static:
<amp-iframe width=300 height=200
layout="responsive"
sandbox="allow-scripts allow-same-origin"
class="unknown-size">
<amp-img class="unknown-size" width="300" height="200" layout="responsive"
src="/images/logo.png" placeholder>
</amp-iframe>
The AMP-Iframe is responsive, its working fine. But i have problems with the iframe child elements (like a embeded video). There is a ugly gray distance to bottom, because the child element (iframe) is not fully stretched.
I am not able to remove the redundant gray space below my embed video. Can anyone help me, please?
I solved it. With the iframe I included the JW Player, which have a aspect ratio from 16:9.
I add those values to height and width attributes in my amp-iframe, now its working perfectly
<amp-iframe width=16 height=9
layout="responsive"
sandbox="allow-scripts allow-same-origin">
<amp-img class="unknown-size" width="300" height="200" layout="responsive" src="/images/logo.png" placeholder>
</amp-iframe>
I'm having a problem where wordpress keeps resizing the featured image, on a single blog post.
Here is an example of the html it is spitting out for:
the_post_thumbnail('large');
<img width="1900" height="849" src="http://127.0.0.1/wp-content/uploads/2016/02/MyImage-1903x850.png" class="attachment-large size-large wp-post-image" alt="MyImage-1903x850" srcset="http://127.0.0.1/wp-content/uploads/2016/02/MyImage-600x268.png 600w, http://127.0.0.1/wp-content/uploads/2016/02/MyImage-1903x850.png 1903w" sizes="(max-width: 1900px) 100vw, 1900px">
As you can see the actual image dimensions are 1903x850. However, wordpress has decided to add a different width/height in the img tag of 1900x849
Ive tried using regen thumbnails and reuploading the image, but it's really strange cant seem to work out why this is happening.
The image is scaling down because there's a max-width set of "1900px" when the image is actually 1903px.
I have following snap-points: 480px, 900px, 1800px, 2400px.
and this markup:
<img
sizes="(max-width: 2400px) 100vw, 2400px"
srcset="
boat-480.jpg 480w,
boat-900.jpg 900w,
boat-1800.jpg 1800w,
boat-2400.jpg 2400w"
src="boat-2400.jpg"
alt="This is a boat">
How should I get responsive images to work?
1. Basics
Device-pixel ratio
Device-pixel ratio is the number of device pixels per CSS pixel which is related to:
Pixel density of the device (number of physical pixels per inch)
Zoom level of the browser
So, greater Pixel density and/or higher Zoom level results in higher Device-pixel ratio.
srcset attribute & x descriptor
On <img> tag, the x descriptor in the srcset attribute is used to define the device-pixel ratio. So in:
<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
for a device-pixel ratio of 1, the image image-1x.jpg will be used.
for a device-pixel ratio of 2, the image image-2x.jpg will be used.
for a device-pixel ratio of 3, the image image-3x.jpg will be used.
for the fallback the src attribute (image.jpg) will be used.
srcset attribute & w descriptor
If you want a different image on a larger or smaller viewport, the w descriptor in srcset and a new attribute (sizes) comes into play:
<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
This mentions that the width of the first image is 200px, second image is 400px, and third image is 600px. Also, if the user’s screen is 150 CSS pixels wide, this equates to the following in terms of x descriptors:
<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 4x">
sizes attribute
The actual implementation where you’d want a different size image (different height, width) on different screen sizes is accomplished by using sizes attribute along with the w descriptor of srcset attribute.
<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
If the browser width is 500 CSS pixels, the image will be displayed 250px wide (because of 50vw). Now, this is equivalent to specifying:
<img src="image.jpg" srcset="image-1x.jpg 0.8x, image-2x.jpg 1.6x, image-3x.jpg 2.4x">
So, for a 1.5x display, image-2x.jpg will be downloaded by a browser, since it gives a device-pixel ratio of 1.6x (which is most suitable for a 1.5x display).
2. Answering your question
You have mentioned that you have emulated a 480px CSS width screen.
Because you have set sizes to 100vw, that is equivalent to specifying:
<img src="boat-2400.jpg" srcset="
boat-480.jpg 1x,
boat-900.jpg 1.88x,
boat-1800.jpg 3.75x,
boat-2400.jpg 5x">
There is chance you have 3x display, and thus the browser downloads boat-1800.jpg file.
Questions
Oddly, when I tested this on Chrome on iOS the browser actually downloaded boat-2400.jpg which is even more worrying.
That would be due to the higher Device-pixel ratio of your iOS device, which is likely to be something near 5.
Have I missed something here?
I dont think so.
I imagine I don't need the sizes attribute because I have the image set to 100vw in all views
The value of sizes is 100vw by default. But if you want to use w descriptor and want to have something other than 100vw for your sizes, you need sizes attribute.
I have a stock image of 1772 px. This image is the largest available. The raw file is gone so I can't create an image of 5120 px wide. How would the markup and CSS look for that image if I want to be able to stretch it nicely across the entire width of the iMac?
Minimum requirements:
I'm using Bootstrap so it has to work with that. And preferably with the img-responsive built-in class. Do I need to have the img-tag in a container-fluid div?
<picture>-element needs to be used since art directing is involved. When the viewport hits 767px and lower I'm displaying the image in portrait mode.
Here's the code I'm experimenting with:
<picture>
<source media="(min-width: 768px)"
srcset="/img/landscape/large.jpg 1772w,
/img/landscape/medium.jpg 886w,
/img/landscape/small.jpg 443w"
sizes="100w" />
<source srcset="/img/portrait/large.jpg 955w,
/img/portrait/medium.jpg 640w,
/img/portrait/small.jpg 320w"
sizes="100vw" />
<img src="/img/landscape/medium.jpg" alt="" />
</picture>
Currently firefox and Chrome managemes to strech out the image nicely but IE10 stops at 1772px and leaves white-space on the right of the image.
If I set the img to width:100% the image will stretch but I'm confused of wheather this is the right approach since in Bootstrap they use max-width.