Image Optimization in HTML Block

vividvisuals

Website is: www.vividvisuals.asia

Thanks in no small part to the help I get from this forum, I've finally got my homepage to a place where I feel like the layout looks good while working reasonably well in all formats/screen sizes.

I'm far from an expert, but I've hobbled together a cool parallax section.

Unfortunately, the images don't look nearly as good as those used in Smugmug's own content blocks: they're grainy and not well optimized. The photos were imported as 4k dimensions into a "Web Creation" gallery in Smugmug. From there I just right click the image and select "copy image address" and paste that into the HTML block

Perhaps I'm linking the images wrong, but any guidance on how to either:
1. Use a different link that uses Smugmug's own optimization?
2. Use a different technique

Basically, if I can get those images to match the look of the images on the splash screen I would be 100% happy with what I currently have.

Thanks as always!

-Alex

Hikin' Mike

The images looks fine to me.

vividvisuals

Hey Mike, thanks for having a look!

I think on smaller screens the difference may not be as obvious, but on a 4k screen the image quality is clearly being diminished for some reason.

There is no magnification on the below screenshots. I can't figure out why, but what's displaying is not a 4k image despite the source images being 4k... :-/

First image is a comparison in sharpness between the HTML image and Smugmug.

Second is Smugmug

Third is HTML (take note of the edges of the island)

The size of the source images is the same, so I really am not sure why they are displaying in lower quality