Guide: Best practices for using images on the forum/web

[LoyceV]

Is there a way to arrange them side by side horizontally?

Post them on the same line, without "Enter"

[Catenaccio]

Is there a way to arrange them side by side horizontally?

Post them on the same line, without "Enter"

Putting them side by side, and adjust the width to be small enough for displaying two or three images horizontally on the same row.

Like two images

Code:

[center][img width=500][/img][img width=500][/img][/center]

Three images

Code:

[center][img width=300][/img][img width=300][/img][img width=300][/img][/center]

and so on.

[hopenotlate]

Post them on the same line, without "Enter"

Did it but didn't work

but  Catenaccio ( awesome nick btw  ) explained why

Putting them side by side, and adjust the width to be small enough for displaying two or three images horizontally on the same row.

Thanks both guys.

[LoyceV]

Did it but didn't work

It kinda depends on the width of your screen compared to the image width And that's also the tricky part: chances are the layout you choose is messed up when someone has a smaller browser than you.

[joker_josue]

Thanks both guys.

Both options are valid, it will depend on the size of the images and in turn the size of the visitors' screens.

A third option is to place the images inside tables. It takes a little more work to organize, but it can allow for a result closer to what you want in almost any scenario.

If you still need it, I can give you more details on how to use the tables for this case.

[hopenotlate]

-snip-
A third option is to place the images inside tables. It takes a little more work to organize, but it can allow for a result closer to what you want in almost any scenario.

If you still need it, I can give you more details on how to use the tables for this case.

While writing this post I had a feeling that using tables could be a way to make images appear side by side ( I wanted to show old version beside new one), and I even tried using the appropriate button and checking the preview, but after three/four times when the result wasn't what I wanted, my lazyness made me give up.
I'd appreciate it if you could show me how to do it when you havesome spare minutes.

[joker_josue]

While writing this post I had a feeling that using tables could be a way to make images appear side by side ( I wanted to show old version beside new one), and I even tried using the appropriate button and checking the preview, but after three/four times when the result wasn't what I wanted, my lazyness made me give up.
I'd appreciate it if you could show me how to do it when you havesome spare minutes.

Is this what you wanted to do?

old one		new landing page
old		new

I combined using the table and adjusting the image height. Then I made a small adjustment to improve the aesthetics.

Code:

[table]
[tr]
[td]old one 
[img height=300]https://www.talkimg.com/images/2026/03/17/UkbgQ8.png[/img][/td]
[td][nbsp][/td]
[td]new landing page
[img height=300]https://www.talkimg.com/images/2026/03/17/Ukb5RD.png[/img]
[/td]
[/tr]
[tr][td][nbsp][/td][td][nbsp][/td][td][nbsp][/td][/tr]
[tr]
[td]old
[img height=300]https://www.talkimg.com/images/2026/03/17/Ukb8Kw.png[/img][/td]
[td][nbsp][/td]
[td]new
[img height=300]https://www.talkimg.com/images/2026/03/17/Ukbif3.png[/img][/td]
[/tr]
[/table]

[hopenotlate]

Is this what you wanted to do?

This is exactly how I wanted my post to look, thanks for taking the time to show me how to do it.

I still have a doubt anyway (yes I know I've been on this forum for so long nevertheless I still ask noobish questions, shame on me) related to that   

Code:

[nbsp]

command I can see in the code you posted : what is it about?

[TypoTonic]

I still have a doubt anyway (yes I know I've been on this forum for so long nevertheless I still ask noobish questions, shame on me) related to that   

Code:

[nbsp]

command I can see in the code you posted : what is it about?

It's the bbcode tag for non-breaking space, joker_josue used it to separate the images. You can technically use regular spaces, but it might cause unwanted line breaks that would mess up the table when displayed on smaller screens. That's why he used [nbsp] instead, to make sure that the table's formatting stays intact. You can also refer to this post by PowerGlove:

A non-breaking space is a way to prevent a piece of text from "breaking" into multiple parts when there's not enough room for it to fit comfortably. This can be useful when formatting tables