I have a page run by Hubspot Blog and an image implementation with srcset, looking like this:
<img loading="lazy" src="
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=480&name=Element%2023#300x.png"
alt="Element 23#300x" width="480" style="width: 480px;" srcset="
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=240&name=Element%2023#300x.png 240w,
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=480&name=Element%2023#300x.png 480w,
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=720&name=Element%2023#300x.png 720w,
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=960&name=Element%2023#300x.png 960w,
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=1200&name=Element%2023#300x.png 1200w,
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=1440&name=Element%2023#300x.png 1440w"
sizes="(max-width: 480px) 100vw, 480px">
The issue: Google PageSpeed Insights test delivers as an opportunity properly size images, with a diagnozed problem with the image I mentioned above. It looks like the srcset doesn't work for PageSpeed Insights test and the image isn't resized properly.
Getting the test data directly through Page Speed Insights API the issue is diagnozed too, on the same way.
But, running the Chrome-own Lighthouse test outta Developer Tools (incognito mode), the issue isn't there - the image seems to be properly resized by srcset.
My question: is there something, what prevents correct resizing while testing by PageSpeed Insights test? Are there any issues in my srcset implementation? Or is this a kind of bug of PageSpeed Insights?
So there's a couple of things going on here:
All your images are the same 6510x10194 images. So the audit is correct to highlight the image as improperly sized. Is the width param supposed to result in different size images being returned?
I'm not sure why it's not failing the audit on desktop. I can repeat what you see but to me it should be failing there too. So PSI looks more correct here.
Your sizes attribute looks incomplete to me. Maybe that's what's throwing off the browser for point 2?
When I run it through https://ausi.github.io/respimagelint/ it gives the following output:
W descriptor doesn’t match the image size
Descriptor 240w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=240….
Descriptor 480w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=480….
Descriptor 720w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=720….
Descriptor 960w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=960….
Descriptor 1200w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=1200….
Descriptor 1440w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=1440….
A fitting image source should be available for all screen sizes
At a viewport of 1280×720 the image was displayed 480 pixels wide, but the closest provided image has a width of 6510 which is 93% (66 megapixels) off. The affected viewports are 300×169–3000×4000.
Try using the following image sizes in <img srcset="…"> instead:
260×407, 480×752, 760×1190, 960×1503
Loading a large image and display it much smaller should be avoided to save bandwidth. Loading a small image and display it much larger should be avoided to prevent pixelated artifacts.
The sizes attribute has to match the width of the image
The size of the image doesn’t match the sizes attribute (max-width: 480px) 100vw, 480px. At a viewport of 1000x563 the image was 424 pixels wide instead of the specified 480 (-12% difference). The affected viewports are 300x169-480x640, 780x439-940x1253, 1000x563-1020x1360.
Try using sizes="(min-width: 1220px) 480px, (min-width: 1000px) calc(28vw + 144px), (min-width: 780px) calc(50vw - 36px), (min-width: 560px) 480px, calc(91.67vw - 15px)" instead.
The sizes attribute is a hint for browsers which should tell them how large the image will be displayed. If it doesn’t match the real size, browsers cannot select the correct image source.
Related
Pagespeed module updates this image to resize it but in the process it messes up the scale. Is there a way to keep the scale and resize it? (Similar to cropping the image)
The CSS on the image is:
height: 100%;
width: 768px;
object-fit: cover;
To report the rendered dimensions back to the server, this filter
injects JavaScript code to your pages which beacon the sizes back.
Any image that you have that uses object-fit: cover; is going to be extremely confusing to Pagespeed. After all, the visible part of the image changes depending on the size of the screen, so it isn't even really possible for Pagespeed's beacon to accurately measure and correctly guess how to crop and resize it.
Does disabling the filters solve your problem?
https://www.modpagespeed.com/doc/reference-image-optimize#resize_rendered_image_dimensions
ModPagespeedDisableFilters insert_image_dimensions
ModPagespeedDisableFilters resize_rendered_image_dimensions
Edit: You may also want to try replacing your < img/> with background-imaged CSS. It should work functionally identical, but I suspect Pagespeed will have a better time correctly interpreting it.
On trying to upload chrome extension(Mandatory field) screen shot always getting error as image size is invalid.
I have provided the image size as 5kb,10kb,15kb,20kb,30,kb was still getting the image size invalid.
Image size specifications are not mentioned anywhere Please provide the Image size specifications.
Please find the below screen shot for your reference.
As per comment: the size here implies exact pixel size of the image.
I'm using multer node and express to upload a image to my app. But some images shows rotate 90 degrees when it's on the client.
why is this happening?, how can I fix it?
By the way I'm using vue on the client and for the upload process, of course I use formdata
UPDATE
After research and comments from the guys above, its a EXIF problem. Any code ideas to solve this?
The behaviour you are experiencing is probably caused by the Exif Orientation metadata.
There is another question here on Stackoverflow about this problem: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
The selected answer points to a project called Javascript-Load-Image as a possible solution, that basically means you will have to take the orientation in consideration when rendering the images to get a consistent behaviour.
Another possible alternative would be to edit/remove the orientation metadata in your backend.
Check the following resource for more information:
JPEG Image Orientation and Exif
This is most likely caused by Exif metadata (just like #Romulo suggested).
Browsers ignore Exif metadata when displaying images and that's why you're getting this behaviour.
To check that this is related to Exif take 4 pictures with different phone orientation (landscape left, landscape right, portrait, upside down). One of them will be shown properly, while the other 3 will be rotated. (Also note that if you're using the front camera, the image will also get mirrored).
Not all camera phones do this, but iOS does it consistently. The reason for this is performance. When rotation the phone the sensor also rotates and the picture taken doesn't take the rotation into consideration.
To properly show the photo, the image needs to be rotated, but if you just change the Exif metadata then you don't need to do it. Of course, any client that shows the image needs to be aware of this information (and iOS Photos and such are aware).
This has nothing to do with multer, but with the images are stored.
The bottom line is that you need to rotate the image to compensate for this.
Take a look over this npm package to adjust your image on the server side.
I am inspecting a portal's page for loading of images ,its loading very slow.
We pick images from a filesystem , images name from database and read them, create a list and show results using a4j:mediaOutput tag. but the images are being loaded very slowly.
http://www.easyrenting.com/list-detail/3bhk-ardee-city-sector-52/6263
The first problem I see is that all your pictures are high-res (1800px x 2400px).
You really should create thumbnails server side to meet your view requirement and load images according of the size you want to show on the client size.
Have you only verified that your web page weight about 6.5MB including all images? (Check with Firebug).
I would recommand you a custom servlet like this one FileServlet supporting resume and caching with GZIP, and create a URL pattern according to load full res or thumbnail depending of the requirement.
There is no problem using the a4j:mediaOutput tag.
The images are getting loaded slowly because the size is too large, you need to find out a way to optimize the image size. Probably you can re-size the images before saving it to your file system.
Unless you are giving the zoom functionality, you do not need these big images.
That should help!
I am facing an issue with XSLFO - FOP image rendering, I have several images of different size.
some of the small images are aligned inline with the text and some are big images that occupies a defined space, While displaying big images it would go beyond the viewport and i found a working solution at the Yahoo groups to restrict it within the viewport, however the given soultion renders both small and big images as block. but i need to render inline image as inline itself and not as block.
I am using following code to render image
<fo:external-graphic src="file:{./#src}" width="90%" content-width="scale-to-fit" scaling="uniform" content-height="100%" vertical-align="middle"/>
Image tag doesn't contain any information about inline or block.
Sample:
<img src="images/real_world_example.jpg" />
Text in the above image should align next to the image
Thanks in advance.
I can't test it but I think that the problem is with your width="90%". Simply delete it, it should work as you expect.