Inline small images with data: URI in ResourceLoader-generated CSS
Closed, DeclinedPublic
Actions

Assigned To

Authored By

	liangent
	Nov 12 2010, 11:05 AM

Description

Put them in CSS with url(data:image/png;base64,***); so:

If a user is visiting the wiki for the first time, this can reduce the number of HTTP requests.
Or the data of images can be cached and the cache can be invalidated alongside CSS, so there will be no need to add ***.png?1 here and there.

Putting this in the component Resource Loader, because:

With PHP, data: URI can be generated easily.
Due to lack of support in some browsers, they can be served selectively in PHP.

Version: unspecified
Severity: enhancement

Details

Reference: bz25896

Event Timeline

• bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:18 PM

• bzimport added a project: MediaWiki-ResourceLoader.

• bzimport set Reference to bz25896.

liangent created this task.Nov 12 2010, 11:05 AM

As far as I know this is already done for all images annotated with @embed

Already done? I still see many rules pointing to small pngs (tested on prototype.wikimedia.org).

I see 11 inline images, granted those are only for images referenced in the styles, not just any random images included in the page.

This was done very early on in ResourceLoader. The code that performs the operation is in the CSSMim class.

Theoretically not all images are going to be ideal to embed, but so far we have seen impressive results in embedding even larger images, or embedding the same image more than once in the same file because of the efficiency of gzip compression.

As Niklas said, you have to preceded the CSS rule that contains the url() code with a /* @embed */ comment to enable embedding on a per rule basis.

Inline small images with data: URI in ResourceLoader-generated CSSClosed, DeclinedPublicActions

Description

Details

Event Timeline

Inline small images with data: URI in ResourceLoader-generated CSS
Closed, DeclinedPublic
Actions