BUG? Hero Webpart's first Tile's image is always blurry/poor quality

%3CLINGO-SUB%20id%3D%22lingo-sub-747395%22%20slang%3D%22en-US%22%3EBUG%3F%20Hero%20Webpart's%20first%20Tile's%20image%20is%20always%20blurry%2Fpoor%20quality%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-747395%22%20slang%3D%22en-US%22%3E%3CP%3EGood%20day%20everybody%2C%3CBR%20%2F%3EFor%20a%20long%20time%20I've%20had%20a%20problem%20with%20the%20Hero%20web%20part%20and%20am%20more%20and%20more%20convinced%20now%20that%20it's%20a%20bug%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20image%20of%20the%20first%20or%20large%20left%20tile%20is%20always%20blurred%20or%20of%20poor%20quality%2C%20as%20if%20it%20appears%20in%20a%20smaller%20tile.%20See%20example%20below.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20tried%20various%20file%20formats%20(jpeg%2C%20png%2C%20bmp)%2C%20tried%20out%20all%20aspect%20ratios%20according%20to%20%3CA%20href%3D%22https%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2Fimage-sizing-and-scaling-in-sharepoint-modern-pages-dc510065-b5a5-4654-bc94-e3ecbbb57d8d%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EBestGuide%3C%2FA%3E(4%3A%203%2C%2016%3A%209)%20-%20without%20success.%20I%20tried%20everything%20from%201024x768%20to%203036x768....%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhen%20I%20edit%20the%20web%20part%20and%20click%20on%20%22Republish%22%2C%20the%20big%20tile%20appears%20sharp.%20As%20soon%20as%20I%20do%20a%20browser%20refresh%20(F5)%2C%20it%20will%20appear%20blurry.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20error%20appears%20is%20independent%20of%20tenant%2C%20users%2C%20browser%2C%20and%20browser.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20also%20makes%20no%20difference%20whether%20I%20used%20%22auto-selected%22%20or%20%22custom%20image%22%20and%20select%20the%20image%20by%20drag-and-drop%20or%20from%20the%20document%20library%20of%20the%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20example%20image%20below%20has%20a%20resolution%20of%2072dpi%20with%201880x1230%20pixels%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EIf%20it%20is%20not%20a%20bug%20and%20the%20fault%20lies%20with%20me%2C%20I%20urge%20you%20for%20help.%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F122929iBD18B6549073DD87%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%2210-07-_2019_14-48-38.jpg%22%20title%3D%2210-07-_2019_14-48-38.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-747395%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESites%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-787661%22%20slang%3D%22en-US%22%3ERe%3A%20BUG%3F%20Hero%20Webpart's%20first%20Tile's%20image%20is%20always%20blurry%2Fpoor%20quality%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-787661%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20everybody%2C%3CBR%20%2F%3Ecould%20someone%20possibly%20help%20me%20here%3F%3CBR%20%2F%3EThe%20problem%20still%20exists%3C%2FP%3E%3CP%3EThank%20you%20and%20have%20a%20nice%20day%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-800815%22%20slang%3D%22en-US%22%3ERe%3A%20BUG%3F%20Hero%20Webpart's%20first%20Tile's%20image%20is%20always%20blurry%2Fpoor%20quality%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-800815%22%20slang%3D%22en-US%22%3E%3CP%3ESame%20problem%20here!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-808657%22%20slang%3D%22en-US%22%3ERe%3A%20BUG%3F%20Hero%20Webpart's%20first%20Tile's%20image%20is%20always%20blurry%2Fpoor%20quality%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-808657%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F358017%22%20target%3D%22_blank%22%3E%40Collab-Constructor_93%3C%2FA%3E%26nbsp%3Bsame%20issue%20here!%20Did%20you%20find%20a%20solution%20for%20this%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-808664%22%20slang%3D%22en-US%22%3ERe%3A%20BUG%3F%20Hero%20Webpart's%20first%20Tile's%20image%20is%20always%20blurry%2Fpoor%20quality%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-808664%22%20slang%3D%22en-US%22%3E%3CP%3ETwo%20or%20three%20days%20later%2C%20I%20created%20a%20second%20Hero%20Webpart%20on%20top%20of%20my%20existing%20one%2C%20put%20the%20same%20images%20and%20the%20top%20Hero%20Webpart%20had%20good%20resolution%20(Even%20after%20refresh)%2C%20so%20I%20deleted%20the%20original%20Hero%20Webpart%20with%20the%20blurry%20picture.%20That%20fixed%20it%20for%20me...%20Worth%20a%20try%20IMO.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1130173%22%20slang%3D%22en-US%22%3ERe%3A%20BUG%3F%20Hero%20Webpart's%20first%20Tile's%20image%20is%20always%20blurry%2Fpoor%20quality%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1130173%22%20slang%3D%22en-US%22%3E%3CP%3EThe%26nbsp%3Bissue%20is%20still%20there%2C%20even%20when%20using%204%3A3%20PNGs.%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F358017%22%20target%3D%22_blank%22%3E%40Collab-Constructor_93%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1222043%22%20slang%3D%22en-US%22%3ERe%3A%20BUG%3F%20Hero%20Webpart's%20first%20Tile's%20image%20is%20always%20blurry%2Fpoor%20quality%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1222043%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F358017%22%20target%3D%22_blank%22%3E%40Collab-Constructor_93%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20STILL%20occurring.%20Tried%20starting%20over%20with%20a%20new%20hero%20web%20part%2C%20but%20no%20luck.%20The%20rest%20of%20the%20images%20on%20the%20hero%20and%20other%20web%20parts%20are%20so%20crisp%20that%20this%20is%20really%20noticeable.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

