Strange behavior. Size of images are incorrect and after each click by image they increase yours size. What the problem?
Related
I've been using Lighthouse to optimize UX for my website. My results are now pretty good, but I'm getting docked a few points for some things and I don't understand why.
In particular, on mobile it says that one issue is that the page "Serves images with low resolution" and provides the analysis shown in the image.
The actual size of the image perfectly matches the displayed size, and yet it says the "expected" size is four times larger. It seems to me I'm using the right sizes. What's the problem?
Notes:
On my desktop analysis, this issue isn't present (though the images are the same, and the sizes are the same).
I am using Next.js 12.1.5 and these images are using next/image with the height and width specified explicitly. The containing div uses css to set the height and width to the exact same size (my layout allows for me to know the precise size in advance).
I found this extant question on stack overflow, but the accepted answer is NOT directly addressing my issue, as my images are not SVGs.
This relates to the device pixel ratio for the device Lighthouse emulates.
If the ratio is 2, the images need double the dimensions to show properly.
So my client was complaining that their images were blurry as hell despite uploading very crisp, retina images. Upon investigation, the culprit is WordPress' automatic srcset attributes.
I dunno if it's intended or not, but they just look horrendous on any screen size (on my 1440px screen, it's loading images at 300px wide for some reason).
At this point I'm no longer overly concerned why, I'd just like it to go away and enforce the 'large' size for everyone.
Is that achievable? If I disable it in functions.php, it still just loads the thumbnail-size image.
I recently noticed this strange behavior in Chrome when increasing and decreasing the size of the zoom and consequently an img.
It might be hard to tell at first but the image on the left is blurred vs the image on the right that is sharp. I took these screenshots from the same image, from the same webpage, in the same browser, at the same size.
The only difference being that, for the image on the right, I scaled my browser zoom up, then down, and took the screenshot before the image had time to 'blur'. The image on the left, is taken a second or two after the zoom in/out commands have finished, and the image gets blurred. As a side note, the same behavior happens when you increase or decrease the rendering size of the img by adjusting the width. I think it's important to note that the image is huge 1920px and being shrunk down to about 300px.
I prefer the look of a crisp image, vs a blurred one, even if it's at a smaller size. Why does the blurring happen, and is it possible to stop it?
I have a ribbon-base app and on it's toggle buttons I'm placing PNG icons - 32x32, 32 bits. But when I'm launching the app the image on the ribbon button looks corrupted. Just to checkk I've create a simple button control with the same image on it - and it looks ok. see the screenshot here - http://i.imgur.com/0zct9cf.jpg
I've tried to add RenderOptions.BitmapScalingMode="HighQuality" and RenderOptions.EdgeMode="Aliased" to my app window tag - no luck.
Can someone explain whyRibbonToggleButton corrupts the images on it?
Thank you!
Try saving the image with a program that supports setting the DPI in the metadata, for example IrfanView. I had a similar problem and changing the images DPI to match the screen fixed it for me.
Open the image in IrfanVIew and press shift+i to open the image information dialog
Change the DPI to match your screen
Save the image
I have not tested this on a screen that is set to a different DPI, so I have no idea if this will look even more horribly wrong then.
I can't seem to find an answer to this rather interesting problem. In google chrome, images that have a set width and/or height, either using attributes, inline styling or css styling, refuse to show up on the page on initial load. They only seem to appear after there has been some page activity. Yet, if you let the images load to their natural size they display on page load perfectly fine. The images can be seen as it works in other browsers and when inspecting elements in chrome the image is display in the popup window.
Any know how to fix this?
define what you mean by: 'after some page activity'.
You also mentioned that the it happens when you have set width AND/OR height which leads me to believe in some of your testing your ommiting width OR height so it can be calculated by the browser. if that is the case then yes the image will never look proper and the elements will have no size on initial page load UNTIL the image is downloaded, the browser inspects the image and determines the dimensions missing to create the bounding box.
Edit:
After looking at your online site, my previous comment explains the gist of it but I can see that you're setting a width of 'auto' which requires the browser to load the image first and detect the sizes. Which will cause a delayed 'reflow' in the browser rendering. Set your widths and heights otherwise they will need to calculated by the client browser. And if you have not so good pc it looks sluggish. On my system if i hard refresh with no cache sometimes i get all the thumbs and other times I don't and the delay is very noticeable.
So in short make your images always have a width AND height.
Edit:
You also have some 404 errors that can cause some latency. http://www.webpagetest.org/result/120725_0C_3N6/1/details/
Edit:
I think your only option is to load the bg image first by getting it higher up in the order of resources downloaded so it loads in as fast as possible to be rendered.
One trick might be to load the bg image in a hidden div to preload it right away so the browser downloads it first. And even if you do that you should expect to see some flash of black background while you wait for the high res shot to download and get loaded. Can't set widths and heights on background images anyways. Going further you can speed up the response time maybe by loading all the thumbnails with an AJAX call AFTER page loads so they don't even compete with the big photo shot and start downloading until the dom is fully loaded. You can even put a nice effect in there to maybe fade in the thumbnails loading or something to that effect.