Nowadays there are practically no websites that do not contain graphic elements. Any resource, even if its purpose is purely textual information, will be at least somehow decorated with graphic elements - you can’t do without buttons, icons and a logo.

In this article we will talk a little about how graphics influence website building and what role it plays in this global process.

Agree, this topic is very multifaceted, but we, to the best of our ability, will try to be concise. This article is intended primarily for novice webmasters - every year there are more and more such characters. And this makes me happy.

So, let's begin our story.

Even if a person is not fed for a while, he will still want to look at the pictures. This is how the human psyche works and our eye, obeying the laws of nature, always strives to find an image or pattern on a white canvas. In web design, this function of the human brain - the desire to find a meaningful image - can be used in different ways.

For example, you can make websites that will generate good income, due to the fact that people visiting them will start clicking on colorful and tempting pictures - each click is a transition and for it the webmaster receives a small amount of money. Well, if there are a lot of such transitions, then a small amount of money will eventually become very big.

But let's not get ahead of ourselves and focus only on the fact that any image (be it a picture or a design element) is nothing more than a catalyst for attention on the part of the visitor. Properly selected graphic objects in their entirety can do a lot of positive things.

Let's look at the basics of using graphics on the web, so to speak..

Without a doubt, graphics are the mechanism that improves your website.

However, it should be remembered that graphics are not only design, but also content - sites with graphic content, by the way, are the most popular on the web (you probably guessed that we mean pornography and everything connected with it). As we already said at the very beginning of our article, there are no sites that do not involve graphics in one way or another.

If we talk about text sites(for example, such resources, the basis of the content of which are articles), then graphics primarily serve an infographic role. This property of a graphic is demonstrated when it becomes not just part of the design, but part of the published material. Having become an integral part of the publication, graphics attract the reader’s attention no longer as a “picture” - they become a source of information that is in no way inferior to text. In this case, we are talking about graphical diagrams and charts.

There are more complex species information graphics.

For example, timelines and other dynamic photographic materials that are designed to help the reader fully understand the situation existing at a certain moment.

Now let's look at another option - graphics as the basis of content.

In this case, graphics completely cease to be an addition - their function begins to play a decisive role and the traffic that comes to the site is completely subject to the dynamics of updating the graphic content. As an example, you can cite one of the photo blogs - however, you probably yourself know their addresses. Alternatively, the famous project Flickr.

Well, now about one more positive thing that the correct use of graphic content can give your site.

Do you know that when users first visit a website, they read it diagonally?

This is a completely natural reaction of the human eye to something new - the eye tries to find a clue, the essence, and then begin a detailed study of the content presented to it. Based on this feature of human behavior, cunning marketers have developed many techniques through which a person begins to show remarkable activity in terms of buying something.

But we digress.

It’s clear that graphics have a better chance of attracting attention than text. Especially if it is interesting and directly relates to the topic of the article. Thus, the conclusion suggests itself - using images as illustrative or additional material to the main block of your content (most often this is text), you have a better chance of holding the reader’s attention for a long time.

Another positive aspect of using graphics is attracting visitors from search engines.

You may have a completely natural question - what does search engines have to do with it? After all, search robots have not yet been invented that could scan an image and draw conclusions regarding what exactly is depicted there (a tree or, for example, a person)!

Of course - there is no dispute here. Such technologies have not yet been invented (but scientists, by the way, are already working in this direction). However, if you correctly surround your picture with relevant text, then the search bot will definitely guess what is shown in the picture. Don't forget to use the tag alt=" "- Spiders love to read what is written there.

The traffic that comes to the site from search engines that search for graphics is very large - you should never neglect it. There are several publications on our website that directly relate to search engine optimization graphic objects - we recommend that you familiarize yourself with them! For example, here is an article devoted to the technology of optimizing images for search engines.

Well, now a few words about the negative that can arise if graphics are used incorrectly.

Of course, this refers to the image size factor. As you know, any image in electronic form weighs a certain number of bytes, and the webmaster’s task is to make sure that this number is smaller, and the image quality remains as high as possible.

It should be remembered that, despite the fact that many network users currently use broadband Internet, there is still a considerable percentage of people who do not have such a benefit. Many people still access the network via dial-up modems! There is another reason that makes you pay attention to the compression of graphic objects - this is the use mobile Internet, which is not as fast as DSL or fiber optic.

Let's summarize.

