舊的logo使用的復(fù)雜的襯線字體匣距,這種字體只能使用貝塞爾曲線創(chuàng)建曲線面哥。所有加在一起毅待,一共有100錨點(diǎn)尚卫,導(dǎo)致其為一個(gè)6kb的文件尸红。經(jīng)過壓縮,大小變?yōu)?kb外里。
old_google_logo.png
經(jīng)過簡(jiǎn)化的新logo,從另一方面來說盅蝗,可以用圓形和矩形進(jìn)行創(chuàng)建(除了小寫e)。
new_google_logo.png
整個(gè)logo包括:
- 10個(gè)圓形
- 5個(gè)矩形
305字節(jié)是真實(shí)的大小嗎墩莫?
盡管Google沒有發(fā)布優(yōu)化的305字節(jié)的logo,并且似乎網(wǎng)上也找不到狂秦,但是我相信他們大小降到了他們宣稱的305字節(jié)。
為了驗(yàn)證這一點(diǎn)裂问,我用SVG格式重畫了第一個(gè)字母G牛柒,最終未經(jīng)壓縮的大小為302字節(jié),壓縮后未195字節(jié)焰络。
下面是整個(gè)未經(jīng)壓縮的圖像,包括兩個(gè)圓和兩個(gè)矩形闪彼。
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="100" cy="100" cx="100" fill="#4885ed"/>
<circle r="70" cy="100" cx="100" fill="#ffffff"/>
<rect transform="rotate(-40 166,67)" height="78" width="99" y="27" x="117" fill="#ffffff"/>
<rect height="30" width="88" y="87" x="111" fill="#4885ed"/>
</svg>
生成的圖形:
crate_logo.png
為什么這很重要
正如Google在他們的blog中寫到的:
舊的logo由于其復(fù)雜的襯線字體和過大的文件尺寸,使我們不得不為低帶寬的用戶提供了一個(gè)文本近似的logo畏腕。新的logo減少了文件尺寸從而避免了這一變通方案,當(dāng)考慮到我們的目標(biāo)是使Google變得更加容易訪問和有用描馅,這一改變是有重大影響的。