Question coder. The pros and cons, layout vs. image

In recent years, many web designers try to implement almost everything using html/css than to use the image.
First rough example might be a button. In one case implemented using sprite or individual images, in the second case with html, that is, using only code.
The second example. So I implemented the animation of the water flow from the tap on the html/css using only a picture of water that moves against the background and creates a very realistic effect. Also, this shell can be completely drawn in Photoshop and paste the picture, but only the animation to implement into html/css.
The third example. More complex and serious. The website "Thematic media". A Flat design is easier to insert pictures in the background section. But the same thing can be created. Yes, it is more difficult.
So, first you realize like. Second, what are the positive and negative sides you see in different cases. Maybe you think it's just nerd stuff, let people load the page a little longer, but to implement this layout is not valid. Welcome any opinions.
PS we are not Talking about beauty. Naturally, complex designs on the mark up on a div-Ah items, we are talking about simple flat designs where this is possible and not too difficult to be realized.
October 3rd 19 at 01:25
12 answers
October 3rd 19 at 01:27
Solution
Buttons and similar - medium-sized - design elements try to make CSS'th...
First, usually weighs less...
Secondly, if tomorrow will come and will say that my green is not enough red in Firebug'e to find and replace color will be easier...
And thirdly, arbitrary font size, it goes back and takes up exactly as much space as required...
Yes, as I wrote above, to operate with layout easier when it is written and not "painted". - Asha35 commented on October 3rd 19 at 01:30
October 3rd 19 at 01:29
Solution
It is strange that nobody told about rendering.
All sorts of CSS3 chips weigh less, but are drawn on the client. And each redraw will force the browser to redraw, and these are your fashionable pieces. Thus, the operation speed of the site is overloaded css3 can be eye noticeable on slower machines — it is not good.
On the other hand, as already talked a lot, repaint the image automatically is extremely difficult, sometimes impossible, to repaint and css3 — no more difficult than to eat a cookie.
You need to seek a middle ground. Do not use newfangled things where they don't need, and try to use wherever it will be useful, even if ie6/7/8/9 will have to make separate styles. They still have to do separately.
Yes, the mention of the slower machines is extremely important. Recently, not very complex css3 animation is terribly slow on the computer of the customer. As for old browsers, I usually try to write so that the old browser was all readable, and can't climb and so on, as for the beauty - omit. For example, make smooth replacement of the background in old browsers this replacement sharp is to explain to the customer that the item is not critical is not difficult. - Asha35 commented on October 3rd 19 at 01:32
In General I agree, but I really liked this phrase: "and repaint css3 — no more difficult than to eat a cookie" - neal88 commented on October 3rd 19 at 01:35
if you have the appropriate tools - Yes. otherwise, simply repaint the picture - Asha35 commented on October 3rd 19 at 01:38
October 3rd 19 at 01:31
Solution
Zadrotstvo. The text makes sense to do a text to indexed. Some effects, if they will look the same - no difference.
But it affects the size, that is, the page loads longer if you use images. Most often. - Asha35 commented on October 3rd 19 at 01:34
but done faster. well, if size is important - then fine. see for yourself in General, it just does not matter. - neal88 commented on October 3rd 19 at 01:37
sometimes I insert a small image right in the css in the form of a data:base64 - Asha35 commented on October 3rd 19 at 01:40
what services/programs you converterwill in this format. How advantageous about the size of it? - abelardo_Nader25 commented on October 3rd 19 at 01:43
the size is not profitable, and the number of browser requests - profitable. insert this line '"data:'.$mime.';base64,'.base64_encode(file_get_contents($file)).'"' - Asha35 commented on October 3rd 19 at 01:46
You can read more where to insert the link, and so on. Isn't that the method where instead of pictures of the long code? - abelardo_Nader25 commented on October 3rd 19 at 01:49
this is the same picture, just in the form of Protocol data: - abelardo_Nader25 commented on October 3rd 19 at 01:52
insert in css file , looks something like background-image: url("data:image/png;base64,iVBORw0KGgoAAAA....BDF=") - Asha35 commented on October 3rd 19 at 01:55
how to insert - so decide for yourself, or preg_replace or something else - abelardo_Nader25 commented on October 3rd 19 at 01:58
I mean somewhere you can turn a picture into code? or need a plugin? What means created. - Asha35 commented on October 3rd 19 at 02:01
pure PHP, nothing more - abelardo_Nader25 commented on October 3rd 19 at 02:04
open up the buzz and read what is the Protocol data - abelardo_Nader25 commented on October 3rd 19 at 02:07
Yes Yes, I understand, thank you - abelardo_Nader25 commented on October 3rd 19 at 02:10
there are many options to learn a data:uri. I usually use the built-in functionality of the Emmet plugin installed in Sublime. - Asha35 commented on October 3rd 19 at 02:13
October 3rd 19 at 01:33
Solution
The whole question boils down to is simple - time. If you have the opportunity (good salary, little tasks, much time a specific task) and the desire to do everything as you have described - who are you to deny?

