Even when dropping “Full Size” pics using the classic Add Media function in WordPress, it serves a blurry version.

This was maybe for site speed or some other theme reason, but for a photographer like me, it’s unacceptable. As default, wordpress serves a “Rendered Size” and not necessary your intrinsic full size. SUPER ANNOYING.

Here you can see the massive difference in sizes.

You shot a diamond, but wordpress serves a turd:

Normally its not bad if you shoot with a DSLR.

A real photo example, here is what happens when I quickly and simply drop a FULL SIZE pic.

You might disagree this is blurry, but once you see it on your own pics you’ll see.

Also, if you are uploading Phone quality pictures, often you will want to downscale.

Solution 1: Manually Downscale this by 50% in HTML via Max-Width / Max-Height. Forcing the browser and kinda pissing off Google Speed Insights a bit but that’s okaaay

The manual on element css code is this:

style=”max-width:60% !important”

BUT. WE ARE BUSY. WE DONT HAVE TIME TO MANUALLY DOWN-SCALE EACH TIME.

Solution 2: Customize CSS and totally force all image classes to go “50%”, or whatever.

Same idea as the above but just use CSS classes that WordPress supports.

For example:

.size-full {max-width: 70% !important}

yes it’s dirty, and only works in certain websites. I won’t be doing this for now until it really bothers me. But hey if it works for you you lucky.

YOUR MILEAGE MY VARY.

In my case, my own theme overrides my work from their img tag attribution on max-width: 100%:

Solution 3: Post a blog post about it and hope a savvy saviour here can help me.

I’LL LOVE YOU FOR IT 🙂

Solution 4: Google Search it Bro

ALL TOTALLY USELESS / BAD solutions imo. You will get served perfect SEO articles that recommend unscalable solutions like my 1 & 2 and then 5 different bloated plugins. I’d rather use CSS if that’s the case but just IMHO.

SOME KNOWLEDGE FINALLY

I found theses posts useful for education:

Intrinsic Size vs Rendered Size: Understanding the Differences

Author
Recent Posts

Peter Peng

Owner of Lucas Creatives Inc.
Tech & business junkie.
Former engineer, Shopify owner and developer.
Currently focused on social media automation.

WordPress Blurry Images Problem – “scaled” jpgs served and blurry

Even when dropping “Full Size” pics using the classic Add Media function in WordPress, it serves a blurry version.

You shot a diamond, but wordpress serves a turd:

Solution 1: Manually Downscale this by 50% in HTML via Max-Width / Max-Height. Forcing the browser and kinda pissing off Google Speed Insights a bit but that’s okaaay

Solution 2: Customize CSS and totally force all image classes to go “50%”, or whatever.

Solution 3: Post a blog post about it and hope a savvy saviour here can help me.

Solution 4: Google Search it Bro

SOME KNOWLEDGE FINALLY

1 thought on “WordPress Blurry Images Problem – “scaled” jpgs served and blurry”

Leave a Comment Cancel Reply

Even when dropping “Full Size” pics using the classic Add Media function in WordPress, it serves a blurry version.

You shot a diamond, but wordpress serves a turd:

Solution 1: Manually Downscale this by 50% in HTML via Max-Width / Max-Height. Forcing the browser and kinda pissing off Google Speed Insights a bit but that’s okaaay

Solution 2: Customize CSS and totally force all image classes to go “50%”, or whatever.

Solution 3: Post a blog post about it and hope a savvy saviour here can help me.

Solution 4: Google Search it Bro

SOME KNOWLEDGE FINALLY

Related Posts

1 thought on “WordPress Blurry Images Problem – “scaled” jpgs served and blurry”

Leave a Comment Cancel Reply