Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove image embed #1346

Merged
merged 1 commit into from
May 4, 2020
Merged

Remove image embed #1346

merged 1 commit into from
May 4, 2020

Conversation

Hirse
Copy link
Contributor

@Hirse Hirse commented May 3, 2020

The grunt task to embed images was added in 6e58773 when ungit had a lot more images (which were referenced from CSS).

Now, the task only embeds the fonts used by ungit, which is actually counter-productive:

  1. The font declaration includes the local()-function so that fonts don't need to be loaded if they are already installed, but this optimization is redundant as the font is embedded in the same file.

    @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans.woff') format('woff');
    }
    @font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 500;
    src: local('Source Code Pro Medium'), local('SourceCodePro-Medium'), url('../fonts/SourceCodePro-Medium.woff') format('woff');
    }

  2. Bootstrap includes multiple file types of the glyphicon font so the browser can pick their best supported one. By embedding the fonts, all alternatives are served.

    // Import the fonts
    @font-face {
    font-family: 'Glyphicons Halflings';
    src: ~"url('@{icon-font-path}@{icon-font-name}.eot')";
    src: ~"url('@{icon-font-path}@{icon-font-name}.woff') format('woff')",
    ~"url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype')",
    ~"url('@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg')";
    }

File size comparisons (Firefox network panel):

Embedded
styles.css   331.26 kb

Separate:
styles.css   219.40 kb
OpenSans      21.76 kb
SourceCodePro 20.22 kb
glyphicons    23.07 kb
======================
sum          284.45 kb

Copy link
Collaborator

@campersau campersau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice analysis!

@campersau campersau merged commit 4cc9e81 into FredrikNoren:master May 4, 2020
@Hirse Hirse deleted the image-embed branch May 4, 2020 15:56
@campersau campersau mentioned this pull request May 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants