Tag: image processing

Posted on by — Leave a comment

Design faster web pages, part 2: Image replacement

Welcome back to this series on building faster web pages. The last article talked about what you can achieve just through image compression. The example started with 1.2MB of browser fat, and reduced down to a weight of 488.9KB. That’s still not fast enough! This article continues the browser diet to lose more fat. You might think that partway through this process things are a bit crazy, but once finished, you’ll understand why.

Preparation

Once again this article starts with an analysis of the web pages. Use the built-in screenshot function of Firefox to make a screenshot of the entire page. You’ll also want to install Inkscape using sudo:

$ sudo dnf install inkscape

If you want to know how to use Inkscape, there are already several articles in Fedora Magazine. This article will only explain some basic tasks for optimizing an SVG for web use.

Analysis

Once again, this example uses the getfedora.org web page.

Getfedora page with graphics marked

Getfedora page with graphics marked

This analysis is better done graphically, which is why it starts with a screenshot. The screenshot above marks all graphical elements of the page. In two cases or better in four cases, the Fedora websites team already used measures to replace images. The icons for social media are glyphs from a font and the language selector is an SVG.

There are several options for replacing:

HTML5 Canvas

Briefly, HTML5 Canvas is an HTML element that allows you to draw with the help of scripts, mostly JavaScript, although it’s not widely used yet. As you draw with the help of scripts, the element can also be animated. Some examples of what you can achieve with HTML Canvas include this triangle pattern, animated wave, and text animation. In this case, though, it seems not to be the right choice.

CSS3

With Cascading Style Sheets you can draw shapes and even animate them. CSS is often used for drawing elements like buttons. However, more complicated graphics via CSS are usually only seen in technical demonstration pages. This is because graphics are still better done visually as with coding.

Fonts

The usage of fonts for styling web pages is another way, and Fontawesome is quiet popular. For instance, you could replace the Flavor and the Spin icons with a font in this example. There is a negative side to using this method, which will be covered in the next part of this series, but it can be done easily.

SVG

This graphics format has existed for a long time and was always supposed to be used in the browser. For a long time not all browsers supported it, but that’s history. So the best way to replace pictures in this example is with SVG.

Optimizing SVG for the web

To optimize an SVG for internet use requires several steps.

SVG is an XML dialect. Components like circle, rectangle, or text paths are described with nodes. Each node is an XML element. To keep the code clean, an SVG should use as few nodes as possible.

The SVG example is a circular icon with a coffee mug on it. You have 3 options to describe it with SVG.

Circle element with the mug on top

<circle style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:9.51950836;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke" id="path36" cx="68.414307" cy="130.71523" r="3.7620001" />

Circular path with the mug on top

<path style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:1.60968435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke" d="m 68.414044,126.95318 a 3.7618673,3.7618673 0 0 0 -3.76153,3.76204 3.7618673,3.7618673 0 0 0 3.76153,3.76205 3.7618673,3.7618673 0 0 0 3.76206,-3.76205 3.7618673,3.7618673 0 0 0 -3.76206,-3.76204 z" id="path20" />

single path

<path style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:1.60968435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke" d="m 68.414044,126.95318 a 3.7618673,3.7618673 0 0 0 -3.76153,3.76204 3.7618673,3.7618673 0 0 0 3.76153,3.76205 3.7618673,3.7618673 0 0 0 3.76206,-3.76205 3.7618673,3.7618673 0 0 0 -3.76206,-3.76204 z m -1.21542,0.92656 h 2.40554 c 0.0913,0.21025 0.18256,0.42071 0.27387,0.63097 h 0.47284 v 0.60099 h -0.17984 l -0.1664,1.05989 h 0.24961 l -0.34779,1.96267 -0.21238,-0.003 -0.22326,1.41955 h -2.12492 l -0.22429,-1.41955 -0.22479,0.003 -0.34829,-1.96267 h 0.26304 l -0.16692,-1.05989 h -0.1669 v -0.60099 h 0.44752 c 0.0913,-0.21026 0.18206,-0.42072 0.27336,-0.63097 z m 0.12608,0.19068 c -0.0614,0.14155 -0.12351,0.28323 -0.185,0.42478 h 2.52336 c -0.0614,-0.14155 -0.12248,-0.28323 -0.18397,-0.42478 z m -0.65524,0.63097 v 0.21911 l 0.0594,5.2e-4 h 3.35844 l 0.0724,-5.2e-4 v -0.21911 z m 0.16846,0.41083 0.1669,1.05937 h 2.80603 l 0.16693,-1.05937 -1.57046,0.008 z m -0.061,1.25057 0.27956,1.5782 1.34411,-0.0145 1.34567,0.0145 0.28059,-1.5782 z m 1.62367,1.75441 -1.08519,0.0124 0.19325,1.2299 h 1.79835 l 0.19328,-1.2299 z" id="path2714" inkscape:connector-curvature="0" />

