Edge-to-Edge Full Resolution?
-
Hello All,
I’d like to have an image at the top of my home page that goes edge-to-edge east/west that is full resolution. As it stands now I can get my image to go edge-to-edge if I set it as a featured image. The problem is that when I do this the image is somehow being up-res’ed and it is noticeably blurrier. (see below – the top image is a screenshot of my home page and the lower shot is the file from which the featured image is selected.)
Is there any way to maintain the original resolution?
TIA
Eric
Screenshot The blog I need help with is: (visible only to logged in users)
-
Ugh, the attached picture doesn’t work. Here is the link to the media file:
https://kg6mzs.com/wp-admin/upload.php?item=11504
Compare that to the home page that calls it up:
-
-
Hi @wringmaster,
Your original file is fine, it’s 6000 × 2366 px. The homepage is loading a 1200 × 473 px version and stretching it much wider, which is why it looks blurry.
Edit the homepage, select the Featured Image block, open Settings, and set Resolution to Full Size, then save the page. If that block doesn’t show a Resolution option, use an Image block at the top instead, set it to Full Size and Full width, and remove the featured image so it doesn’t appear twice. This guide shows where to find the setting: Adjust an image’s resolution. Full Size should keep the banner sharp, though it will make the page download a larger image.
-
Hello benitoalba,
Thank you for taking the time to respond. I’ve tried your suggestion – replacing the Featured Image with an Image Block and setting it to Full Width and Full Resolution. I’m still getting the same result – the image is slightly soft. Not in the order of a 1200 wide > 6000 wide up-rez, but still the light lettering is suffering as you can see if you call up the page now. The source file looks great, just not once it gets called up by the page.
-
It looks like there is no way to get the actual image’s full resolution edge-to-edge on a page. This seems odd given the the full resolution image is uploaded to the Media Library. More than a little frustrating given that when editing the page, the image looks perfect. It’s only after publishing the page and viewing it that the image is degraded. Thank you benitoalba anyway for taking the time to try and help me solve this one.
-
Thanks for testing that @wringmaster, WordPress.com’s image CDN can still resize it based on the width at which it is displayed, that resizing is especially noticeable on the small, light-colored lettering because it is part of the JPEG itself.
The most reliable workaround would be to use the photograph without the lettering in a full-width Cover block, then add the labels as actual text blocks over the image. WordPress.com specifically recommends adding text over a banner rather than including it inside the image, so the text can scale more cleanly across different screen sizes. It takes a little more setup, but it should give you a noticeably cleaner result.
-
Thanks for the suggestion benitoalba. You are right that the Cover Block allows for type vectors to be embedded into the image, but, yikes, what a clumsy typographic interface! Trying to get the font I want laid out exactly spaced and where I want it is like pulling teeth! The Drag tool is worthless.
Vectors really aren’t an issue if the type is rasterized a full resolution. Nobody is going any bigger. I’ll stick with what I have for now because the background appears to be a little sharper.
Thanks again for all your help!
wringmaster
WordPress.com Forums 