Based on the above, we can say the following - you should not only use graphics in web design (without graphics!), but also wisely. Earning money online will depend not only on how many incoming links you receive to your site. The main thing is how you will keep the visitor there.

Graphics are one of the tools that you should definitely use.

site content- articles about the nuances of filling your site with various materials

Graphics are widely used on the Web. It is known that one small picture can replace a whole page of text. Web designers tirelessly improve and even compete in the design of websites, and in the information content of Web pages graphic information occupies an increasingly important place.

The main feature of graphics in Web design is that it is usually adjacent to text information and interface elements (buttons, switches, etc.), and this proximity must be taken into account when creating images. The main purpose of graphics is to draw attention to the Web page as a whole or to its individual fragments, as well as to present information that cannot be described in words. In other words, graphics are used both to design the page and to present information (illustrations). It can both significantly help the visitor understand the information, and vice versa, confuse him and make texts difficult to read. Graphic design of a Web site is a delicate matter that requires taste and a sense of proportion. Poor graphic design of a website can simply scare off visitors. At the same time, you need to remember that visitors return to the site again and again thanks, first of all, to its information content, and not to its beauty. So the developer graphic design site is not just a free artist. He is closest to an architect.

Another important feature of Web graphics is the rather strict restrictions imposed on the size of files. And this is due not so much to saving computer disk space, but to throughput communication channels. Currently, the vast majority of Internet visitors use a modem connection to the server. Today, the most powerful modems provide data transfer rates of 57,600 bps (about 6 KB/s). Many people use modems with a performance of 33,600 bps or lower. If the Web page takes longer than 10 seconds to load into the browser. this irritates visitors who may leave for another address without waiting for the download to finish. It follows that we must strive to ensure that the Web page does not exceed 50-60 KB in size. For graphic images This is a rather serious limitation that requires special knowledge and skill from designers. In particular, you need to have a good understanding of file formats and how to assemble images into a Web page.

The third feature of graphics is that in the world there are computers built, as they say, on different platforms. So, there are computers on the PC platform and on the Macintosh platform. The monitors of these computers have different brightness. If this is not taken into account, then the same picture, which looks great on one monitor, may lose its expressiveness on another. Therefore, an artist engaged in Web design or simply publishing his works on the Internet must take this circumstance into account and be able to adjust his monitor.

A web page is dead without graphics. Graphic images are used to illustrate texts. But users began to get tired of waiting tens of minutes for some page to finish loading, which they looked at to find out the current exchange rate of the dollar against the German mark or find out the weather forecast for tomorrow. Therefore, the issue of graphics volume has become urgent.

Graphic components of Web pages can be divided into three broad categories according to their purpose:

illustrative graphics, including photographs, explanatory drawings, drawings and diagrams supplementing the text,

functional graphics, which represent site control elements (navigation buttons, counters and interactive form elements) and, finally,

decorative graphics - page design elements included in it “for beauty” and not carrying an information load (background images, separator lines, headers made in the form of graphic files, and much more).

GIF graphic format

Back in 1978, two Israeli researchers Jacob Ziv and Abraham Lempel developed a fundamentally new for that time information compression algorithm without data loss, which, without further ado, was given the name derived from the abbreviation of their own surnames and the date of completion of their project : LZ78. Information about the principles of constructing this algorithm was publicly available, and a few years later the American programmer Terry Welch improved it, added the first letter of his last name to the designation and patented a new algorithm called LZW, also making his development available for use by everyone.

One of these “wishers” was CompuServe Inc. employee Bob Berry, who took LZW as the basis for the fundamentally new graphic format GIF (Graphic Interchange Format) he created in 1987. Created by Terry Welch, Unisys, which owned the copyright to the LZW algorithm, charged for its use only from manufacturers of computer hardware in which it was used. this standard, for example, from modem manufacturers. Developers software There were no “commission fees”.

However, in the winter of 1994, Unisys, which began to experience financial problems, declared LZW a commercial standard, the use of which required payment. This automatically made GIF the world's only "paid" graphic format, which caused a wave of discontent among Internet users, since almost all modern Web sites use GIF elements in one way or another. Nevertheless, GIF is extremely widely used on the Internet even now, and users are not required to pay anyone for the opportunity to place an image on their page in this format, since the financial claims mentioned above concern, first of all, manufacturers of software that works with GIF. The situation with the future fate of this standard still remains unresolved.

