Comments (2)
Movie Night assets.
The final graphic is this one:
This is composed of the following raster resources:
Background:
Body text:
Main text:
Sign:
Seats:
from oodle-demo.
Movie night text/logo optimisation attempts
Fonts:
If we'd prefer to not use a raster image for the text, we can either use the fonts or an SVG.
Intro
http://www.fontfabric.com/intro-free-font/
BigNoodleTitling
http://www.dafont.com/search.php?q=BigNoodleTitling
Montserrat
https://www.fontsquirrel.com/fonts/montserrat
Some fun SVG optimisation notes.
After recreating the logo with text effects in Sketch (from PhotoShop) and attempting an SVG export..
There was so much detail that we end up with a ~191KB file (this is not a flattened bitmap in an SVG, just..a lot of complex shapes). Even SVGOMG was only able to shave off a few bytes.
If however we simplify the logo significantly (dropping inline shadows and borders) we're able to take this down to 11KB:
However, this doesn't look quite that amazing on darker backgrounds now that we lost the shadows and borders:
If we say that SVG is maybe not going to give us the best value here (maybe we're okay with the trade-off), we can get the main text effect in a raster form (optimized PNG through ImageOptim) down to 77KB:
Compressor.io (lossy mode) can take this down to 65KB without too much visual difference:
Going back to the logo + sign, ImageOptim can do this at ~128KB:
If we reduce this to 8-bit images + run through Compressor.io (ImageOptim didn't really do much) we can take this down to ~100KB:
We could potentially bring the size here down but are limited as we need to use background transparency for this image.
With a solid background color (which could change the overall design a little) MozJPEG/ImageOptim can do this image in about 60-70KB.
from oodle-demo.
Related Issues (19)
- Mocks
- CSS Optimization
- Web Font optimization HOT 2
- Enable text compression HOT 1
- Reduce render-blocking stylesheets HOT 1
- Uses inefficient cache policy on static assets
- Progressive Web App
- Error: Cannot read property url of undefined
- Preload key requests HOT 1
- Compression/Brotli
- Improve speed HOT 3
- Introduce performance issues HOT 1
- Final updates
- Improve accessibility
- Support for working without JavaScript
- Doodle mini perf-audits
- Implement offline experience
- JavaScript optimizations HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from oodle-demo.