I have a photo that is nearly 3000px in width and in great clarity and sharp detail, in itself. When I upload it to bricks, as a section background, it is blurry and much worse quality than the actual image which I just uploaded.
Since on the left, in the settings where you can choose different sizes of the image, the largest one which is called “Full” is actually only allowing 1920x1080, my guess is that some kind of compression is happening to squish my original photo into 1920, and that’s why it’s blurry.
BTW this also happened when the original photo is 2000px in size, not just huge ones like the 3000px.
How to prevent Bricks for blurrying my otherwise sharp and high-quality photos?
It sounds like Bricks is compressing or resizing your image when setting it as a section background, which can reduce quality. Here are a few ways to prevent blurriness and keep your high-quality photos sharp:
Use WebP Format – Try converting your image to WebP before uploading. It provides better quality at smaller file sizes, reducing the chance of compression issues.
Check Theme Settings – Some WordPress themes (including Bricks) have automatic image optimization settings. Go to Bricks Settings and look for any compression or resizing options that might be affecting background images.
Manually Set Image Size – Instead of relying on the “Full” size option, manually upload and insert the original image at its full resolution (e.g., 3000px width).
Disable Lazy Loading for Backgrounds – Some lazy-loading settings might cause images to appear blurry, especially background images. Try disabling it for testing.
Upload the Image via CSS – If Bricks keeps compressing the background image, you can upload it separately to your media library and set it as a background using custom CSS instead of the Bricks interface.
Since Pure7Studios, specializes in photography, maintaining image quality is crucial. Ensuring sharpness in website images helps showcase your work in the best light, just like in a printed portfolio!