Good day everybody,
For a long time I've had a problem with the Hero web part and am more and more convinced now that it's a bug:

 

The image of the first or large left tile is always blurred or of poor quality, as if it appears in a smaller tile. See example below.

 

I have tried various file formats (jpeg, png, bmp), tried out all aspect ratios according to BestGuide (4: 3, 16: 9) - without success. I tried everything from 1024x768 to 3036x768....

 

When I edit the web part and click on "Republish", the big tile appears sharp. As soon as I do a browser refresh (F5), it will appear blurry. 

 

This error appears is independent of tenant, users, browser, and browser.

 

It also makes no difference whether I used "auto-selected" or "custom image" and select the image by drag-and-drop or from the document library of the page.

 

The example image below has a resolution of 72dpi with 1880x1230 pixels

 

If it is not a bug and the fault lies with me, I urge you for help.

 

Thank you!

 

 

10-07-_2019_14-48-38.jpg

6 Replies

Hello everybody,
could someone possibly help me here?
The problem still exists

Thank you and have a nice day

@Collab-Constructor_93 same issue here! Did you find a solution for this?

Two or three days later, I created a second Hero Webpart on top of my existing one, put the same images and the top Hero Webpart had good resolution (Even after refresh), so I deleted the original Hero Webpart with the blurry picture. That fixed it for me... Worth a try IMO.

@Collab-Constructor_93 

 

This is STILL occurring. Tried starting over with a new hero web part, but no luck. The rest of the images on the hero and other web parts are so crisp that this is really noticeable.

@Collab-Constructor_93 Not sure if anyone is still looking for a fix for this, but I just ran into the issue recently and came looking for answers. I've managed to fix the issue on my site, so figured I'd share what worked in case it helps anyone else.  

 

I've always used a 16:9 aspect ratio, but I never worried about what size the image was, as long as it hit that ratio... In this instance, actual size matters a lot. I ran a test and figured out that if I set my image size to be 1920px x 1080px at 150dpi, it loads perfectly and clear.

 

I reprocessed all my hero images in Photoshop and uploaded new files. As soon as I replaced the old files with the newly sized files, all images were crystal clear when loading and refreshing the page.

 

Hopefully this will help others. Best of luck!