Resizing and Optimizing Images for Web & Mobile in 2019

Lukas Gisder-Dubé
Level Up Coding
Published in
5 min readJan 15, 2019

--

I have been working in the internet my entire career — except for my teenage years, but I guess they don’t count. Working in web (development) is a great thing, the industry is ever growing and new possibilities pop up everywhere, from AI to Blockchain to IoT. I however, began with designing and coding simple websites. This first got me hooked with web development and has kept me busy ever since.

Building a website or an app takes a lot of time and effort, increasing in complexity. Now why is that? Firstly, we have the possibility to make better and more complex things. But then there’s also the users’ hunger for more information and, more importantly media. We see social networks being incredibly popular and beginning to form their own industries with their own business models. One thing seems to be consistent with the evolving internet: media. It does not matter what form, images, GIFs, Videos or Stories. People love it and media is necessary to build a good online presence.

Having built countless websites and apps, I always encountered a problem, how do you put your media (for me mainly images) in the correct size? When you download an image from Unsplash (thanks for providing me with great photos), you will get a huge file, ranging from anywhere between 1 to 10 MB. Just putting that on a website or an app will greatly increase page load time and maybe even decrease performance. You definitely don’t want that, since Google is very conscious about it. So you have to optimize images (or any media) before putting it on the internet.

What is the desired result?

  1. You want to have images that are clear and do not look like they are pixelated.
  2. You want the size of your assets to be as small as possible to decrease page load time.

So how do you achieve that?

  1. You search for an image resizer / optimizer on the web and continue to use an ad-cluttered web-based tool.
  2. You manually open your file in Photoshop, Affinity Photo or similar and export it in the correct size.
  3. If you have a bigger project, you can implement an image compression workflow with webpack.

We at dube.io think that none of these options will solve the problems outlined above. We wanted a versatile solution that is easy to set up, use and maintain. Using online tools just is a pain and takes way too much of your precious time. Resizing images manually probably gives you the best result and you have full control over everything, but still takes so much time. Using an automated workflow is very nice, but takes some time to set it up correctly, meaning it is only viable for medium to big projects. Additionally, non-technical people, such as designers, social media managers, online marketers or wordpress developers, will not be able to use these workflows.

Assetizr

One tool to rule them all

We built a better tool to give everybody the possibility to have their assets (at the moment images only) in the right size, quality and format. Assetizr is a desktop app — meaning you don’t have to upload your assets — that makes resizing, transforming, and optimizing images super easy. Simply drag’n’drop your images and they will get transformed (or assetizd? we’re not sure about the wording yet). You will see that we have implemented smart presets, as well as the option to have multiple output files per dropped file. Additionally, you can change the image file type, currently we support the following:

  • JPG
  • PNG
  • SVG
  • GIF (even animated)
  • WEBP
  • BMP
  • TIFF
Assetizr workflow

Assetizr lets you change names without effort and can handle many different files at once. The output file is still in almost original quality (except for the resolution), but saves up to 90% of the original file size, taking on average less than 500ms. In short, you do not have to think much about your assets any more, just run them through Assetizr and they will be good to go. And of course, everything in Assetizr is customizable, you can select different output formats, change names or the default output size, as well as optimization settings.

What lies ahead

We already love Assetizr and use it in our day-to-day lives in our software development agency. However, there are plenty of ideas to improve it and we would love to hear your feedback. Here is a short list:

  • Video support (also video to GIF)
  • Social media and ad presets
  • Image cropping
  • More image formats
  • API to transform and optimize (maybe even store) assets

Let us know what you want to see next and how you like the app: hello@assetizr.com.

Assetizr is currently free for a limited time and available for Windows and macOS. If you want a build for Linux, please let us know as well.

About the Author: Lukas Gisder-Dubé co-founded and led a startup as CTO for 1 1/2 years, building the tech team and architecture. After leaving the startup, he taught coding as Lead Instructor at Ironhack and is now building a Startup Agency & Consultancy in Berlin. Check out dube.io to learn more.

--

--

Passionate about technology, design, startups and personal development. Bringing ideas to life at https://dube.io