Why do computer images have to be rectangles?

You can use transparent gifs which allow part (or all for that matter) of the image to be invisible, so whatever is under the transparent part of the image will be visible. These are used widely on web pages. That would allow you to better use the space in a rectangular image.


“The truth does not make a good story; that’s why we have art.”

The answer is they can, but typically there isn’t much need in most applications so all the most common formats are rectangular (gif, jpg, bmp, etc). If a programmer needed a round format for his application it is easy to build (I have done it so I don’t see why anybody else couldn’t), but of course those images would be non-readable in other applications.

Wow, thanks for that news flash! And to think, all these years I’d been doing transparent gifs and not realizing why!

:rolleyes:

The issue is not the appearance of the image. That is simple to do with transparency.

The issue is page layout. The relationship between text and images, or images to each other. I’d like to put other things in the dead space. Not just have the dead space.



I have over 2000 posts, dammit! Show some respect.
O p a l C a t
www.opalcat.com

I think what Opal really needs is a “wrap map” feature in HTML. This would allow you to apply a map to a rectangular image that would define its edges for word wrapping by the browser. Basically the same as the way you apply an imagemap, but with different functionality.

P.S. Browser developers, you must pay me a royalty for using this idea. evil laughter

That would solve about 85% of the problem, Thwack :slight_smile:



I have over 2000 posts, dammit! Show some respect.
O p a l C a t
www.opalcat.com

Hang in there Opal, some of us know what you’re talking about. I assume it’s just a matter of time before someone writes some code that can handle non-square coordinates. Someone did it years ago for page layout apps! How hard could it be?

::running for cover from irate programmers::

Of course, we’ll need a new graphics format that can BE non-square…not counting transparency.

Ok how about this, call it an “edge map” instead. :stuck_out_tongue: The map would define the edges of the image as needed for any placement in relation to all other objects on the page, not just text.

P.S. Browser developers still need to pay royalties for this revised idea. :smiley:

      • This is only a guess, , -but as far as I have been able to figure (without actual education in 32-bit programming) the Windows operating system places graphics by locating the upper left corner and the lower right corner - the same way it locates Window boundaries. (Some software uses the lower left and upper right but it gets converted somewhere along the way before it is really used) Note that there is no method in the MFC to support round or triangular “true” Windows: Windows are always rectangular with 90-degree corners. I have never heard of any way to get MSWindows to display “real” windows (or graphics) shaped other than rectangular. I think that it would make for a tremendously cool virus, though. - MC

No need to be snippy. I don’t know what you know and don’t know. Why don’t you develop a damn Java applet then if you are so unhappy with HTMLs restrictions and manipulate things however you want. You can wrap text around a CIRCULAR image, do whatever you want then.

“The truth does not make a good story; that’s why we have art.”

      • I can’t see how anything would be easier than 90-degree rectangles, oriented with the screen’s scanning method. With rectangular screens and images and knowing only two opposite corners, it is fast and easy to find the image borders and test for them every time a row of pixels is displayed.
  • With any other shape, you would need screen positional data on every bounding pixel used because you couldn’t assume where it would be, and you would need pixel row length data, to know if you had stopped short of the image boundary or gone over it. Software could manage all this, but showing odd-shaped images would require much more data and processing than the rectangles we have now. - MC

well actually there sort of is…

you can you use style sheets, which most modern browsers support. you can make your rectangular image layer 1, and the text layer 2. the text would overlap the image.

you can make the text line up flush with the curve of the circle that way.

(and if you already know this, then uhh, i’ll just go over here…)

I think anyone who could answer this is being boggled by why anyone would want to do it.

I see Opal’s point, but it still just doesn’t seem right… I mean graphics are rectangles, they’ve always been rectangles. If you need a different shape, you make a rectangle and cut out the bits you don’t need.

Working with round images would be a utter pain in the ass from a programming standpoint. As such, it is unlikely to be implemented anywhere that doesn’t demand it.

Actually, I just thought of how to do an irregular sized graphic format… maybe I’ll write it up and try to get someone to implement it.


http://www.madpoet.com
I am human, and I need to be loved
Just like anybody else does

Exactly, but we CAN’T as it stands. We still have to use those bits.

And yes, I know with layers and CSS and all that other stuff, you can get a similar effect…

As for the Java applet idea, that’s just stupid. Yeah, I want my whole page to be an APPLET. Please. Come back when you have at least this much of a clue about the web —> | |

Anyway, I still think that the positioning wouldn’t be too hard. Just use coordinates based on a rectangle. Just like with image maps.



