Are your images uploaded on WordPress showing up blurry? We came across a weird problem that had even us stumped. We couldn’t figure out why EVERY PHOTO we added to our page layout (using Divi modules AND as Background images for Divi Sections) were showing up blurry when the photos themselves were perfectly clear.
What we found out was that when selecting the photos from the media library, the ‘Size’ option was defaulting to ‘Medium’ (which is a 300px wide version of the original), and the site was blowing up the images in order to fill the space… hence causing the images to become blurry and pixelated.
So here ya go – if you’re also trying to figure out why your images are blurry in WordPress or specifically Divi, try the below and see if that’s your issue as well:
- Find your blurry image (in this cause, ours was In Divi under the “Background” for a section). Click to select a new photo, and the media library should open up.
- Now, feel free to choose that same image in the “Media Library” tab, BUT…
- Before you hit the magic blue Insert Image button, scroll down to find the “Attachment Display Settings” section on the right side of the media library modal.
- Before you hit the magic blue Insert Image button, scroll down to find the “Attachment Display Settings” section on the right side of the media library modal.
- Under the “Attachment Display Settings” section, the third option down labeled “Size” was our culprit. Make sure to choose the “Full Size” option. Violia! NO. MORE. BLURRY. IMAGES.
If you’re having the same problem and end up finding a different culprit please share your solution as well in the comments to help others.
Tootles!
Thank you!!!! I was going nuts as even the pictures I had replaced and tried to upload them again were all blurry. Thank you for your help!!!!
Thank you. I was banging my head against a wall until I found this.
Oh my gosh thank you!!! I was about to go insane!
argh, this was driving me nuts! Thanks, I thought I was going to have to go back to our web builder!
Seriously, thank you so much for this! I was driving myself crazy trying to figure out why all of a sudden, every image on my site was blurry.
I really love the author of this blog right now, this has been driving me crazy for WEEKS, and no amount of Googling was helping me out, until I had ONE Last ditch attempt this morning before throwing my machine out the window!
THANK YOU!
Thank you so much! This solved the problem.
Mine is supposedly displaying full size (over 2000px wide) but still looks blurry 🙁
I’m having this issue but with my post’s “featured image” when displayed in a feed on my homepage. Any advice for a solution here?
OMG…I never comment on posts but THANK YOU!!! So weird!! This could’ve frustrated me forever, I’m so glad you wrote this article 😂😂
Thank you!!!!
This hasn’t solved my issue – only some of my images are blurry, and I realise it’s the images I’ve enlarged using the Transform tool. In the builder, the images are crisp, but on desktop: blurry. It appears to be serving the small image and THEN blowing it up, rather than looking at the size of the frame and fitting the image to it.
I’m chatting to support to see if there is a workaround – I’m guessing it might be an error with how the transform tool works.
Vielen dank!