So, here we are. It’s 2017 and as usual, the digital world moves forward and faster than ever before. But one thing doesn’t seem to move as fast: files size! We still struggle with files size as we did 10 or 15 years ago and the images we are using in our digital products, sites and apps, are becoming bigger and heavier than ever before. Hi-res displays and content bonanza are generating big files and optimizing them is still a required task in your daily workflow.
If you build digital staff, you probably already have an optimization workflow on your side, but I want to share with you what we have learned so far.
With broadband connections available on mobile phones, one could (wrongly😱) assume that today we don’t need to fine-tune our bitmap assets as we used to… As connection speeds are getting faster, images are getting bigger and very large.
With high-resolution screens (like retina laptops, 4K/5K displays, QWHD screens on mobiles, etc.) images are bigger and bigger. For example, look at this:
As you can see, the same image at 1x (like we usually have on a normal desktop monitor) is 4 times smaller (yes 4, not 2 times) than the 2x version!
An image — let’s say, of 480 x 300px is 4 times smaller than a 960 x 600px image. This automatically translates into files that have much bigger sizes.
A 50 kB image at 1x could easily become a 200 kB image at 2x! Oh my gosh!
Now, if you have a 5.5 inch iPhone or a high-end Android smartphone, the assets required for this common devices, are respectively 3x and 4x!!! An image at 4x has 16x more pixels than the same image at 1x.
Let’s do the math:
— 1x image
480 x 300px = 144 000px
— 4x image
1920 x 1200px = 2 304 000px (that’s 16x more data to handle!)
Designing a digital product today requires to meticulously take care of your heavyweight bitmap assets.
First of all, don’t rely exclusively on Photoshop as your main “assets exporter.” We use Photoshop in conjunction with another great tool.
Lossless compression gets rid of most of your image metadata and use some advanced algorithm to better optimize the file size.
This article doesn’t want to push any software in particular, we just want to share our daily workflow: it’s based on Photoshop and ImageOptim. If you have a different setup, or if you work on a PC, we’ll be glad to know something about it. Feel free to share your tips with us, in the responses at the bottom of this page or by email!!!
Now, there are two types of image compression in ImageOptim: lossless compression and lossy compression. Lossless is like a zip file: your files become smaller without losing any quality, lossy compression on the other side, is like an mp3 file, you lose some data in order to obtain a smaller size.
Lossless compression — the simpliest 👶
Lossless compression automatically gets rid of most of your image metadata (color profiles, exif info, GPS coordinates, etc.) and use some advanced algorithms to better optimize the overall file size. Photshop for example, even when you choose “save for the web”, doesn’t do a really great job at this stage… It optimizes your image, of course, but not as much as ImageOptim does. Look at this example:
As you can see ImageOptim does a slightly better job than Photoshop in this case, making the file 4% smaller. Of course, a JPG file is a lossy format itself (when you export a JPG you lost some data) but getting rid of some metadata lets you gain some extra kB…
Lossy compression on the other end, gets rid of some image data too, in order to achieve a smaller file size than a basic lossless compression.
But it’s with PNGs where ImageOptim really shines. Look at the two examples above: the “optimized” version exported from Photoshop is 1,2 MB. If you export this image again, this time from ImageOptim, it shrinks it down to 788 kB!!! That’s 40% smaller. Not bad 👍!
Pro tips for “lossless compression” in ImageOptim: export your assets using your preferred software as usual (like Photoshop for example), then drag&drop the exported images — either JPGs, PNGs or GIFs) into ImageOptim for a perfect result. As I said before, even a JPG that goes through a lossless compression in ImageOptim, gets a bit ligther than in Photoshop.
If you are working on a landing page, a pictures-rich section or a mobile app, you probably should optimize asset by asset.
Lossy compression — the hardest 💪
Lossy compression on the other end, gets rid of some image data in order to obtain a smaller size than a basic lossless compression. In the “Lossy World”, there isn’t a one-size-fits-all scenario. You have to play with it until you find a good compromise between weight and quality.
Sometimes, the optimized asset at 2x/3x/4x has a file size similar or even smaller than the 1x counterpart!!!
With some image files, you can push it very far with the settings, while with others you just can’t. It’s an image-by-image process. If you are working on a landing page, a pictures-rich section or a mobile app, you probably should optimize image by image. Of course, if you are dealing with a large images database, you’ll try to find the best average settings for the whole set.
So, now you may yell: ”Yeah, great! I already knew that”. But I tell you this: at usebeautiful we have learned a little trick!
High resolution images (for HiDPI screens on desktop, laptop and mobile) can undergo a much stronger compression without your eyes even notice it.
Sometimes, the optimized asset at 2x/3x/4x has a file size similar or even smaller than the 1x counterpart!!! Holy 💩, how is that possible?
Well, here’s the trick that not anybody knows about: on a HiDPI screen the physical pixels are so small compared to a standard display, that compression artifacts are actually harder to see with your eyes 😱😱😱.
Look at this JPG image (to see the actual size, just click on each link in the description):
As you can see, the HiDPI asset (1 067 x 1 600px — double the size) is just 17% bigger than the original 1x image. If you look closely the 2x version at 100% (on a standard display, not a HiDPI monitor) you’ll notice some artifacts due to the high compression applied to the picture (a JPG with only 15% quality in Photoshop).
But as discussed few lines above, on a HiDPI display (where the physical pixels are ultra-small) you’ll never see any artifact at all: your eyes will just see a perfect sharp hi-res picture! How great is that!
Pro tips for “lossy compression” in ImageOptim (for HiDPI images): export your assets using your preferred image editing software (like Photoshop for example) and play around with the settings. Try going down to 20–25% of JPG quality and don’t be afraid if compression artifacts start to appear… Export your image and look at it at 100% on the target HiDPI screen (a retina display, a 4K monitor, a not too old smartphone…). If you can’t discern any imperfection, go back to your editing software and push the settings even further (smaller is always better!). Check the exported asset on the target device and so on until you get the perfect settings for the smallest file.
Now, open ImageOptim and apply a lossless compression (to get rid of most of your image metadata in order to obtain an even smaller file).
Here you have it! A hi-res bitmap (2x, 3x…) that’s barely bigger than the original 1x counterpart.
It appears to be a tedious process (and it is sometimes) but you can’t bypass it if you really want to optimize your assets. Having the smallest size possible can significantly reduce the total weight of your digital product, making downloads faster and users happier, especially on mobile where spotty connections and data plans aren’t always on your side.
ImageOptim preferences — Lossless compression
ImageOptim preferences — Lossy compression
Export your assets from Photoshop (JPGs, PNGs or GIFs). If you have to provide images for HiDPI screens, prefer the JPG format and push the quality slider down to 20–25% (your mileage may vary here…). Don’t worry if you start to see artifacts on your images, just remember this: a today’s smartphone can easily have a resolution of 360DPI and up (to well over 500 DPI sometimes) while even a state-of-the-art 5K desktop monitor only has 218DPI… Smartphones and tablets have ultra-small pixels, and what seems to bad on your screen could just be perfect on these high-resolutions devices!
Once you exported your assets from Photoshop, go to ImageOptim and take them to the next level. Use a “lossless compression” and you’ll gain some extra kB on JPGs and a lot more on PNGs!!! Do you want to shrink them down even further? Go for a “lossy compression” and start playing with the settings until you find the sweet spot (quality vs size). Lossy compression is very effective, especially if you have to optimize JPGs, PNGs and GIFs for HiDPI screens. If you work on mobile products and apps, don’t blindly trust what you see on your computer monitor. Test your optimized output on mobile displays to judge for yourself. You’ll be amazed seeing how artifacts will suddenly disappear on these tiny pixels😎!!!
OK. I’m done for today. It’s time for you to start optimizing Your Assets!
PS/ thanks for reading digital friend👍!!! It was a long geeky🤓 post.