Transparent color vs. color, Which uses more memory?

HTML & CSS
1

I’m finding that setting a color to transparent uses more memory than a regular color.

Would this be right?

Are my findings correct?

I had all of CSS styles set to transparent, the parts I wanted transparent.

I got this:
79.30 KB using transparent

Then I changed those transparent styles to black.

I got this:
79.06 KB Using #00000

In saying this, would it be better to use black, or stay with transparent?

What would your recommendation be?

2

how are you measuring memory here?

Do you mean memory or disk space?

3

cached html data size

79.06 - Using #00000
Data Size: 16057

79.30 KB using transparent
Data Size: 16090

4

So disk space? Obviously the more characters in the CSS file the higher the space will be:

#000000 → 7 bytes
rgba(0, 0, 0, 0.6) → 19 bytes

But you really should not be worrying about bytes. Unless your CSS is getting to hundreds of kilobytes there’s not anything to worry about.

2 Likes
5

That’s probably the reason why then.

6

For a saving of ~250 bytes, I’d say if you want transparent, have transparent. True, bytes can add up, but before optimizing you should consider whether or not the saving is significant compared to the sacrifice.

7

All I’m doing is blending everything with the black background color which is black.

One way is making it all #000000

The other is using transparent .

This is my template:

Do you see how I have transparent all over the place. I can either keep it as that, or change transparent to #000000

In this situation would you keep all those spots as transparent, or change them to #000000?

Right now the only thing that’s stated black on there is the background color, all the parts I want blended in with the background are set to transparent.

image
image783×3847 373 KB

8

I don’t know what UI that is. I’m assuming it’s your image tool.

But you seem to be getting off-topic and asking for help in making a decision that can be made only by you.

I would not worry about bytes until they add up enough to be an actual problem. You have a few choices.

  • If you want the images background color to “match” the container elements background color:
    • If the container elements background color is not always the same, use transparent
    • If the container elements background color is always the same, you can give the image the same background color
  • If you don’t care if the background colors match, give them what ever background color you like
2 Likes
9

This is what it looks like:
image

10

When you say “I have transparent all over the place”…what place are you talking about? Is the filesize you’re referring to a stylesheet or the image/template?

If you’re talking about the image, then it’s more future proof to use transparency as you’ll otherwise have to update the image anytime you want to change the background (for example, going from #000 to #333). If you’re talking about the stylesheet, then you should be using a minifier anyways.

11

It’s the Blogger / Blogspot designer CSS style sheet template is what I’m referring to.

12

The default for background-color is transparent so you don’t need to declare it at all if you want it transparent!!!

4 Likes
13

Then I would have to edit the entire style sheet internally.

You’re required to give a color. either transparent, or a hex color.

14

Code examples:

Code comparing examples:
solid:
#000000 is seven characters soid
#00000000 is eight characters soid
black is five charactersä solid
#000 is four characteres sloid
#0001 is five characteres solid

transparent;
transparent is eleven caracters.
#0000 is five characters (fourth is the alpha channel, 0=transparnt)
#0000000 is eight characters solid

(last part just disappeared from the post)

15

It only accepts #000000 or transparent.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.