Optimizing Content Delivery

You are here:
< Back

The below shows the effort to optimize content delivery for one of our service in https://passwordrecovery.apiit.edu.my/. Estimated optimization reduced overall transfer size by ~25%.

Breakdown of Content (rough estimation)

  • Before:
    • 50% Images (~600 KB)
    • 45% JavaScript (503 KB)
    • 5% Others
  • After:
    • 75% JavaScript (503 KB)
    • 15% Images (~82 KB)
    • 10% Others

The tools that are used are imagemagick (or graphicsmagick), jpegoptim, optipng, gifsicle and svgcleaner (or svgo). Here we go.

Optimize Images

The easiest way to optimize images is to just run image optimizer through it. Below are some of the methods to use the optimizers shown above.

$ optipng -strip all -o7 input.png
$ jpegoptim -s input.jpg
$ gifsicle -O3 input.gif -o output.gif
$ svgcleaner input.svg output.svg
$ svgo input.svg

Different Image Format

Just in case after optimizing, if the images is still large. What can we try? Different formats, since different images have different use cases.

$ convert logo.gif logo.png
$ gm convert logo.gif logo.png # gm for graphicsmagick

Responsive Image

Our background image is 4k. How do we even display 4k images in mobile phones? We don’t. Responsive images to the rescue.

$ gm convert -geometry 640x background.jpg background-640.jpg
$ gm convert -geometry 360x logo-960.png logo-360.png
$ gm convert -geometry 480x logo-960.png logo-480.png

Responsive image in HTML used in our logo.

<img srcset="assets/logo-360.png 360w,
             assets/logo-480.png 480w,
             assets/logo-960.png 960w"
     sizes="(max-width: 360px) 280px,
            (max-width: 480px) 440px,
            960px"
     id="logo" alt="APU logo" src="assets/logo-960.png">

Responsive image in CSS for background.

section {
  background: url(/assets/backgroud-640.jpg) left/cover no-repeat;
}

What’s Next

The above had greatly reduce the cost of images. In addition, we could have:

  • Switch to Angular v6 (said to reduce the size of JavaScript bundler)
  • Make use of SVG for background gradient (vector and smaller)

Did not find what you were looking for? Open a ticket with our Help Centre and we will get back to you resolve your issue.Click Here.
Was this article helpful?
How can we improve this article?
Need help?