Image Size, Multi-Resolutions

New user.

I placed a Gallery Images with Description. When selected, the image blocks show a size of 263x184. So I make 3 image sizes: 263x184, 526x368, and 789x552. I place these images in a single Bric using the 1x, 2x, 3x resolution Data sidebar.

When I review the page at different break points, in each case other than LG, the image is smaller than the original Bric placeholder. What am I doing wrong?


Hi @Chris-0. This might help you understand better:

Thanks, but no. I read that before and followed it. As I described this method didn’t work for me.

The multi resolution as stated in the docs linked above is about screen resolution not break points. You can add an image to the image well for each break point, by changing the canvas to the break point (drop down option at the top of the screen) and then replace the image in the image well for that breakpoint.

1 Like

Would you mind explaining what you wrote here, I would like to get my head around it. :smile:

@KBConcepts, think about how a Retina display works. Easy example is the change from an iPhone 3 to iPhone 4 when Retina was introduced. The iPhone 4 has 2x the pixel width wise, so 4 pixels are used instead of 1. with a 2x display you get more detail not more space.

eg. a 300px wide image
@1x = 300px
@2x = 600px

Although the 2x is 600px wide, it occupies the same space as the 300px. But shows more detail.

This came about to handle the introduction of high resolution screens.

Found this neat image that shows you.

1 Like

Nice, Pete, ⁣:smile: Thank you taking the time to explain this. Love the illustration.
How the Blocs know what imager to deliver? Is there something in the Code that the devices recognize?

Blocs doesn’t deliver the image, it produces the markup. Your browser displays the image based on the markup.


<img src="yourimage.jpg"  srcset="yourimage@2.jpg x2, yourimage@3.jpg x3">

Do web designers develop 3 different sized images for every image on the websites?

If so, what size should the first, x2 and x3 image be?
<img src="yourimage.jpg" srcset="yourimage@2.jpg x2, yourimage@3.jpg x3">

Example: if I have 1 row with 2 columns, I make just one 1024 × 768 portrait and let Blocs export whatever code it needs to display in the device.

Can I display HTML and CSS syntax for responsive images within Blocs?
Is Blocs exporting the srcset and sizes attributes?

No idea what you are talking about.

:roll_eyes: Thats exactly what happens when you add images to x2 x3 in Blocs. And I gave you an example just above. Seriously dude!! Blocs produces the required HTML. You don’t have to think about it.

Depends on your design, you use the size you need.

I wont comment on this, because previously you just complain that things take too long to do :crazy_face:

There is heaps of information online about this @KBConcepts, best do some searching, and you will find something that explains it well for you.

1 Like

Allow me to quote what you believe, “you have need of patients” :slight_smile:
Please, do not call me “Dude”, that is being disrespectful.

I have been to various website trying to comprehend what is happening, which is why I came up with these questions.

Can I display HTML and CSS syntax for responsive images within Blocs? While I am working within Blocs, how can I look at the code being used, so I know what will be exported?

alt=“A baby smiling with a yellow headband.”
baby-high-1.jpg 1.5x,
baby-high-2.jpg 2x,
baby-high-3.jpg 3x,
baby-high-4.jpg 4x,
baby-high-5.jpg 100x

It is fairly common in my country, its not disrespectful at all. It is the same as calling someone mate. :smiley:

Use the browser inspector in preview you can see all the HTML.

Okay Mate. :slight_smile:
Does Blocs have a built-in Inspector? Please forgive me, I only know of one in the Browser.

In preview there is a very small circle icon top left. That opens an inspector window. It’s the same as the one in Safari.

Thank you, I will check that out.

By the way, I took care of this, by getting a dedicated hosting service. It has all the bell and whistle. :slightly_smiling_face: