Displaying Images and Their Characteristics from Websites on Users Computers

Published Online April 2014 in MECS DOI: 10.5815/ijigsp.2014.05.05

“Design must reflect the practical and aesthetic in business but above all... good design must primarily serve people.”

Thomas John Watson, 17/02/1874 - 19/05/1956

One picture is worth thousand words. [1]

Pictures are one of the basic elements of web pages.

When they are used in an appropriate way, pictures are changing arid, pure textual pages into fascinating combinations of text and graphics that make information more understandable and more useful (fig.1). [2]

Figure 1.

Pictures can be realistic, symbolical or abstract. They can be created in any style and with any technique, and then adopted for viewing on the screen. [3]

Attribute "alt" (alternative text) should be added for all pictures in the code on every web page (fig.2). [4] [5]

Figure 2.

That attribute represents some kind of text which can be seen when the cursor is put over the picture. This text gives short description of picture, and furthermore, it allows users with damaged eyesight to understand purport of the picture through special device for reading content of tag "alt". And one more thing, if user had set his browser not to visualize pictures, tag "alt" shows what is omitted. [6]

• II.    STUDY AREA

There are few basic reasons for users of Internet to prefer and look for pictures:

• •    Picture reaches brain before words, making immediate impression. That's why main aspiration in art is pointed towards creating vivid and impressive images, because they are making lasting impressions in human mind.

• •    Good picture evokes associations, directs way of thinking and perception of the viewer towards what author wants to achieve. And with more emotional connotations achieved, author encourages our way of thinking.

• •    Reinforcement of pictures with symbolic accents and motives organizes auditorium way of thinking, evaluates spiritual values, and secures quick identification and fast understanding of author's ideas and messages by the audience.

• •    Effect of the picture is stronger if there are some abstract motives and elements, because that awakes curiosity, assumptions, hypothesis, intrigues, dreams, fallacies etc. [7] [8]

Art and design are more likely to put impressive visual images and effects before verbal stories and messages. People are mostly visual creatures, our mind converts verbal information into mind images that change and grow depending of the words with which descriptions are built. [9]

• III.    RELATED WORK

Images in web pages can be used for many things: as a basic picture (picture can be used in web page the same way like in press - like static picture that is used for decoration or has some information in it) (fig.3), as a link (picture can be used as a link to some other document) (fig.2) and like a way to make more space between lines (fig.4).

Figure 3.

Figure 4.

Designers often use transparent images to control subordination of text or structure of tables. [10]

If one picture is transparent, that means that it has "holes" in it. Holes are parts of picture through which u can "look" partially or completely, and which can be used for combining with other graphical elements. Transparency is used in different graphical contexts. Some file formats are appearing with transparency in the browser (GIF and PNG). Pictures can be completely transparent (GIF - Graphics Interchange Format), or partially transparent (PNG - Portable Network Graphics). Pictures that are saved in JPEG (Joint Photographic Expert Group) file format can't be transparent. [11]

Frames are used to mark the borders of a given picture. They are especially appropriate for photographs with light colored or unclear ends. If frame isn't added, picture blends with background and creates unclear and unfinished image (fig.4). [12]

Size of pictures should be changed before they are put on a web page. That means that pictures should be made with proper size before they are put on website. That way total size of pictures is lowered, same as loading time. [13]

There are lots of different classifications of images on web.

According their location, images can be:

• -    Foreground images. They are on a website on same level with text and other elements - navigation bars, editing objects...

• -    Background images. They serve as wallpapers, deepest layer on which all elements of website are put on. [14]

According computer interpretation of images, there can be:

• -    Raster graphics. In the context of computer processing of images, raster graphics (usually called bitmap) is presenting picture like sum of dots (pixels), put it rectangle matrix called raster. Matrix dimensions define picture resolution. Every pixel can be just of one color. Larger pixels means picture with lower quality (contours are lost, picture has uneven ends). That means more detailed raster matrix should be used, but with that file becomes larger. Bitmap is used for saving photographs and other similar images like digital files.

Because raster graphics are made only of pixels, that means that only pixels can be changed and not separate parts of the image. [15]

- Vector graphics. Called also object-oriented, this is method for presenting computer images by help of mathematic formulas, functions, vectors and other appropriate operators. Additionally information for illumination, perspective and materials can be defined. Vector description is in principle different method for saving graphics information in computer systems. Its advantages before raster method are: low size of output file (but not always), high image quality with different degrees of size, and possibility to use unlimited number of deformations and transformations (rotation, translation, conversion etc.).

