I don’t understand, in which cases should I add it as a background image inside the Container Block?
Or when should I rather use the default image block?
I know, that when using the Container-Block (CB) I have more options regarding spacing, coloring etc. But images look “sharper” using the default image block and it frustrates me to see images via the CB looking bad.
I’d like to learn about typical use-cases about when to add an image via CB-Background-Image, or via default Image Block.
I also find it difficulot to understand, why an image added via CB is looking “blurry” compared to the image block. I have created a demo-site to illustrate the issue I have:
I find the current documentation lacking a good explanation about how to work with images properly and really hope, that you can guide me sustainably.
I don’t like video-tutorials, because they require me way too much time for learning, since I can read faster compared to my listening abilities.
Thank you in advance and kind regards,
I’m so sorry no one ever replied to this. Nice demo page. the image you used for your background container was 300x185 pixels, and because the block was set to cover, it was stretched way beyond 1000 pixels. The image block gives an array, or a list of image sizes, and had a larger image of 780x480 pixels, so it starts with 6.7 times as many pixels to work with. But image blocks don’t stretch to cover a container (they usually fit the container), and so one image probably has 8 times the resolution of the other. If you use an image background, try to size it to fit the largest size you’d display it at, and on both sides. If the container will be a 1,000 pixel box, your landscape image would want to be 1500px by 1000 px so that it wouldn’t stretch while covering the div. Best would be to crop it to 1,000 by 1,000, but i think that’s beyond what you were asking.
Thanks man That makes sense. However, I still try to find out, when it’s best to use the image-block inside the container-block, or apply the images as bg-image
Are there any resources in the docs about all the different use-cases that may occur for this?
Probably not. But in the rest of the HTML world, here’s the difference. An image as a background is good if you want to change the size of the image as a percentage of the screen size, or if you want to place objects, text, etc in front of the image.
An image as an image is better if you plan for it to be a stand alone piece of content. So, what’s your intention? Is it just a background image so your text looks cool, or is it a piece of the web page that you want looked at on its own?
There’s huge benefits to using an image on its own that I won’t confuse you with. Just start with do you want something in the foreground, or on its own.
In addition to what Will said, here is a thread from Stack Overflow discussing when to use an Image and a Background Image: html - When to use IMG vs. CSS background-image? - Stack Overflow
Moreover, Optimization-wise, some image optimization plugins like Imagify currently can’t convert background images into webp format.
With regards solely to editing through the WordPress Block Editor, the Container Block offers more features to alter the look of the image(background image). If you have GB Pro, you may also add effects, and make the Container itself a link.
They have their pros and cons, and there are good points in the thread when and why to use either.
Hope this clarifies.