Thanks to the capabilities of the LZW algorithm, the GIF standard allows you to significantly reduce the volume of the final graphic file compared to the original image. This is achieved by mixing similar shades into one. If, for example, the picture contains a section consisting of several similar halftones, for example, blue, light blue and dark blue, they will be encoded with one shade - blue. Information about an image in a GIF standard file is written line by line, that is, it is an array of line descriptions one pixel high. It is this property of GIF, as well as the fact that this format operates with a fixed, so-called indexed palette, and the number of colors in this palette does not exceed 256, was the basis for the appearance of two simple rules, used in modern Web design. Here they are.

ATTENTION The GIF standard is used in HTML documents only to display so-called business graphics: diagrams, logos, buttons, dividing lines, and other page design elements. To post photographs, reproductions of paintings and images with a large number of colors and color transitions on the Web site, the JPEG standard is used.

In a simplified form, this law of “Web mastery” can be formulated as follows: if the image is hand-drawn, it should be presented in the GIF standard; in all other cases, it is better to use JPEG.

ATTENTION When preparing a drawing for saving it in GIF format, it is necessary to avoid the following artistic techniques: gradient fills, blurs, gradual color transitions with many shades, as well as graphic filters that provide uneven mixing of several colors in one area of ​​​​the image, for example, effects of changing the intensity of lighting, such as editor's "highlight" filter Adobe Photoshop.

This rule is dictated by the fact that the algorithm for replacing similar shades with one in GIF format does not always work correctly. It would probably be more correct to say “it almost always works incorrectly.” Therefore, areas with many different shades in a small physical space of the drawing will appear blurry and "dirty" after saving the image in the indexed palette. You can avoid this by using solid and contrasting colors in your illustration whenever possible. One of the remarkable properties of the GIF standard is its unique feature, called by the developers “interlace”, or, in Russian, “interlacedness”. It allows you to download an image from the server to the client browser not entirely, but in parts, and the procedure for reading the file is as follows: first, the first, fifth and tenth lines that make up the image are displayed on the screen, then the second, sixth and eleventh, etc. Thus In this way, the illusion of a gradual loading of the graphic element is created for the user: the picture seems to slowly “appear” on the page, which is sometimes very useful when including large-sized images in a document - psychologically, it is easier for the viewer to wait for the illustration to be fully drawn than to be bored in front of a blank screen for several minutes. In addition, even before the file is fully loaded, the user can evaluate the approximate contents of the picture and decide whether he should wait for it to be fully rendered or not.

A few years after the creation of the GIF standard, in 1989, CompuServe released a new version of this graphic format, called GIF89a. This modification includes two more unique features that are widely used on the modern Internet. The first is called “transparency” and involves creating a transparent background for an image by saving the so-called alpha channel, which is a transparency mask of the image, along with the file. Colors marked as transparent in the alpha channel will become invisible in browsers and most other image viewing programs. This function is necessary, for example, when placing pictures of irregular geometric shapes on a page with a complex background pattern, when it is not possible to correctly “fit” parts of the images to each other.

ADVICE Remove unnecessary background from GIF file You can use the built-in procedure of the Adobe Photoshop graphics editor. To do this, you need to select the “export” item from the “file” menu, select “GIF89a” among the proposed options and in the window that appears, using the “eyedropper” tool, specify the colors that you no longer need.

Another useful feature of the GIF89a standard is that this format allows you to store multiple different images, showing them on the screen sequentially one after another, with the ability to specify the order of their alternation and the time interval between frame changes. It is on this principle that GIF animation, which is very common on the Internet, is built, which we will talk about in more detail in this lesson.

Human perception of color is based on the reaction of the visual system to exposure to light of different wavelengths. White light is complex light, consisting of rays of different colors: red, orange, yellow, green, blue, indigo, violet - this decomposition is called spectrum. If white light falls on a white object, then all the components of white light are reflected from it, and we see the white color of the object. If white light falls on a green object, then all components of the light are absorbed by the surface of the object, and only the green component is reflected, as a result of which we see the green color of the object. The same thing happens with other colors: red, blue, green, etc. If light falls on a black surface, then all components of the spectrum are absorbed, and we see a black object. Thus, the color of objects around us is obtained by subtracting individual spectral components from white. This method of obtaining color is called "subtractive (subtractive) synthesis" .

