5 Replies - 247 Views - Last Post: 26 October 2013 - 01:44 PM

#1 kenryuakuma  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 371
  • Joined: 14-December 08

Web Development Image Question

Posted 19 October 2013 - 12:02 PM

I would like to discuss or ask some of you experts questions regarding web images. Some of the images in certain websites are divided into several smaller pieces and then when you view the complete web page the whole image is formed or the smaller pieces are combined to make one whole image. Other times, the web designers create a big whole image, but when it is displayed on the web page, that image becomes really thin and round-edge instead of being rectangular, which is what the original image is. Sometimes, they cut out the corners of the image and piece them back.

I would really like to know the concept of making image for the web sites. I don't know why the web designers do that and why they don't, instead, just create a complete image? I hope I could be enlightened on this.

Is This A Good Question/Topic? 0
  • +

Replies To: Web Development Image Question

#2 salazar  Icon User is offline

  • D.I.C Addict

Reputation: 86
  • View blog
  • Posts: 538
  • Joined: 26-June 13

Re: Web Development Image Question

Posted 19 October 2013 - 12:21 PM

It may have to do with the way web pages are laid out using html/css. Usually, the page is divided into multiple sections, and the different sections will be independent of others. It also has to do with the speed. Larger images will usually take longer to load then smaller individual images.

About "image becomes really thin and round-edge instead of being rectangular." I'm not sure what you mean. Are you talking about rounded corners?

This post has been edited by salazar: 19 October 2013 - 12:22 PM

Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2890
  • View blog
  • Posts: 9,597
  • Joined: 12-December 12

Re: Web Development Image Question

Posted 19 October 2013 - 12:44 PM

I believe a number of designers start with Paint Shop Pro and cut-up, and re-fit, images. I've never really understood this but I suppose they start out as Graphic Designers and are familiar with this application.

This post has been edited by andrewsw: 20 October 2013 - 03:35 AM

Was This Post Helpful? 0
  • +
  • -

#4 kenryuakuma  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 371
  • Joined: 14-December 08

Re: Web Development Image Question

Posted 19 October 2013 - 10:03 PM

View Postsalazar, on 19 October 2013 - 01:21 PM, said:

It may have to do with the way web pages are laid out using html/css. Usually, the page is divided into multiple sections, and the different sections will be independent of others. It also has to do with the speed. Larger images will usually take longer to load then smaller individual images.

About "image becomes really thin and round-edge instead of being rectangular." I'm not sure what you mean. Are you talking about rounded corners?


Yes. I meant rounded corners. I would pretty much like to know the concept. Let's just take dreamincode website as an example. As you can see the BLACK BAR (SELECTION MENU) right next to MY ACCOUNT at the top. The back bar is the background image but has been cut or divided into pieces http://cdn.dreaminco...es/nav_left.gif and http://cdn.dreaminco...nav_link_bg.gif and http://cdn.dreaminco...s/nav_right.gif. I believe the CSS property and value of this were done with background-image: repeat-x;. However why didn't they instead just create the whole image? Rather than divide them into pieces and then put them back together? Isn't it harder to do and a bit time consuming? In addition to that, I am just wondering HOW THEY DID IT? I also believe it requires some math and calculation.

This post has been edited by kenryuakuma: 19 October 2013 - 10:04 PM

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2890
  • View blog
  • Posts: 9,597
  • Joined: 12-December 12

Re: Web Development Image Question

Posted 20 October 2013 - 04:05 AM

This site was built a while ago ;)

A single large image would take a while to load. Using three, very small images, and repeating them is much more efficient. The browser only downloads a single copy of each small image, the repetition occurs with the copies of these images that are now in the browser's cache.

It would have taken a little planning, and experimenting, so that the outer nav-buttons have the rounded-corners, but it was a very common practice, so there are many examples on the internet, and it wouldn't have required much detailed Maths. (It may not even have been necessary to create the three images, as there are many sites which would offer matched-sets for free, or at very limited cost.)

These days, this nav-bar can be created entirely with css, not requiring any images and improving performance (load-time).

Besides, if a single, large, image had been used and an additional nav-button were needed (or the font or font-size was changed) this image would need to be abandoned and a new one created.

It is much better to use css (rounded-corners, gradient colours, etc.) wherever possible, rather than downloading unnecessary images.
Was This Post Helpful? 0
  • +
  • -

#6 kenryuakuma  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 371
  • Joined: 14-December 08

Re: Web Development Image Question

Posted 26 October 2013 - 01:44 PM

Thanks for your reply. So just wonder if you could give me some concrete examples about how to do it? Most of the books or internet tutorial only teach you or talk about how to use simple or html. They hardly ever mention something like this and teach you how to design.

One thing I like to see is how the navigation bar of this website get implemented with CSS along with those three pieces of images. With some guideline, learning would be easier.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1