You probably can see the code becomes more complex and needs more characters to describe it. More characters in a file result, of course, in a larger size.

Node cleaning

If you open an example SVG in Inkscape and press F2, that activates the Node tool. You should see something like this:

Inkscape - Node tool activated

Inkscape – Node tool activated

There are 5 nodes that aren’t necessary in this example — the ones in the middle of the lines. To remove them, select them one by one with the activated Node tool and press the Del key. After this, select the nodes which define this lines and make them corners again using the toolbar tool.

Inkscape - Node tool make node a corner

Inkscape – Node tool make node a corner

Without fixing the corners, handles are used that define the curve, which gets saved and will increase file size. You have to do this node cleaning by hand, as it can’t be effectively automated. Now you’re ready for the next stage.

Use the Save as function and choose Optimized svg. A dialogue window opens where you can select what to remove or keep.

Inkscape - Dialog window for save as optimized SVG

Inkscape – Dialog window for save as optimized SVG

Even the little SVG in this example got down from 3.2 KB to 920 bytes, less than a third of its original size.

Back to the getfedora page: The grey voronoi pattern used in the background of the main section, after our optimization from Part 1 of this series, is down to 164.1 KB versus the original 211.12 KB size.

The original SVG it was exported from is 1.9 MB in size. After these SVG optimization steps, it’s only 500.4KB. Too big? Well, the current blue background is 564.98 KB in size. But there’s only a small difference between the SVG and the PNG.

Compressed files

$ ls -lh insgesamt 928K -rw-r--r--. 1 user user 161K 19. Feb 19:44 grey-pattern.png -rw-rw-r--. 1 user user 160K 18. Feb 12:23 grey-pattern.png.gz -rw-r--r--. 1 user user 489K 19. Feb 19:43 greyscale-pattern-opti.svg -rw-rw-r--. 1 user user 112K 19. Feb 19:05 greyscale-pattern-opti.svg.gz

This is the output of a small test I did to visualize this topic. You should probably see that the raster graphic — the PNG — is already compressed and can’t be anymore. The opposite is the SVG, an XML file. This is just text and can compressed, to less then a fourth of its size. As a result it is now around 50 KB smaller in size than the PNG.

Modern browsers can handle compressed files natively. Therefore, a lot of web servers have switched on mod_deflate (Apache) and gzip (nginx). That’s how we save space during delivery. Check out if it’s enabled at your server here.

Tooling for production

First of all, nobody wants to always optimize SVG in Inkscape. You can run Inkscape without a GUI in batch mode, but there’s no option to convert from Inkscape SVG to optimized SVG. You can only export raster graphics this way. But there are alternatives:

  • SVGO (which seems not actively developed)
  • Scour

This example will use scour for optimization. To install it:

$ sudo dnf install scour

To automatically optimize an SVG file, run scour similarly to this:

[user@localhost ]$ scour INPUT.svg OUTPUT.svg -p 3 --create-groups --renderer-workaround --strip-xml-prolog --remove-descriptive-elements --enable-comment-stripping --disable-embed-rasters --no-line-breaks --enable-id-stripping --shorten-ids

This is the end of part two, in which you learned how to replace raster images with SVG and how to optimize it for usage. Stay tuned to the Fedora Magazine for part three, coming soon.

Posted on by — Leave a comment

Design faster web pages, part 1: Image compression

Lots of web developers want to achieve fast loading web pages. As more page views come from mobile devices, making websites look better on smaller screens using responsive design is just one side of the coin. Browser Calories can make the difference in loading times, which satisfies not just the user but search engines that rank on loading speed. This article series covers how to slim down your web pages with tools Fedora offers.

Preparation

Before you sart to slim down your web pages, you need to identify the core issues. For this, you can use Browserdiet. It’s a browser add-on available for Firefox, Opera and Chrome and other browsers. It analyzes the performance values of the actual open web page, so you know where to start slimming down.

Next you’ll need some pages to work on. The example screenshot shows a test of getfedora.org. At first it looks very simple and responsive.

Browser Diet - values of getfedora.org

Browser Diet – values of getfedora.org

However, BrowserDiet’s page analysis shows there are 1.8MB in files downloaded. Therefore, there’s some work to do!

Web optimization

There are over 281 KB of JavaScript files, 203 KB more in CSS files, and 1.2 MB in images. Start with the biggest issue — the images. The tool set you need for this is GIMP, ImageMagick, and optipng. You can easily install them using the following command:

sudo dnf install gimp imagemagick optipng

For example, take the following file which is 6.4 KB:

First, use the file command to get some basic information about this image:

$ file cinnamon.png cinnamon.png: PNG image data, 60 x 60, 8-bit/color RGBA, non-interlaced

The image — which is only in grey and white — is saved in 8-bit/color RGBA mode. That’s not as efficient as it could be.

Start GIMP so you can set a more appropriate color mode. Open cinnamon.png in GIMP. Then go to Image>Mode and set it to greyscale. Export the image as PNG with compression factor 9. All other settings in the export dialog should be the default.

$ file cinnamon.png cinnamon.png: PNG image data, 60 x 60, 8-bit gray+alpha, non-interlaced

The output shows the file’s now in 8bit gray+alpha mode. The file size has shrunk from 6.4 KB to 2.8 KB. That’s already only 43.75% of the original size. But there’s more you can do!

You can also use the ImageMagick tool identify to provide more information about the image.

$ identify cinnamon2.png cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2831B 0.000u 0:00.000

This tells you the file is 2831 bytes. Jump back into GIMP, and export the file. In the export dialog disable the storing of the time stamp and the alpha channel color values to reduce this a little more. Now the file output shows:

$ identify cinnamon.png cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2798B 0.000u 0:00.000

Next, use optipng to losslessly optimize your PNG images. There are other tools that do similar things, including advdef (which is part of advancecomp), pngquant and pngcrush.

Run optipng on your file. Note that this will replace your original:

$ optipng -o7 cinnamon.png ** Processing: cinnamon.png 60x60 pixels, 2x8 bits/pixel, grayscale+alpha Reducing image to 8 bits/pixel, grayscale Input IDAT size = 2720 bytes Input file size = 2812 bytes Trying: zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 1922 zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920 Selecting parameters: zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920 Output IDAT size = 1920 bytes (800 bytes decrease) Output file size = 2012 bytes (800 bytes = 28.45% decrease)

The option -o7 is the slowest to process, but provides the best end results. You’ve knocked 800 more bytes off the file size, which is now 2012 bytes.

To resize all of the PNGs in a directory, use this command:

$ optipng -o7 -dir=<directory> *.png

The option -dir lets you give a target directory for the output. If this option is not used, optipng would overwrite the original images.

Choosing the right file format

When it comes to pictures for the usage in the internet, you have the choice between:

JPG-LS and JPG 2000 are not widely used. Only a few digital cameras support these formats, so they can be ignored. aPNG is an animated PNG, and not widely used either.

You could save a few bytes more through changing the compression rate or choosing another file format. The first option you can’t do in GIMP, as it’s already using the highest compression rate. As there are no alpha channels in the picture, you can choose JPG as file format instead. For now use the default value of 90% quality — you could change it down to 85%, but then alias effects become visible. This saves a few bytes more:

$ identify cinnamon.jpg cinnamon.jpg JPEG 60x60 60x60+0+0 8-bit sRGB 2676B 0.000u 0:00.000

Alone this conversion to the right color space and choosing JPG as file format brought down the file size from 23 KB to 12.3 KB, a reduction of nearly 50%.

PNG vs. JPG: quality and compression rate

So what about the rest of the images? This method would work for all the other pictures, except the Fedora “flavor” logos and the logos for the four foundations. Those are presented on a white background.

One of the main differences between PNG and JPG is that JPG has no alpha channel. Therefore it can’t handle transparency. If you rework these images by using a JPG on a white background, you can reduce the file size from 40.7 KB to 28.3 KB.

Now there are four more images you can rework: the backgrounds. For the grey background, set the mode to greyscale again. With this bigger picture, the savings also is bigger. It shrinks from 216.2 KB to 51.0 KB — it’s now barely 25% of its original size. All in all, you’ve shrunk 481.1 KB down to 191.5 KB — only 39.8% of the starting size.

Quality vs. Quantity

Another difference between PNG and JPG is the quality. PNG is a lossless compressed raster graphics format. But JPG loses size through compression, and thus affects quality. That doesn’t mean you shouldn’t use JPG, though. But you have to find a balance between file size and quality.

Achievement

This is the end of Part 1. After following the techniques described above, here are the results:

You brought image size down to 488.9 KB versus 1.2MB at the start. That’s only about a third of the size, just through optimizing with optipng. This page can probably be made to load faster still. On the scale from snail to hypersonic, it’s not reached racing car speed yet!

Finally you can check the results in Google Insights, for example:

In the Mobile area the page gathered 10 points on scoring, but is still in the Medium sector. It looks totally different for the Desktop, which has gone from 62/100 to 91/100 and went up to Good. As mentioned before, this test isn’t the be all and end all. Consider scores such as these to help you go in the right direction. Keep in mind you’re optimizing for the user experience, and not for a search engine.

Posted on by — Leave a comment

Even better image upscaling with Waifu2x

You may have already seen the article here in the Magazine about upscaling bitmap images with better quality. That article covered a few utilities to achieve good results, but there’s always room for enhancement. Meet Waifu2x, a sophisticated tool that uses deep convolutional neural networks, or machine learning for short. Therefore it benefits from trained model data sets. Read on to see how well it performs to upscale your images, and how to get the same benefits even without an Nvidia card.

Here are some examples. First, a character that will be familiar to Fedora fans:

Making the Beefy Miracle hot dog four times larger keeps it nearly perfect!

Here’s another example:

Upscaling a drawing from an old book delivers really outstanding results.

Because Waifu2x performs the calculations using Nvidia CUDA computing platform, it requires an Nvidia graphics card. This article, however, covers a more portable version called Waifu2x-converter-cpp that runs everywhere.

Waifu2x-converter-cpp doesn’t require a dedicated Nvidia GPU. Instead, it leverages the OpenCV and OpenCL libraries. Although the overall performance is slower compared to the original code, it’s portable and more people are able to use it. And of course it runs on Fedora!

Follow the directions below to give it a spin.

Installing Waifu2x-converter-cpp in Fedora

To build the application from source, first install build dependencies:

sudo dnf install -y gcc-c++ cmake opencv-devel opencl-utils-devel

Then grab the source code, build it and install the files:

git clone https://github.com/DeadSix27/waifu2x-converter-cpp.git cd waifu2x-converter-cpp/build cmake -DLIB_SUFFIX=64 ../ make sudo make install

Tell the dynamic library linker to index the directory with locally installed libraries:

sudo ldconfig /usr/local/lib64

Now everything is ready for upscaling. The example command for processing an image is as follows:

waifu2x-converter-cpp --scale_ratio 2 -i /path/to/input_file -o /path/to/output_file

Don’t miss this very helpful command for extras, such as switching OpenCL on/off, playing with noise level, and so on:

waifu2x-converter-cpp --help

Using a graphical front-end for Waifu2x

Another step forward is to install Qtwaifu2x, a graphical tool that lets you escape Fedora terminal and process images with comfort and convenience.

Practically all you have to do is hit Browse and Start to launch the upscaling task.

Installing Qtwaifu2x in Fedora

First, install the main build dependency:

sudo dnf install -y qt5-qtbase-devel

Then get the code and build it:

git clone https://github.com/cmdrkotori/qtwaifu2x.git cd qtwaifu2x qmake-qt5 && make

To run the application from the current directory:

./qtwaifu2x

The main window has quite a few options, but it’s usually enough to provide the input file and hit the Start button.