But if you earn their work, this approach is ineffective because of labor costs, the more the end user is all the same as it's "painted" a picture or by using incomprehensible words.
And if there is a question download speed and this is important for the customer? - Asha35 commented on October 3rd 19 at 01:36
No idea how many you could save milliseconds, but I'm sure that for end user it will not play any role. - neal88 commented on October 3rd 19 at 01:39
Take the maximum — minimum images, all in css3. The average website, 5 different buttons with rounded several color themes, and multiple sizes. 5х3х3 = 15 pieces. Gradients, mediante, etc. — well, still have 15 pieces. Let's say 30 requests per Bush, +graph of n kilobytes turns into a ~2n hundreds of bytes or less. Sorts sprites in css to base64 and gzip. The volume does not have to lose. Ideally we will have 3 requests to the server, html, css, js. Drawing speed overall of the website will decrease, but will increase the rate of return and the cycle will render a lot sooner. No matter how you twisted the web server and keep-alive in browser — each connection will still occupy a significant portion of time of the request, in General, there should not be disputes. And milliseconds is very much won. If all together to lay down, should be up to 50-70% reduction in time to load. But will slightly increase the time to render. Even if the end result is 20-30%, is 200ms→150мс. Weighty. - Asha35 commented on October 3rd 19 at 01:42
So you think that it makes no sense therefore to optimize the website. The loss of time go to rendering in the browser that are laid out? - abelardo_Nader25 commented on October 3rd 19 at 01:45
October 3rd 19 at 01:35
Solution
Nobody even thought about convenience. The code button is easier to stretch than the image. And here is a photo and pictures - that's another story.
Yes, a good example, it is easy to operate with a code rather than with elements inserted with the images. - Asha35 commented on October 3rd 19 at 01:38
But if we are talking about illustrations, not the UI element. - neal88 commented on October 3rd 19 at 01:41
October 3rd 19 at 01:37
Solution
I almost do not have such issues, as they often require the support of the gods, ie6.
And it's actually the same answer.
And in General - on the situation, according to Kirsanov - for designer ideal format is an image or pdf, nothing is not going anywhere, everything will be exactly as intended by the designer. But you know - nowadays it's just incredible, to do, for example, the header picture. I think over time, all simple and not very illustration will be made in the layout.
I try everything I can to do the layout. Thanks for the reply. - Asha35 commented on October 3rd 19 at 01:40
But the titles of the pictures, you went too far, I can't imagine a greater horror than to realise the header image. - neal88 commented on October 3rd 19 at 01:43
I'm afraid that I'm just talking about the harsh reality, even now it is practiced. Oh and in terms of banners, not flash, but just jpg: in fact most often it is simply the text with an illustration, and I often see the text glued together with the picture in one image. - Asha35 commented on October 3rd 19 at 01:46
Well, it's either very bad coders, or old-fashioned web designers who have studied for a long time. - abelardo_Nader25 commented on October 3rd 19 at 01:49
http://lifestylefederation.com/ - very nice website, in my opinion. And the main text to make the picture :-) - Asha35 commented on October 3rd 19 at 01:52
Indeed, the new website with parallax scroll, however, use pictures. They have all the headers are pictorial. Probably why I waited so long, when the page loads - abelardo_Nader25 commented on October 3rd 19 at 01:55
and it's not the only example. It is likely that You may not notice places such here cases. On websites designers, there are many examples. - abelardo_Nader25 commented on October 3rd 19 at 01:58
October 3rd 19 at 01:39
Solution
If you for a site neighbor uncle Vasya doing the html + css instead of an image, which would save 10x the time, you just have nothing to do. If you maintain a website on which I go a couple of tens of thousands of people a day, removing pictures from boot greatly reduce the traffic. Turn bundles of small images in base64 will reduce the requests to the server.
I make custom websites. Despite the fact that my clients most often IT does not understand at all, I'm trying to do everything properly, as if to check will be the same as I am. And what about base64, I need to read about it as a really useful thing to say. And the question is about scripts. For example there is a script that you can include a link to Google's server and will download it from there or upload it to your server and users will download from me. How to do better for the server? - Asha35 commented on October 3rd 19 at 01:42
the better scripts from Google to give... There are lots of advantages to this approach... - neal88 commented on October 3rd 19 at 01:45
But if for example some js plugin, it is possible to distribute from the author's website. Also good? - Asha35 commented on October 3rd 19 at 01:48
need cdn to distribute, not the author's website, from Google's distribution with a cdn. - abelardo_Nader25 commented on October 3rd 19 at 01:51
thanks, I found a good article on this topic. I'll know (http://habrahabr.ru/post/109309/) - Asha35 commented on October 3rd 19 at 01:54
October 3rd 19 at 01:41
Solution
Mystery to me - how is it possible today to impose the pages in photoshop, and You know how many people are doing so, and possibly You too.
For You, it is not clear how to do a title picture, but for someone - how you can spend on the fit of the letters a few days instead of draw them. Even the time-tested fonts sometimes character spacing walking. Depending on the specifics of a particular letter I want to raise, lower or increase. To do all this by means of layout sometimes unnecessarily long, so images appear instead of titles. To correctly fill in the violas and only one problem - the download speed. Make an interesting preloader and about this issue can almost be forgotten, especially if the audience presumably has a fast Internet and Your server can give with sufficient speed content.
Understand. I'm in photoshop-e very little work, but sometimes you have to impose on the psd layout and what's wrong with that? About fonts, well, a few days that you have touched, some days can be a quality page to mark up. I like one logo first inserted picture, and then print, as there is only text. And how many did not compare two pages, the difference did not notice. There are exceptions. About the preloader, if the page is with a lot of pictures, it is a strong load on the server, and I think this is a good reason sometimes to impose headers. There fast Internet, many are still IE6-8, irl companies have the audience sitting on the Internet, their Internet speed does not play a strong role in life, as a visitor of toaster for example. So much still depends on the audience. But I do not much it is not clear how the header images to do. I only care about the views of different parties, as I am doing layout and typeset want to know how other people can find some life hacks for yourself. - Asha35 commented on October 3rd 19 at 01:44
October 3rd 19 at 01:43
Solution
Then from time to time, from place to place. Buttons, text, pictures in the round frames, with shadows and all sorts of small buns better through the styles and markup, would be nice then to open the website in any ipad or other device in a high density of points and enjoy the clearly drawn browser, layout of elements, rather than inserted a picture button or text
Here's another plus, pictures, I understand not very pleasant to the eye is displayed on screens with high dpi? Right? - Asha35 commented on October 3rd 19 at 01:46
no, not necessarily. First, you have the opportunity to put pictures with high dpi. When talking about Second, you can use @media if the image is placed via css. - neal88 commented on October 3rd 19 at 01:49
can you briefly explain what do these options. As Google does not allows you to add queries of this type and leaves only the media or img. - Asha35 commented on October 3rd 19 at 01:52
sorry, it's kind of a typo. is the img tag. Supposed to be like . @media - talking about Media queries: http://htmlbook.ru/css/media , https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries - abelardo_Nader25 commented on October 3rd 19 at 01:55
Aah, now everything is clear, thank you. - Asha35 commented on October 3rd 19 at 01:58
October 3rd 19 at 01:45
Solution
I do so because I was stupid for fun , rushing , and do not care at the time
I have the same situation. But this is nerd stuff, so I want to know the opinion of those who did not do so and those who do. I hear you, thank you. - Asha35 commented on October 3rd 19 at 01:48
Powerful! How much time is approximately left? On the other hand, the work and demands are corresponding. And your work is not 100% match the real shadows, projections and other things of the real world, and it is striking. Nevertheless, the work deserves respect. Good luck! - neal88 commented on October 3rd 19 at 01:51
two days passed , Yes this is not an academic figure . ) - Asha35 commented on October 3rd 19 at 01:54
don't want to "fake it", but I have an animation in flat design takes a couple of hours. Here is an example http://cdpn.io/hogvp (somewhere 3 hours to do). I didn't copy, so longer than you'd expect. Came up with the illustration on the go. - abelardo_Nader25 commented on October 3rd 19 at 01:57
October 3rd 19 at 01:47
Solution
Still, it's holivarnaya topic. It is hoped that at least links in the comments opponents are sketched.

There is no single answer. It lies in the plane:
- your knowledge (this will depend on the time spent on layout)
- list of devices for which you need to solve the problem (for example Vadim Makishvili shares how to print non-printable background http://vimeo.com/74930902 )
- the complexity of the picture that needs to be done in html (almost nothing is impossible http://codepen.io/jaysalvat/full/HaqBf)

So it turns out that the pros and cons will vary from instance to instance.
Question was created with the purpose of holivar, as I'm interested in the views of the two sides. Yes, about the fact that nothing is impossible I know. I threw the water faucet in the link in the text of the question, but it is only under webkit, so it's only Chrome running. - Asha35 commented on October 3rd 19 at 01:50
October 3rd 19 at 01:49
Solution
Personally, my opinion that it is necessary to do so, that would reduce labor costs now, if possible, for the future. But thus not to create inconvenience for the user.
If you can make something static, a picture for half a minute, and this picture will be easy enough, the only profit that we get, Severstal this in CSS is "pumping skills" and able to show it at the interview (still cross-browser was :) ).
On the other hand, if we do some UI item, often they may need us in a different size/color/...some other small change... makes sense to spend some time creating this element in CSS.
I agree. - Asha35 commented on October 3rd 19 at 01:52

Find more questions by tags CSSHTML