0
I have a 3px x 3px repeated gif that I want to add as a data URI for a background image in CSS. However, with transparency it becomes over 1000 bytes whereas with a white background it's 45 bytes. Is there any way this image can be encoded the same size as the white background image with the transparency? I am using Photoshop.
The image is 9px that can be represented as the below (where the black boxes are a single colour and the hyphens are transparent areas:
■-- --■ -■-
RichieAHB
Posted 2013-11-19T14:52:29.497
Reputation: 103
Have you tried PNG? – pjc50 – 2013-11-19T15:22:47.293
It depends on how you are saving them. There are various settings you can adjust which will affect the resulting size. Also, pjc50 is correct; if you are going to embed the graphics file in the stylesheet, then why not just use a PNG? I just did a test and even the base64-encoded version of the PNG is only 149 bytes. – Synetech – 2013-12-28T22:19:13.410