I have over 2000 posts, dammit! Show some respect.
http://fathom.org/opalcat/showmerespect.jpg
O p a l C a t
www.opalcat.com

Oh, and one other point. Transparent gifs can’t be used for a lot of graphics, because they are limited to 256 colors. Anything photographic should always be saved as a .jpg. [for the web]



I have over 2000 posts, dammit! Show some respect.
http://fathom.org/opalcat/showmerespect.jpg
O p a l C a t
www.opalcat.com

A summary followed by a sermon and another summary:

  1. As long as images are made up of pixels and pixels are located as coordinates on a grid there will be an enormous benifit of simplicity by defining the edge of the image as the edge of the coordinate grid.

  2. While there are benefits, especially in regards to computational power, to have rectangular pixel grids and while most equipment standards now are configured for this type of display - there are no inviolable technological barriers to displaying digitized visual information in fundamentally different ways.

  3. HTML is a standard that works within limitations that are becoming more and more irrelevant to the increasing capabilities browsers. (Just as the limitations of ASCII are nearly irrelevant now)

  4. The use of limited terms arising from standard languages serves, as is evident here, to obscure the fundamental open-endedness of technology. Some people became masters of manipulating ASCII characters to work outside their designed limits, but their achievements are lost as soon as technology levels the barriers.

So, there is a reason why pixels and images “are” rectangles, but certainly no reason that they ‘must be’ so.

Many answers have been suggested, and the best one is that it’s a case of “Not Yet”. It will happen, as HTML and the accompanying languages develop, or browsers evolve a proprietary code that does this.

Until then, use Macromedia Flash. There are almost no limits for what that can do.

Er… apart from the fact that text is an image…


The Legend Of PigeonMan

  • Shadow of the Pigeon -
    Weirdo of the Night

I see what you meant Opal, it’s not really the shape of the image in the file that’s a problem, it’s the fact that the dead space, even if defined as transparent, still affects browsers…

That’s just sucky browsers.

The rectangle is the right way to save the files, it fixes so many needs and creates none that you can’t easily get around with a little work on the application.

What the browser writers need to do it write code that flows text around the visible part of an image, not the whole image.

This comes back to being an application problem, Corel Draw can do it, there’s no reason why Netscape can’t. Except, they’d break the current standard by doing so.

I suppose they could support a new tag, called ‘visible image text wrapping’ or something, which would enable this feature on browsers with the capability, but then you get back to the problem of having two versions of a page because the new one relies on features not everyone has.

It basically comes down to your request being outside of the scope of HTML. If you require pixel-perfect graphics alignment, you’re not the target audience of HTML-based development. Use PDF or something. The HTML standards were designed for ‘pretty good’ output on all computers, not perfect output on a couple.

You have a few choices, make the text part of the graphic, where it flows around the image, or break the round image into many smaller images, to approximate the shape of a circle. I expect you already knew about these two options and were looking for something better - there really isn’t without going to a pluggin, an applet, an active X control, a non-standard browser feature, or a different distribution media (like PDF, etc.)

I’d imagine nobody really thought your circumstances were that important back when they developed the web, so they didn’t bother including support for it. For a long time, images weren’t universally supported…

I have more than a clue about the web, I do it and graphics for a living. Programmers routinely write Java Applets or do flash when they need the graphic precision you want, because you just can’t do it in HTML.


“The truth does not make a good story; that’s why we have art.”

Opal, I’m guessing you are aware of this, but the way to simulate what you want is to cut your image into tiny bits and build a table which contains them. Programs like Macromedia Fireworks will do this automatically. Then you can simply remove the table cells where the image is clear, and the text will flow up to the visible parts.

The reasons for rectangular graphics formats is quite technical, and has to do with encoding algorithms, compression algorithms, etc. Back in the days when graphics were drawn with vectors, it would have been easy to define a shape as a circle. But when you are building a raster shape, using anything other than a rectangle means having some way to encode the length of each line within the image, plus a way of encoding the starting position of each line relative to the last. Huge headache, and the image won’t compress as well.

The better solution is to use a rectangle, but then use an Alpha Channel in the image to define transparent areas. Unfortunately, GIF images don’t support Alpha transparency. PNG images do. It’s more efficient to do it this way even with lots of blank areas around the circle, because blank areas compress down to almost nothing.

As someone else mentioned, when you have an image in the form of a raster, you can perform matrix mathematics on it to do things like rotate it, invert it, etc. Much harder to do with a shape defined as a series of vectors.

So having images of arbitrary shapes would solve one problem (yours), and introduce about a thousand others.