Brew yourself a cup of tea and come back in a while to enjoy the perfectly upscaled image!

Posted on by — Leave a comment

Upscale bitmap images with better results

Most images on the Web are small or medium sized, since otherwise users need to wait longer before their favorite web pages load. However, sometimes you need to find a larger version of an image, but the search doesn’t bear fruit. Any bitmap image can be scaled up or down in an image editor (such as Gimp). But obviously upscaling would not add any detail to the image. Instead, the result will usually be blurred, pixelated and noticeably stretched-up. In this brief roundup we’ll try to upscale bitmap images with a little better result.

There’s no magic in it, just a few advanced scaling algorithms that help produce better-looking pictures. Everything is open source and works great in Fedora. The results will be tested against the Cubic interpolation method, which Gimp applies by default.

Filters in ImageMagick

This is the most famous and widely used open source software for manipulating images from the command line. Fedora, like the majority of other Linux distributions, already includes ImageMagick. Fedora even installs it by default in Fedora Workstation. ImageMagick provides  the convert command, which can also change dimensions of input images.

The trick is that convert supports filters, and ImageMagick provides a rich selection of such filters, some of which work really good for upscaling. You can check out the full list here. For instance, the point filter works well for upscaling pixel art and screen shots, as it preserves clarity and sharpness at the cost of emphasized pixels. Still, this can look better than the blurred results of the convenient Cubic algorithm.

Use it with the following syntax:

convert input.png -filter point -resize 600% output.png

The PNG file format as well as the 600% scaling factor are just examples.

Hiding pixels in Cubic is not really good for upscaling. Use something without anti-aliasing, such as the Point filter in ImageMagick.

Although it’s possible to get the same result in Gimp by choosing the None interpolation method, working with ImageMagick is sometimes easier. Not only it is installed in Fedora Workstation by default (Gimp is available, but not installed), it provides command-line tools which are ideal for scripting.

Xbrzscale

Xbrzscale is a command-line utility that implements the xBR scaling method. In brief, xBR is based on pattern recognition and interpolation, and it’s perfect for magnifying pixel art. xBRZ is an enhanced version of xBR, with a focus on preserving very small details. Therefore, xBRZ delivers pleasing results on both pixel art and photographic images, such as portraits.

In the following side-by-side comparison, the left part definitely looks preferable thanks to the superb clarity.

The Xbrzscale version features sharper edges and looks as if it had more details than the version to the right.

Install Xbrzscale in Fedora

To build this tool from source, you must install some prerequisites first:

sudo dnf -y install gcc-c++ SDL2-devel SDL2_image-devel

Let’s go ahead with Xbrzscale now:

git clone https://github.com/atheros/xbrzscale.git cd xbrzscale make

The command line syntax to upscale with this software is:

./xbrzscale X input.png output.png

…where X is the scale factor, a number within the range of 2 to 6.

Note that Xbrzscale always outputs PNG images, no matter what you feed it with. If the input file format is different, Xbrzscale will convert it to PNG.

Smilla Enlarger

Smilla Enlarger has a user-friendly graphical interface. It makes use of yet another different technology, this time based on fractal-based interpolation algorithms. The main goal is to produce sharper results when you upscale photographic images. The enlarged image usually preserves more details than the Cubic interpolation can.

Install Smilla Enlarger in Fedora

Again, start by installing the build dependencies:

sudo dnf -y install qt5-qtbase-devel

Now, build and run Smilla Enlarger:

git clone https://github.com/lupoDharkael/smilla-enlarger.git cd smilla-enlarger qmake-qt5 && make ./smilla-enlarger

The application window has numerous advanced controls and extra parameters that put a user in control of upscaling details.

Smilla Enlarger lets you choose a zoom factor, configure cropping and, more importantly, preview the result before hitting the Enlarge & Save button.

The upscale version of the sample image looks noticeably different from both the decent Xbrzscale version and the cubic-enlarged version.

Smill Enlarger adds a subtle amount of grain, which seems to effectively hide artifacts and make a picture look cleaner. Try this application on a photo to get the best results.

It’s hard to recommend the plethora of ImageMagick filters over Xbrzscale and Smilla Enlarger. The actual results will vary across different sorts of images, and of course different user preferences.