DEV Community: Shogo Sensui

Optimizing your SVG files with GUI tools

Shogo Sensui — Sat, 13 Jun 2020 05:10:55 +0000

The SVG output from Sketch and other tools may contain data that are not required for display. You can also use git or other tools to do version control on SVGs, but you should remove unnecessary data before you commit them.

There is a Node.js tool called svgo, which allows you to use an unnecessary You can apply formatting and minimization processes while removing the data.

The need to do it with GUI tools

You don't have to use a GUI tool to do it, but it's an option for situations where you want to optimize a single file, or you want to use a text editor instead of a terminal, and you don't need a commit hook in git.

If you have the Sketch plugin installed, you can get an optimized export. You can do this, so there are no leaks. Also, it's not limited to SVGs, but if it's an icon, you can adjust the size of the artboard before exporting. Align it, keep the paths outlined, and make sure the artboard name makes sense. It's a good idea to do this. By doing this, the size of the ViewBox will be unified, and unnecessary transform information will be removed from it. A meaningful name should be inserted into the <title> element.

Plugins

For Figma, see With Figma's new SVG Exports, less = more, it appears that there are no tools for this.

1000ch/vscode-svgo: Run "Install Extensions" in the command palette (⌘ + Shift + P) and search by svgo
1000ch/atom-svgo: Run apm install svgo or search by svgo in "Install"
1000ch/Sublime-svgo: Run "Install Extensions" in the command palette (⌘ + Shift + P) and search by svgo

VSCode and Atom have Node.js built-in, so all you have to do is install it and you're good to go! Sublime Text does not include Node.js, so you have to install it. The path to Node.js (node) must be in the terminal's PATH.

simplehttp2server on Node.js

Shogo Sensui — Thu, 04 Jun 2020 17:08:38 +0000

There is a standard library called http.server in the Python 3 series that allows you to host a directory in a local environment. It is provided as a SimpleHTTPServer in the Python 2 series, and was useful for hosting web pages in the local environment in a simple way.

simplehttp2server

http.server is hosted by http/1.1, but for those who want to host it by http/2, there is one called GoogleChromeLabs/simplehttp2server. It is a very useful tool, but you need to install it with Homebrew or go get. I developed 1000ch/simplehttp2server as a Node.js wrapper for GoogleChromeLabs/simplehttp2server to make it easy to use it in Web Frontend projects.

That said, it's been about 5 years since I published simplehttp2server in npm, so it's nothing new. A recent change was made to this Node.js wrapper and the command line package that separated it.

simplehttp2server-cli

So now there are simplehttp2server and simplehttp2server-cli packages wrapping binaries. In order to run simplehttp2server on the command line, you need to install the latter.

$ npm install -g simplehttp2server-cli
$ simplehttp2server --help
  -config string
      Config file
  -cors string
      Set allowed origins (default "*")
  -listen string
      Port to listen on (default ":5000")

Now, simplehttp2server can work, and folders in the local environment can be easily hosted with http/2. Note that since this is http/2, it will be accompanied by https, and the default port will be https://localhost:5000. And Google Chrome can't open https://localhost by default due to security issues.

If you enable #allow-insecure-localhost flag from chrome://flags and restart Google Chrome, you can also open https://localhost.

Simple, Light-weight and Flexible Vue.js component for grid layout

Shogo Sensui — Thu, 25 Jul 2019 06:30:03 +0000

Just published 1000ch/vue-grd, Vue.js component which provides flexible grid layout system with simple usage.

How to use?

You can install via npm.

npm install --save vue-grd

After importing and registering as component, you can use <vue-grid> and <vue-cell>.

<template>
  <vue-grid align="stretch" justify="start">
    <vue-cell width="fill">fill</vue-cell>
    <vue-cell width="3of12">3of12</vue-cell>
    <vue-cell width="3of12">3of12</vue-cell>
  </vue-grid>
</template>

<script>
import { VueGrid, VueCell } from 'vue-grd';

export default {
  components: {
    VueGrid,
    VueCell
  }
};
</script>

You can also register them as global component.

import Vue from 'vue';
import VueGrd from 'vue-grd';

Vue.use(VueGrd);
// or
Vue.component('vue-grid', VueGrd.VueGrid);
Vue.component('vue-cell', VueGrd.VueCell);

If you don't use npm, you can load via jsDelivr.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-grd@1.1.0/dist/vue-grd.js"></script>
<script>Vue.use(VueGrd);</script>

