SmileyTaty Posted December 1, 2021 Posted December 1, 2021 I have been trying to convert this PDF to a PNG or JPEG to include in a Wordpress blog post and it keeps looking blurry upon upload. You can see that when I download these, they look normal, but as soon as I put it on a Wordpress post, it gets all blurry, like this: My plan was to put a shadow behind the JPEG or PNG to make it look like a digital download product but I can't get it to look right on a Wordpress post even without a shadow?? I don't know what to do anymore Any help here would be amazing. Random List - PDF Flattened.pdf Random List - PDF High Quality.pdf Quote
NotMyFault Posted December 1, 2021 Posted December 1, 2021 Hi and welcome to the forum. Did you check the image quality on your PC locally before uploading to wordpress? If IQ is good before upload, it’s probably wordpress settings causing the blurriness. if IQ is bad before upload, check export settings in Affinity (DPI, size, resample settings). Do you use that exact file shows in you post? Is the source PDF protected in any way (export, print, editing)? Please check with AdobeReader, as Affinity does not display this information, but will apply those restrictions never the less. Quote Mac mini M1 A2348 | MBP M3 Windows 11 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080 LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5 | Dell 27“ 4K iPad Air Gen 5 (2022) A2589 Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps. I use iPad screenshots and videos even in the Desktop section of the forum when I expect no relevant difference.
Staff MEB Posted December 1, 2021 Staff Posted December 1, 2021 Hi @Printables, Looks like the image (PNG/JPG) is being downsampled by Wordpress. Do you want to use the image as a "thumbnail" to link to the PDF document? If so, it's probably better if you downsample the image yourself using a better resample algorithm (try Lanczos) to the size allowed by Wordpress to prevent it from resampling the image for you. Quote A Guide to Learning Affinity Software
SmileyTaty Posted December 2, 2021 Author Posted December 2, 2021 Hi everyone, Thank you for responding. I ultimately decided to just add a shadow on Affinity for the image and then export directly from there. And then on Wordpress, I had to adjust the size of the image manually so it would not get pixelated. Definitely pointed me in the right direction! Have a great day, Tatiana Quote
ashf Posted December 2, 2021 Posted December 2, 2021 There are many situations images become blurry on the website. 1. if it's not shown at 100% size, it will be resized by browser, this makes the image blurry. so create exact size of image you will use on the website. 2. you should use "full size" to place the image if you want to show the original image, otherwise Wordpress will show a resized image which is not the best quality. Quote
ashf Posted November 26, 2022 Posted November 26, 2022 Like MEB said, that's a problem of Wordpress(actually not a problem but how you do.) You have to upload the image that's exact size you want to use to pretent it to be resized in WP. WordPress has the standard sizes. 150px x 150px 300px longer side 1024px longer sidehttps://wordpress.com/go/tutorials/controlling-wordpress-image-sizes/ You have to create the image at those sizes before you upload. NotMyFault 1 Quote
NotMyFault Posted November 26, 2022 Posted November 26, 2022 Typo: pretend or prevent? ashf 1 Quote Mac mini M1 A2348 | MBP M3 Windows 11 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080 LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5 | Dell 27“ 4K iPad Air Gen 5 (2022) A2589 Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps. I use iPad screenshots and videos even in the Desktop section of the forum when I expect no relevant difference.
ashf Posted November 26, 2022 Posted November 26, 2022 Just now, NotMyFault said: Typo: pretend or prevent? revised NotMyFault 1 Quote
Brian_J Posted November 26, 2022 Posted November 26, 2022 Here are a few suggestions that may help. If you can determine the maximum size the image will be displayed at in the container it’s in (width is typically the only concern), resize the image to that exact max size, then upload the image to your site. Don’t manually resize the image in the WordPress theme. When inserting the image into the webpage, make sure you select Full Size rather than one of the smaller sizes automatically created when the image was uploaded (e.g., Large, Medium, Thumbnail). Quote Windows 10 22H2, 32GB RAM | Affinity Designer/Photo/Publisher 2 (MSI/EXE)
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.