Background overlay loading just before photo
I am using the overlay option to darken the image for my banner. However, it seems like the overlay is always loaded before the image which shows a grey background for a second. Are there any ways to make them load at the same time?
-
Hi,
Unfortunately, we can't reproduce this problem. See here. Could you please check if you have the latest Brizy Free 2.2.10 and Brizy Pro 2.2.7 version? Could you please temporary deactivate all external plugins (except Brizy Free and Brizy Pro) and activate a WordPress default theme? Could you please delete the site and browser cache?
Thank you!
Best regards,
Sandra0 -
Hi Sandra,
Thank you for replying:) At 0:21 of the video (https://imgur.com/a/aA5ZsUe), you can see that the overlay was loaded first but it was fast so it didn’t bother much. It seems to be unpleasant when the image is larger and on a slower host. I’m also using a plugin to optimise the images during upload to make sure it’s not oversized.
If you load on this page, you can see the image loading later - https://staging.sigma-byte.sg/intelligent-building-management-systems/
I’ve also added a filter to disable Wordpress lazy load and the one by the theme (blocksy) is not turn on as well.
At first I thought it might be a default placeholder for the image to load so I can simply change it to white but found out later that it’s the overlay.
So I was wondering if it could load without seeing the grey background for half a second. Perhaps a solution is to not use the overlay and darken the image manually before uploading.
0 -
Hi,
The overlay is something like a layer that is added over the image. The overlay doesn't modify the image itself. For this reason, on the page load, it can not display at the same time with the background image but with a delay of a fraction of a second. If this delay doesn't exceed the normal, it is ok. Also, the difference can be noticed well on the first site loading but when the site is already cached on the browser, this delay is almost not perceptible.
Yes, in this case, if the delay is a bit disturbing even if is only for a fraction of a second, I agree with you and can suggest you not use the overlay and modify the image as darken before uploading it.
Best regards,
Sandra0 -
Thank you. I will modify the images before uploading them.
I am facing another issue relating to the images, the logo. I am taking the logo from this website and uploading it to the new one. This is the highest quality I have at the moment and it does not appear to be as sharp as the one from the old website despite it being the same image. I have tried uploading it without any optimisation/compression plugin but it is still not helping. Also, is there any setting to prevent the image from zooming in/out when resizing the browser?
Update: I managed to get a high-quality logo and replaced it:) It looks good now (still a very slight blur but it is fine). I am still looking for an option to keep the image still; without zooming in/out when resizing the browser.
p.s. This is a separate issue and I would gladly open another post if needed.
0 -
Hi,
To display fine an image we suggest uploading it in the row format therefore without any optimization. At the moment, Brizy has integration with ShorPixel that can optimize the images from the Brizy folder. Therefore, you can use this option.
Also, we recommend checking the image sizes and add them in a container that has a bit lower dimensions. For example, if the image has 200x150px, you have to add it to a container with lower values, e.g. 170x110px. Overwise, the image will strive to stretch to perfectly fit in the container and therefore the image will be look blurred.
Best regards,
Sandra0
Please sign in to leave a comment.
Comments
5 comments