However, if you look at the monitor screen through a magnifying glass, you can see that the color of any point on the screen (pixel) is formed from three luminous points different colors: Red ( R), Green ( G), and Blue ( B). Since in this case we are not dealing with reflected light, but with a luminous screen, it is not the subtraction of components from the main color that occurs, but the addition of the colors of the light rays. This color mixing model is called additive. Black color in this case is obtained if none of the three color components is involved. White color is obtained by mixing pure radiation of three primary colors (red, green and blue) of maximum brightness.

It is used to form images on monitors, TV screens, and projectors. additive color scheme RGB (R ed, G reen, B lue). Any color on the screen is obtained by mixing the components of red, green and blue colors of varying intensities.

Working with graphic editors, we encounter other color models.

CMYK color model designed to work with reflected color, i.e. is subtractive. The color components of this model are: cyan (Cyan), magenta (Magenta), yellow (Yellow) and black (BlacK). Cyan, magenta, and yellow are created by subtracting the RGB primary colors from white. Black color is specified separately, since it is technologically impossible to obtain black color by mixing paints. The cartridges of modern printing devices contain inks of these four colors. In computer graphics, the CMYK model is used to prepare printed documents.

HSB color model
Systems RGB colors and CMYK are due to limitations imposed by the hardware (computer monitor in the case of RGB and printing ink in the case of CMYK).
The HSB color model is the most convenient for humans, because... it fits well with the human model of color perception.
The components of the HSB model are:

• tone ( H ue)
• saturation ( S aturation)
• color brightness ( B rightness)

Web technologies have become firmly established in our daily lives. We spend quite a lot of time on the World Wide Web - watching news, shopping, communicating and working. The Internet services and entertainment industry is rapidly developing, leading software developers are improving support for 3D graphics in their products. Traditionally, its support was limited to high-end computers or dedicated gaming consoles, and programming required the use of complex algorithms. However, thanks to the growth in productivity of personal computers and the expansion of browser capabilities, it has become possible creation and display of three-dimensional graphics using web technologies.

Unlike other 3D graphics technologies (such as OpenGL and Direct3D), WebGL is designed for use in web pages and does not require the installation of specialized extensions or libraries. One of the advantages of WebGL is that applications are designed like web pages, meaning the same program will run successfully on the most different devices(for example, on smartphones, tablet computers and game consoles). This means that WebGL will have an increasing impact on the developer community and will become one of the main graphics programming tools.

Advantages of WebGL

With the development of HTML, developers were able to create increasingly complex web applications. At the dawn of its development HTML language offered only the ability to display static content, but with the addition of JavaScript support, it became possible to implement more complex element interactions and display dynamic content. The introduction of the HTML5 standard allowed for new features, including support for two-dimensional graphics in the form of a canvas tag. The creation of WebGL technology made it possible to display and manipulate 3D graphics on web pages using JavaScript. With WebGL, developers can create completely new user interfaces, 3D games and use 3D graphics to visualize various information. Despite its impressive capabilities, WebGL differs from other technologies in its accessibility and ease of use, which contributes to its rapid spread.

Browser support

IN present moment WebGL is supported by the following browsers:

Desktop browsers

• Mozilla Firefox (from version 4)
• Google Chrome (from version 9)
• Safari (from version 6, WebGL support disabled by default)
• Opera (from version 12, WebGL support disabled by default)
• IE (from version 11, for other versions you can use third-party plugins, for example, IEWebGL)

Mobile browsers and platforms

• Android browser (supports WebGL on some devices only)
• Opera Mobile (starting from version 12 and only for Android OS)
• iOS (full support from version 8.1)
• Firefox for mobile (from version 4)
• Google Chrome for Android (from version 25)

Benefits of using WebGL:

• Cross-browser compatible and not tied to a specific platform. Windows, MacOS, Linux - none of this matters, the main thing is that your browser supports WebGL.
• Usage JavaScript language, which is quite common.
• Automatic memory management. Unlike OpenGL, WebGL does not require any special steps to allocate and clear memory.
• Because WebGL uses GPU on a video card (GPU), this technology is characterized by high performance, which is comparable to the performance of native applications.

History of creation

Most common display technologies computer graphics on personal computers are Direct3D and OpenGL.

Direct3D is an integral part of the Microsoft DirectX technology package.

An alternative technology, OpenGL, due to its openness, has become much more widespread. OpenGL implementations are available for various operating systems and hardware platforms. The OpenGL specification was developed by Silicon Graphics Inc. and published as an open standard in 1992. Technology has had a huge impact on the development of 3D graphics.

