Last modified: 2010-11-12 19:54:11 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T27896, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 25896 - Inline small images with data: URI in ResourceLoader-generated CSS
Inline small images with data: URI in ResourceLoader-generated CSS
Status: RESOLVED WORKSFORME
Product: MediaWiki
Classification: Unclassified
ResourceLoader (Other open bugs)
unspecified
All All
: Normal enhancement (vote)
: ---
Assigned To: Trevor Parscal
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2010-11-12 11:05 UTC by Liangent
Modified: 2010-11-12 19:54 UTC (History)
2 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description Liangent 2010-11-12 11:05:26 UTC
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.
Comment 1 Niklas Laxström 2010-11-12 11:31:11 UTC
As far as I know this is already done for all images annotated with @embed
Comment 2 Liangent 2010-11-12 12:58:38 UTC
Already done? I still see many rules pointing to small pngs (tested on prototype.wikimedia.org).
Comment 3 Niklas Laxström 2010-11-12 15:23:32 UTC
I see 11 inline images, granted those are only for images referenced in the styles, not just any random images included in the page.
Comment 4 Trevor Parscal 2010-11-12 19:52:38 UTC
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.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links