Why are my images blurry or stretched

When working with images in Beaver Builder, there are several considerations to keep in mind to avoid stretching or distorting images. Stretching the image can make it look blurry and out of focus. And if the image stretch is done in just one direction, for example only stretched vertically, it can create a distortion in the image.

Below you can see the effect of mandating an image resolution that is greater than the true resolution of the image. The image shown on the left has a true resolution of 150×150 px. However, the default size (which would be 150×150 px) has been overridden with a manual size of 400px. What happens in a case like this, where the actual image resolution is less than the mandated resolution, is that the image is expanded to fill the mandated resolution causing the image to appear blurry.

In the case of a stretched image, this occurs when the image is not sized proportionally. In the example below we take the same 150×150 px as in the previous example, but instead of adjusting the width and height proportionally, the image maintains the 150px width but the height is forced to 300px. This causes the image to be stretched and distorted.

1. Using an image that is too small for the display space.
2. Optimizing the image loosely (applies to blurry images.)
3. Not maintaining the original image proportions.

1. Image Size and Container:
   • Image Size: Make sure to use an image resolution size that is at least the size of the image that you want to display. Don’t try to force a smaller resolution to a larger resolution. However, don’t fall into the trap of loading the largest image size you have. Rather, try to pick an image size that is equal to or just larger than the image size you want to display.
   • Setting Container Size: To avoid stretching images, it is often recommended to set the size of the container element rather than the image itself. This approach ensures that the image is resized proportionally within the container. For example, if you want to display an image at 50% of its original width, you should set the width of the container element rather than the image[1].
2. Responsive Images:
   • Using max-width: When using CSS to adjust image sizes, using max-width instead of width can help ensure that images shrink proportionally on smaller screens. However, be cautious not to override the max-width: 100% rule that Beaver Builder applies, as this can break responsiveness[1].
   • Responsive Background Images: If you are using background images, the Beaver Builder Responsive Background Images feature (now integrated into Beaver Builder Core) allows you to set different images for various screen sizes, ensuring that your images look good across different devices[3].
3. Full-Width Images:
   • Full-Width Rows: To display images full-width, you need to ensure that the row containing the image is set to full width. This involves setting the row settings to full width and adjusting the content width and padding accordingly[4][5].
   • Image Dimensions: For full-width images, it is recommended to use images with a width of at least 1920px to ensure they look good on larger screens. However, using images wider than necessary can increase loading times, as the entire image file will still be loaded[2].

• Use the Right Image Size: Upload images at the desired maximum width to avoid unnecessary loading times.
• Set Container Size: Adjust the size of the container element to control the image size.
• Use Responsive Settings: Utilize Beaver Builder’s responsive features to ensure images look good across different screen sizes.
• Avoid Overriding Default CSS: Be cautious when using custom CSS to avoid overriding Beaver Builder’s default responsive rules.

By following these practices, you can effectively manage images in Beaver Builder without stretching or distorting them.

Sources:

• [1] community.wpbeaverbuilder.com
• [2] community.wpbeaverbuilder.com
• [3] sitespot.dev
• [4] www.youtube.com
• [5] www.youtube.com