WebGL has its roots in OpenGL, but it cannot be called a direct descendant. The direct prototype of WebGL is considered to be OpenGL ES (for Embedded Systems), created in 2003-2004 and updated in 2007 (ES 2.0) and 2012 (ES 3.0). Go to OpenGL versions 2.0 was marked by the appearance of a new important feature - support for software shaders. This support was carried over into OpenGL ES 2.0 and became a core element of the WebGL 1.0 specification.

In early 2009, the Khronos Group (a non-profit industry consortium formed to develop, publish and promote various open standards) established working group WebGL and started the process of standardizing WebGL based on OpenGL ES 2.0. In 2011, the first version of WebGL was released under his auspices. However, in June of the same year, Microsoft expressed its concerns about the security of WebGL technology, citing excessive hardware access rights and unreliable security mechanisms. Mozilla Vice President Mark Shaver dismissed Microsoft's criticism, calling the concerns exaggerated. At that time, Microsoft had its own 3D web technology, Silverlight 5, based on the same principles as WebGL, which, nevertheless, the corporation considered quite reliable. Later, Microsoft changed its attitude towards WebGL technology, implementing its support in its browser Internet Explorer 11. Apple has decided to support WebGL in Safari browser at the WWDC conference in 2014.

Overview of frameworks for WebGL development

WebGL technology uses a low-level API; this aspect makes it easier for browser developers to implement the technology into their products, but creates quite a lot of difficulties when creating interfaces. Large quantity time and effort was invested in the development of libraries, frameworks and third-party software, which simplified the work of website developers.

A fairly well-known library for developing applications using WebGL. The library is focused more on dynamic scene changes. However, the latest changes to the repository date back to 2014, so there are reasons to doubt the relevance of the library today.

Partial list of functions:

• Stop motion animation
• Supports general lighting, directional lighting (spot) and point lights
• Normal map support
• Animating materials
• Skeletal animation
• Collada format support
• Displacement map support
• Rendering text
• Fog
• Shadow depth
• Environment maps
• Reflection/refraction
• Animation Collada
• 2d filters
• Culling - removing hidden parts of the scene from the processing process
• LOD support - object levels of detail
• Physics

Three JS library

The most popular and actively developing library today. Detailed and accessible documentation and a huge number of working examples make this library one of the leaders among similar systems.

Partial list of functions:

• Renderers - Canvas, SVG or WebGL
• Add and remove objects in real time
• Fog
• Perspective or orthographic cameras
• wireframe animation, various types kinematics, frame-by-frame animation
• Several types of light sources - external, directional, spot
• Throwing and Receiving Shadows
• Shaders (GLSL)
• Objects - meshes, particles, sprites, lines, skeletal animation and so on
• Many preset geometry types - plane, cube, sphere, torus, 3D text and so on
• Active modifier support - fabric, extrusion
• Ability to load multiple data types - binary, images, JSON and scene
• Export and import of Blender, openCTM, FBX, 3D Studio Max and Wavefront objects .obj file

Babylon JS library

Library with open source code to create full-fledged 3D applications and games that run in a web browser without using third-party plugins and extensions. Babylon JS is close in its capabilities to ThreeJS, but it has some built-in functions that are not available in Three JS out of the box. These nice features include the built-in physics engine oimo.js - a fairly simple way to create a realistic landscape using a height map. Of course, three js also has such capabilities, but they are implemented using various additional applications. However, for the functionality of the library you have to pay an immodest weight of 800 kb.

List of functions:

• Scene - use of ready-made meshes, fog, skyboxes
• Physics engine (oimo.js module)
• Smoothing
• Animation engine
• Sound engine
• System of particles (particles)
• Hardware scaling
• LOD support
• Automatic scene optimization
• Debug panel
• 4 lighting sources - spot, all-round, spotlight and realistic
• Custom materials and shaders
• Wide range of texturing options
• Glare
• 9 types of camera, including touch control
• Exporters for 3ds Max, Blender, Unity3D, Cheetah 3d
• Height map

The increasingly active introduction of computer graphics into the daily activities of users requires developers to master new horizons. Of course, different tasks require an individual approach to application implementation. The libraries presented in this article are just the tip of the iceberg.

Each developer can choose a library for their specific needs - some care about skeletal animation, others about realistic lighting or physics, and some are truly orthodox professionals who don’t recognize anything other than the purest WebGL API and write shaders in a notepad. However, everyone is united by the desire to create high-quality, lightweight and productive web applications that actively use the capabilities of 3D graphics.

Bluetooth