Firefox is squashing an image that otherwise looks good in Chrome. How to fix this?
I've tried emptying the cache, reviewing preferences and I'm still seeing an image that is squashed by Firefox and yet it appears fine in Google Chrome. Javascript is not blocked and basic page style is selected.
I'd greatly appreciate an answer to how to fix this. This is for a major non-profit website.
Thank you.
All Replies (8)
Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?
Can you attach a screenshot?
- https://en.wikipedia.org/wiki/Screenshot
- https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem
- Use a compressed image type like PNG or JPG to save the screenshot
- Make sure that you do not exceed the maximum size of 1 MB
Make sure that the image is displayed with its native dimensions and isn't scaled.
I'm posting a screenshot.
How do other browsers display this image?
It is likely that you specify a width and height and that Firefox tries to stretch the image to make it fit.
You should either scale the image yourself and upload that image to the server or only specify one dimension (width or height) to ensure that you keep the correct ratio and aren't stretching it horizontally or vertically.
Modified by cor-el
Thank you. The thing is, Chrome features the image perfectly. And this image was uploaded into WP. How would I scale the image differently for Firefox when Chrome features it perfectly? This sounds like it's something that should be fixable within the Firefox browser itself rather than have to scale the image further which might impact how the image looks on Chrome.
All browsers may behave differently when it comes to scaling images.
What are the real dimensions of this image and what CSS code or direct width and height settings via attributes do you use that causes Firefox to squash the image?
Like I wrote above, letting the browser scale the images is never commended and best is to upload the image to the server with the desired width and height.
300 X 167 as it currently is placed into the website. With Chrome, it works fine.
Full size is 382 X 213 (50kb) uploaded into WP
That looks OK (ratio 1.79).
What dimensions does Firefox use if you check that in the Inspector via the right-click context menu (Inspect Element)?
It was necessary to find your page...
Source sent from the server:
<img class="alignright wp-image-239 size-medium" src="https://i2.wp.com/www.emanuelsf.org/wp/wp-content/uploads/2015/02/membership-photo848.jpg?resize=300%2C167&ssl=1" alt="membership-photo848" srcset="https://i2.wp.com/www.emanuelsf.org/wp/wp-content/uploads/2015/02/membership-photo848.jpg?resize=300%2C167&ssl=1 300w, https://i2.wp.com/www.emanuelsf.org/wp/wp-content/uploads/2015/02/membership-photo848.jpg?w=382&ssl=1 382w" sizes="(max-width: 300px) 100vw, 300px" data-recalc-dims="1" />
As modified by the page's scripts in Google Chrome:
<img class="alignright wp-image-239 size-medium" src="https://i2.wp.com/www.emanuelsf.org/wp/wp-content/uploads/2015/02/membership-photo848.jpg?resize=300%2C167&ssl=1" alt="membership-photo848" srcset="https://i2.wp.com/www.emanuelsf.org/wp/wp-content/uploads/2015/02/membership-photo848.jpg?resize=300%2C167&ssl=1 300w, https://i2.wp.com/www.emanuelsf.org/wp/wp-content/uploads/2015/02/membership-photo848.jpg?w=382&ssl=1 382w" sizes="(max-width: 300px) 100vw, 300px" width="300" height="167">
As modified by the page's scripts in Firefox:
<img class="alignright wp-image-239 size-medium" src="https://i2.wp.com/www.emanuelsf.org/wp/wp-content/uploads/2015/02/membership-photo848.jpg?zoom=1.5&resize=300%2C167&ssl=1" alt="membership-photo848" srcset="https://i2.wp.com/www.emanuelsf.org/wp/wp-content/uploads/2015/02/membership-photo848.jpg?resize=300%2C167&ssl=1 300w, https://i2.wp.com/www.emanuelsf.org/wp/wp-content/uploads/2015/02/membership-photo848.jpg?w=382&ssl=1 382w" sizes="(max-width: 300px) 100vw, 300px" width="161" height="24" scale="1.5" src-orig="https://i2.wp.com/www.emanuelsf.org/wp/wp-content/uploads/2015/02/membership-photo848.jpg?resize=300%2C167&ssl=1">
The following script is responsible for the resizing, but I can't really understand what it does: https://s0.wp.com/wp-content/js/devicepx-jetpack.js. From what I can see through interactive testing, if your "zoom level" is greater than 100% (very likely on newer versions of Windows, where the system level text size often defaults to 125%), the script applies some kind of scaling correction. On Firefox, the math is going terribly wrong for some reason.