Image Optimization in HTML Block
vividvisuals
Registered Users Posts: 30 Big grins
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
Comments
The images looks fine to me.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
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