Huge advantage of vectors is that images can be changed in size and scale in many other ways without any details lost. Change of size in raster images usually leads to their lower quality. As main disadvantage of vectors we can mention lack of possibility to precisely interpret photorealistic images. That's why many programs use both methods in same time, using both their advantages to make hybrid descriptions. [16]

• IV.    RELATED RESEARCH

• 4.1    Rollover images

Group of images that is important for my research problematic will be also analyzed in this part of my scientific paper.

Rollover effects are widely used on web pages last few years, even if their creating with code writing is very complicated, because it has to be done using JavaScript.

Rollover images are those images that change their appearance when mouse cursor passes over them. They can be made using photographs or graphical images, including web buttons that are used to browse for information on that page (fig.4) (fig.5).

Figure 5.

Rollover effects are done by instructing web browser in which the page is open to change seen picture with second one in the moment when mouse cursor goes over the first one.

When we use rollover effect, it's absolutely necessary both pictures to be with same size. If that's not the case, second image gets distorted (so it can fit in the same place as the first one). Efficient technique is to use same image as a primary, and as rollover. Any way it's necessary to edit rollover image so to be with different colors, or to have some degree of transparency. That way nice effect can be achieved when image is changing.

It's possible to create rollover images with CSS, without using JavaScript.

CSS offers simplified, elegant and sophisticated solution. [17]

• 4.2    Background in web pages

Background in web pages represents basic color (fig.6) or picture (fig.7), on top of which images or texts are placed.

Figure 6.

Figure 7.

Background pictures are not used often. Most websites prefer to use background color. [14]

White color is one of most effective backgrounds (fig.8).

Website background very often is left white, especially on commercial websites where images of products must be well merged with a page.

Figure 8.

Background pictures "form the scene" of web projects by giving the "canvas" on which all other elements are composed. Background images are formed in the browser that puts copies of the image like tiles side by side, as long as window isn't completely filled. Background pictures are usually in GIF files format, but in modern browser JPEG files format can be used too. Basic types of background images are:

• -    Patterns. This background images can span from repeated subtle water marks and relief elements to complex textures.

• -    Vertical bars. Large number of websites use dark vertical bar at the beginning of the page and lighter colored (usually white) central field for basic content. Multiple repetitions in vertical direction form the background of a web page.

Usual backgrounds with vertical bars use just two colors, and more complicated variants add third zone to form non-working, "dead" zone. Backgrounds with textured bars give elegance to a web page.

Vertical bars usually use thin oblique lines or shadows to create three-dimensional effects (they create illusion of a volume).

- Horizontal bars. To form one basic tile for horizontal bar, just two different colored fields are needed. Horizontal bar is used like clear, monochromatic background for navigation and identification images. Thin decorative line or little volume can be added to create an illusion that bar "protrudes" from the page.

Objects can be put along separating line between colored bar and basic (light colored) area to create interesting three colored profile. Infracted type of separating lines offers way out of boring straight lined fields that we can see in most of the web pages.

- Big images. We can use one big background picture that's not made of tiles. To avoid forming of background tile image, picture should be larger than content of the web page in both dimensions. Most effective all-paged background images are made with just few colors. Photograph on whole page like background image makes the file impractical large. Instead, pictures should be used with restricted palette of colors. Commonly used all-page background images are those with water marks and very pale (transparent) figures. [2]

With putting a background with texture and patterns, elegance or respect can be added to the content. Background textures and patterns are mostly used to add color and significance to a document, and not to put an accent on some part of the text.

While designing background image, attention should be turned to this three key factors: main content should be easy readable, overcrowding should be avoided (because in this case, less is more), and edges of tiles should not be visible.

Obligatory is that main content of the page, that's putted over background, to be readable. Information that is on web pages is more important than electronic paper (background) that's used for "printing". Too complicated backgrounds should be avoided, because they can confuse visitors. Simple, effective and without edges backgrounds should be used for web pages.

There should be high contrast between background colors and colors of the elements in the foreground. Saturated textures for backgrounds that make reading hard should be avoided (fig.6). [18]

How important the background is can be seen from how one color can look warmer or colder depending on the background under it. [19]

Even if picture is used for background, color for the background that's showing under picture should be specified. That color will be showed if picture is not available, and also it will be seen in all transparent areas of that picture (fig.7) (fig.9). [20]

If background color is not specified, web page will use standard values for background color from the browser of the user that's viewing the page (usually white). It's recommended always to define background color of the page, because standard values of browsers can be different. [21]

Figure 9.

So, in the same time background color and background picture should be defined for the page. When connection is slow or older web browser is used, it's possible background color to appear first. When background picture loads, it will show up on the screen, covering background color.

