One large background image or several small images?

As a web developer, I have to cut out a layout like this ( Ruben Bristian website example ):

Hexagon by Ruben Bristian

Should I be concerned about cropping a few small images like the logo:

logo

label:

label

etc? Or should I just make one big background image with all elements like this:

background

and position <a href>

with display: block;

for a related logo?

One image is smaller than multiple elements. What are the other pros and cons?

+3


source to share


5 answers


Use separate images.

Here are some reasons why:

Maintenance : It will be much easier to maintain in the future if / when the time comes when you want to build on what you already have. Also (and subjectively) the background image is not critical to the design. It wouldn't look broken if parts of the background were cut off. If the logo were distorted, it would look broken.

Remember also that newer, more acute manifestations are being developed. It is much easier to display the standard resolution background (it is already blurred, so clarity is not essential) and supports two versions of the logo. One for standard displays, one for HD.

Semantics: What if the user has images disabled? Of course, this is unlikely, but what about Google ? You must have correct markup with real content. Your site needs real text content for Google crawlers to collect information about it. Use CSS image replacement techniques to create an interface.



Another note on HD displays: This convention serves to accommodate large images in HD (retina) displays and uses CSS to shrink them, effectively increasing dpi. If you only use one image, the user will have to upload a significantly larger amount of the image. More bandwidth you use and a slower experience for your users.

Plus, text will look terrible on HD displays. It makes sense to make the browser more user-friendly.

Availability: . For starters, screen readers won't know what your site is. In this case, it may not be as relevant, but it is best to create an accessible website as well. If you want to add some smaller text to the site, some users may not read it. They usually increase the font size, but if you are using images, they are powerless.


I may have over-dramatized this answer, but the advice is well-intentioned.

+2


source


PROS:



  • Downloaded bytes below.

  • You don't need to worry about how small images are combined to become a common image.

0


source


if you just use 1 image you will find that it will be much easier to keep the layout fluid. You will have no padding / aligning problems, playback problems, etc. Realistically, load times should be the same anyway, maybe a little longer for multiple images as the browser will have to render more css, but I think it wouldn't be very noticeable. In the end, it really comes down to what is best for the job. I'm pretty tied to 1 clean image :)

0


source


I think you need to think about how you will use each element individually and how they will change in the future.

You might want to change the logo, revive it, or want to reuse it elsewhere. The background image can change or become multiple images in some temporary gallery.

If that never changes (unlikely) then yes, flatten it in one image.

I personally would have a separate background image. Then maybe there is a logo and label on another transparent png and use css sprites to reuse them throughout the site. This will cut in half the number of requests required to upload a logo / label and allow you to optimize each image separately, i.e. A complex background photo and a simpler logo / label.

0


source


I would honestly try a slightly different approach. The "photo" part of the image will be one image, the logo will be another, and perhaps the double stripe on either side of the header is different (but may not be necessary.

I would use the photo part as a bg image on a div and inside the code the rest.

I wouldn't do the text part of the image at all. Try Google Web Fonts to get a nice font.

This approach will save you a lot of maintenance time and will also help in productivity.

0


source







All Articles