2

I have a JPG which was saved as progressive using GIMP. When I check the JPG using online tools it shows as progressive. However the image always loads baseline

In CSS this JPG is set as a background-image with a linear-gradient over it.

background-image: linear-gradient(
      to bottom right,
      rgba(0, 0, 0, 0.7),
      rgba(0, 0, 0, 0.2)
    ),
    url(../images/coverpage.jpg);

Removing the linear-gradient makes no difference, it still loads baseline.

Other threads on this topic have the issue where the progressive JPG just doesn't load and then suddenly appears. However in my case it loads baseline (rather than not loading and appearing).

Any help or suggestions would be much appreciated. I've run out of ideas on this.

Please see below codepen example. I've left the image completely uncompressed to help see the baseline load.

https://codepen.io/AndyH2020/pen/GRNJRrq

Thanks

Andy

Andy
  • 919
  • 2
  • 9
  • 22
  • 1
    What browser/OS are you using? And could you put up a snippet with your image so we can see for ourselves? – A Haworth Feb 01 '21 at 17:15
  • @AHaworth Using both Chrome and Firefox. Operating system of server is Ubuntu 20.04, my machine is Windows 10 I have added a codepen with the image trying to show the issue. Much appreciate your help – Andy Feb 01 '21 at 18:15

0 Answers0