1

I recently took over a Wordpress site which has a lot of images. There was a folder of 10Gbs+ worth of PNG files and in an attempt to optimize the site I wanted to convert these to JPG files.

I batch converted the whole lot, and then built a process for replacing each occurrence in the Wordpress database with the JPG filename version (I also edited the "mime type" metadata in the database for each image).

This appeared to work great, improving page load speeds and reducing server space by around 90%.

However I discovered a strange edge case that was leading to the images I'd converted being shown as distorted.

This distortion was only happening in Safari, and only when the object-fit CSS property was being used on the image (see below).

Distorted images

I've tried multiple different CSS edits (there are several entries on Stack Overflow for issues with object-fit in Safari that suggest variations of using height, min-height, scale etc.) but nothing fixed the errors.

Bizarrely, if I download the distorted images from the site and then re-upload them to the Wordpress page, the image displays as expected.

Here are some more things I've found out:

  • The HTML displaying the images is totally valid img tags.
  • I didn't convert all images on the site, and it's only the images I converted that are showing up incorrectly
  • I tried using two different methods of converting the PNGs to JPGs
  • I also tried used a separate app to strip the JPGs of any metadata
  • I've turned off caching on the server (Kinsta) but I'm also getting the issue on my local development server so I don't think it can be a server caching thing.
  • I've tried turning Javascript off the site (I thought the lazyloading js might be causing the issue)

I'm at a total loss as to what could be causing this issue. The fact that it's only happening to images I converted from PNG to JPG - unless I reupload a copy of the image! - has really left me stumped. If there are any ideas, please let me know.

Ben Jackson
  • 529
  • 4
  • 12
  • Are you able to post a reproducible demo? – ralph.m Jul 04 '23 at 11:13
  • @ralph.m I can link to a live example - https://leyf.org.uk/parents/our-resources/page/5/ (this will only be available relatively temporarily though as the issue is being fixed manually). – Ben Jackson Jul 04 '23 at 13:48
  • Are you saying this definitely didn't happen when the imgs were pngs? And have you tried to extract the relevant code (which seems to involve a srcset and, confusingly, has both aspect-ratio and both width and height settings? – A Haworth Jul 04 '23 at 19:47
  • @AHaworth It definitely didn't happen when the images were pngs. And weirder still, if you "Save as" the jpgs that are on showing up as distorted and then reupload the same image to Wordpress, the reuploaded image will display perfectly. – Ben Jackson Jul 05 '23 at 09:14
  • I sounds as though some versions of the jpgs were incorrect when they were saved the first time if they are saving OK now (I assume you mean by using the media library in WP). I suppose it's just possible something else odd has happened like the theme's decision on which sizes should be created and saved has changed [I am suspicious of the srcset being used]. – A Haworth Jul 05 '23 at 12:59

0 Answers0