Only one picture can be used as a background. In order to use two different designs, they should be transformed in one file on image.

In principle, background images are scrolled together with other elements on the page, but they can also be fixated (fig.10) (fig.11).

Figure 10.

Figure 11.

Fixating is useful when we want to be sure that logos in background will always be visible. In that case, while other content can be scrolled, fixated content always stays in same position. [20]

V. CONTENT

In this part of the scientific paper seven problems that arise from displaying images of web pages of the users’ computers are analyzed.

There are a few solutions for the problems, as well as recommendations which decision when to be made.

• 5.1    Problems with a Speed for Loading Web Pages in

Correlation with Size of Images on Those Pages

Loading speed of web page is one of the main parameters when we use pictures (assessment of which and how many pictures will be used) on that website. Web designers always try to protect their audience from long wait until web page is loading. Because today on internet space everything is just one click away and there are millions of websites with similar topics, users will easy give up waiting for selected website to load and will go to another one with similar content.

One of the key factors for quick loading and displaying of a web page on users monitors is determination which, how many and what kind of images will be used in that web page. There are more ways to speed up loading and displaying of web pages on the user monitors. Here we will see few possible solutions.

One of the ways to do that is to optimize size of graphic files. Less byte will produce faster web pages.

Image optimization is a technique through which part of unnecessary information about colors is removed to produce file with reduced size.

Other way to eliminate same problem is to design website with web pages in multiple levels. Pages of higher levels on given site should contain as much as possible smaller images (thumbnails), because it's not necessary that user can see lot of details in them. They should just give pointers for what's in that same picture with bigger size and better resolution that's on lower level.

If after that user is still interested and decides to use the link to the specialized page (lower level page) he will be able to see that picture in details and in much better version. Those pictures will be very large (from the aspect of amount of data from computer memory), but they will be opened just by users that are really interested to see them in real size and with better resolution, so time needed for them to load won’t be a problem (fig.12) (fig.13).

Figure 12.

Figure 13.

And we should not use very small thumbnails, because then user won’t be able to clearly see things on them and needed effect will be lost.

Thumbnails in web pages can have additional text with them that says that larger variant of same picture can be seen if visitor clicks with mouse on that thumbnail.

Third way to solve this problem is cutting off not so important parts of picture itself. With cutting off, quality of picture maintains, but instead part of the picture as a whole is lost. Very often combination of changing the resolution and cutting off part of the picture is used.

Fourth way to speed up site upload is by using browser cache memory. All browsers have built in function for memorizing or temporarily saving uploaded pictures. All copies of HTML and graphic files are saved in a specified computer folder. That folder is called browser cache (temporary memory zone). When one web page is opened, user sees some picture. When he opens another web page (from the same website) that has same picture, browser shows same image instead of loading it once again.

That largely shortens time needed for loading, which makes loading of the second page of the same website faster. This technique works only if exactly same picture is used with exactly same name (fig.14) (fig.15) (fig.16).

Figure 14.

Figure 15.

Figure 16.

To use this technique, pictures should be saved in one place. If a bit modified version of same picture needs to be used in different places in one same website, picture can be divided in two parts. One part remains identical and it's repeating, and second part (usually very smaller part) is one which contains the difference.

To use this solution, it's recommended to create as many possible same elements on the pages (in this case, picture) in one website.

Very useful way for fast loading of web pages is a method with loading images before time. While loading huge graphics from website, code tag "display" (CSS) can be used to load images from one website before time, while other page is viewed (1). Images will load with first page, but won't be visualized. When second page opens, images will load from memory of users computer, which is way faster than to load it from server on which website is hosted.

#preloadedImages

{ width: 0px;

height: 0px;

display: inline;

background-image: background-image: background-image: background-image:

}

It can be also made with JavaScript (2).

}

It's possible to change size in which one image is displayed on a web page. Using this way, only size of the image visualized on users monitor will be changed, without changing size of that graphics file. Because of that, in this case time for loading that web page will stay same.

• 5.2    Problems with a Speed for Loading Web Pages in Correlation with Number of Images on the Page

• 5.3    Problems with Loading Speed of Second Image on Rollover

• 5.4    Problems with a speed for loading web pages in correlation with size of background image

• 5.5    Problems with Texture in Vertical Bars Used For Background in Web Pages

Large number of images on one web page makes its loading very difficult. It is recommended number of images in web pages to be lowered because of long loading time that it's needed. Using unnecessary images should be avoided, plus all kinds of texts displayed like images (except texts that are so closely connected with an image, that they should be part of that same image file).

