In this article I’m gonna spill out some tips for around Images for Android Native, Flutter and Web. They are essential visual component on all platforms – Desktop, Mobile, Web and even out – in the real world.
Common knowledge about Images
- Vector graphics resize up and down without losing quality. They are in majority smaller in size, because they contain only the definition of an image and not 100% the literal pixels, require computation in the rendering phase.
- Raster images are pre-drawn, pixel level predefined. They are in majority bigger in size, they lose quality if you resize them up, but they have full definition of an image and can be directly displayed.
Images in Web
The Raster Images on the web are implemented with the img or picture tags. The vector images could be wrapped with the same tags , just they need to reference a file containing standardized vector definition. This is the SVG format. SVG are a Internet Standard of vector images from year 1999. Few more things to enumerate from my global point of view.
- PNG are for images that require transparent pixels. Valid and probably required today with the dark and light themes. That makes them architecturally a little bit bigger.
- JPEG compress better images than PNGs, because they lack the transparent flag – with fixed colors for all pixels.
- There are endless variations of sizes – the images get displayed on the Web. That comes from the Media Queries, from the device pixel densities (mobile devices), from the display or requested size area. The best size of an image is the display. You could show Responsive Images.
- There are canvas and webgl technologies so, the possibilities for client side image handling is endless. I’ve experimented with the D3.js library in the past and the result is shiny and very cool.
Another aspect that affects images is the resource caching and network call optimizations.
- The global, app images should be cached on the client so no network call is executed.
- For records that have millions of quantities, probably a header setting time storing limit of file modification is more appropriate. This way it is cached, but not forever. With the Options HTTP network call a client (like – the browsers) could check if they should download an image again.
Images in Android Native
Android is a client side platform. For the images that are stored on the client (within the resources of the app) – it has all the possibilities of the Web. They may be called or packaged and exposed (addressed) differently, but they are generally the same. There are static raster and vector images, there is canvas and programmatic drawing. One more approach in the pre-configured, pre-code way is using selector definitions. They are a little bit like CVG-CSS way of configuring images.
The caching approach on Android I’ve seen is almost never implemented with an options HTTP call. I’ve seen only versioning logic around the images or the data records. The cache is the actual file system, instead of an API of a cache.
One important thing to point out here is the best practice of delegating the loading of the image onto a non-main Java Thread. The work is often delegated – behind the scenes to a library or by a kotlin extension. Glide is one popular library I’ve personally for loading images on Android. More recent option is coil.
Images in Flutter
The need to support everything and every platform has made integrating images into the flutter framework a little bit more complex. For PNG and JPG resources – there is no problem. For SVG images – I’ve seen possible integration using Font Definitions. There are also dart packages https://pub.dev/packages/flutter_svg. Another option is directly drawing the vector images path with dart canvas: https://www.google.com/search?q=flutter+draw+path&oq=flutter+draw+path. Flutter’s dart compiler takes care to translate this no a native canvas element or html canvas tag and the necessary JavaScript.
There is a build-in Image class in dart to get started with this visual component. Beyond it, there are tons of packages. Some of the plugins I’ve used are discontinued: https://pub.dev/packages?q=cached_network_image. The most recent option I’ve integrated is the extended image.