Configure

They have some properties to align and justify set width.

`<vue-grid align>`

top: Pull items to top
middle: Pull items to middle
bottom: Pull items to bottom
stretch: Stretch items
baseline: Pull items to baseline

`<vue-grid justify>`

start: Layout items to start
center: Layout items to center
end: Layout items to end
between: Add spaces between items
around: Add spaces around items

`<vue-cell width>`

fill: Set item width to left
1of12: Set item width to 8.3%
2of12: Set item width to 16.7%
3of12: Set item width to 25%
4of12: Set item width to 33%
5of12: Set item width to 41.7%
6of12: Set item width to 50%
7of12: Set item width to 58.3%
8of12: Set item width to 66.7%
9of12: Set item width to 75%
10of12: Set item width to 83.3%
11of12: Set item width to 91.7%
12of12: Set item width to 100%

Live Demo

You can try it from here.

We should optimize images

Shogo Sensui — Mon, 17 Jun 2019 18:36:33 +0000

Steve Souders said on High Performance Web Site,

80-90% of the end-user response time is spent on the frontend. Start there.

Web performance mostly depends on the frontend. It means to make the web faster; we have to optimize the frontend. For example, it contains the following factors:

Minimize round trip times and request overhead
Minimize payload size
Optimize browser rendering
And others…

Minimizing payload size is one of the easiest to apply. To reduce the number and payload size, we have to minimize HTML, CSS, and image files. Notably, the file size of images takes the most bandwidth in most cases. So I will introduce you to some tools for image optimization.

GUI Tools for image optimization

ImageOptim — image optimizer which contains PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle.
ImageAlpha — reduce file sizes of 24bit PNGs by converting them to 8bit.
WebPonize — a Mac OS App for converting images into WebP.
SVGOMG - SVGO's Missing GUI.
Squoosh - Compress and compare images with different codecs, right in your browser.

Image comparison

They are GUI applications, so you can use them to apply compression to your images easily. Here is the sample result of PNG image compression:

Uncompressed PNG (71,834bytes)

This is original PNG image without compression. This image is 24bit oriented and contains lots of meta such as location, date, and time.

Compressed PNG (28,369 bytes) with ImageAlpha & ImageOptim

This is the 8bit-converted PNG compressed with ImageAlpha and ImageOptim. It looks not degraded.

Optimized JPEG (213171 bytes) with ImageOptim. Meta is removed. But lossy-compression is not applied.

As other example, this one is a JPEG. Meta is removed with ImageOptim and lossy-compression is not applied.

Compressed JPEG (71874 bytes) with JPEGmini & ImageOptim

This one is compressed with JPEGmini. It does not look too degraded, and the file size is about 34% of the original (66% cut!!!). Photos that contain many colors will be degraded, so we have to check the image after compression. It is a little annoying, but it’s worth it.

CUI Tools for image optimization

I also wanted the CLI tool, so I created the tool as grunt task and gulp one.

grunt-image — Optimizes PNG, JPEG, GIF images without GUI.
gulp-image — Gulp one of above.

You can optimize PNG, JPEG, GIF images using them. Installation? It’s simple and easy if you have used Grunt or Gulp. (I guess you have already used them☺)

# download them using npm
$ npm install —-save-dev grunt-image
$ npm install —-save-dev gulp-image

Detailed settings are on the projects’ GitHub repositories.

WebP is a new image format by Google

WebP is also awesome. This is a new image format by Google. It says,

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index.

WebP is supported by Chrome and other browsers which contain Chrome Frame. Safari does not currently support WebP. But interestingly, Chrome on iOS is able to display WebP images (It seems to have Chrome Frame)!

WebP is available from here. I want to show you WebP image, but it is not available on Medium sadly. However, in my test, the PNG file size before converting into WebP is 28,369 bytes. After converting, the file size of WebP one is 17,382 bytes, and it looks not degraded Yay!

If you have ever not taken care of image optimization, you should apply optimization for better web performance. Finally, I recommend the following articles to learn more about the image:

Give PNG a chance — by Stoyan Stefanov
Mobile ISP image recompression — by Kornel Lesiński
PNG8 — The Clear Winner — by Alex Walker
PNG that works — by Kornel Lesiński
Image Compression for Web Developers — by Colt McAnlis
Introduction to WebP — by Me

Thank you for reading!