If designer after all decides that all those images are necessary on that page, then solution is to choose one of the methods explained before.

With rollover images, when mouse cursor is over the first picture it’s expected that one to be immediately changed and second picture to show up. If internet connection is slow, there is waiting time before second picture loads.

Here the rule is that second picture that will change the original picture always to be loading in advance, to avoid slowing down when web page is downloading. If second picture is not downloaded, user will maybe have to wait, and that makes rollover images senseless. [22]

Whole screen backgrounds feel up browser window with one single image, stretched to the size of the window. Here big problem can be size of background image file. Carefulness should be applied with the size of the file. Very large pictures that can fill up browser window can be quite big in respect of the computer memory which they use. One comparative good strategy is to use small image file with small size and picture to be stretched so it can fill up free space.

Usage of vertical bars for background on web pages is one of the most popular background solutions on the internet.

Usually, two or three colors are used for background, but much more effective are vertical bars with textured patterns. Only small file with vertical pattern is used, and then it's repeated vertically, until whole screen is filled. Here the problem emerges in contact between two consequent interpretations of small textured file. User should not see that there is disruption of texture, and background should be displayed through all web page undisrupted.

Trick for using patterns in vertical bars for background on web pages is mainly to choose textures that will look like undisrupted pattern from top to bottom. Very important while using vertical textured bars is that they have to be long enough to avoid obvious repetition of the pattern, but in the same time with limited file size, so they can load fast. According to that, height of textured pattern depends of the height of disrupted texture.

Very stabile hand is needed to create undisrupted vertical bars with curvilinear contours. Pixels must be even from top to bottom when sheets come together. If that's not the case, disruption on contact lines will be seen.

• 5.6    Problems with Users Monitor Size and Background Image

  Background image is repeating in the browser by default. Same image will be displayed again when user scrolls down or to the right. To avoid repeating of image for users that have larger screens, background image should be big (ex. 1280 pixels wide and at least 1024 pixels in height).

• 5.7    Problems with Displaying the Page without Specifying Image Height and Width

But that often (for the users with smaller screens) gives big unused part of the image, so lot of designers limit their background images to 800 pixels wide, or one better option, they use cascade stile sheet (CSS). Because CSS can limit number of repetition of background image, it shouldn't be too large. Because background image is repeating, it can be just one pixel in height. Usage of one-pixel background image is a little extreme case. Big minus in this case is that visitors of the site should have powerful computer, because browser needs to render background every time when window changes its size or page is scrolled fast. [23]

Well defined tag "img" shows source-image ("src"), width and height in pixels, align and width of contour frame (3).

border = "1"

Although tag "img" can be also used without height and width values, that's not recommended. If height and width are not specified, that slows down displaying of the page, because browser has to wait image to load before it starts to fill up rest of the page around image. When height and width are specified, browser is informed exactly how big rectangle needs to be reserved for the picture, and then it can start to fill up rest of the page around that rectangle with rest of the elements, while picture is loading. That way visitor will have what to look at (read), while process of loading and visualizing of picture isn't completed (fig.17) (fig.18).

Figure 17.

Figure 18.

• VI. CONCLUSION

From the above mentioned it can be concluded that this area is extensive and offers many opportunities for research and analysis. Due to a large number of problems which occur in this area, usually there is not only one correct solution.

For choosing the most appropriate solution a lot of data should be collected for the potential users, their desires and habits, as well as the technical features of their computers and depending on that solution needs to be found. Sometimes, depending on the situation, it is possible to apply a combination of multiple solutions simultaneously.

The decision which, how many and what kind of images will be shown on one website is one of most important decision that will qualify the quality of that site and its esthetics and technical aspects. The need to find appropriate balance between designer visions, users' expectances and technical possibilities is one of most common problems which all website designers meet.

Web designers wishes to create visually perfect site implementing all their ideas and imagination in which images usually are main thing, must correspond with market needs and business expectations of site owner. The other segment of this problematic is users and their needs and requirements from using the Internet. And last are technical parameters and limitations that very often can represent key factor in the decision if and which web site should be visited and used.

Today, when there are millions of sites with the same or similar topics, the downloading time is one of the main parameters when choosing which website to visit.

All these aspects should be considered when deciding which solution to choose to resolve these problems.

The conclusion is that there is no universal solution for all the possible problematic situations in displaying images from websites.

It should also be noted that the abundance of a variety of program languages and codes allows other solutions too, depending on the used languages and codes.

This subject, as well as everything else on Web design, is very progressive. There are various new innovations and opportunities which will undoubtedly produce some other possible solutions for the problems in this science area.