This post by our Lead UI/UX designer “Tuna” Jeff was inspired by the resources saved in this article. If you are using any of these images, we recommend downloading this zip file and re-loading the smaller, optimized version to your site — your users will thank you!
Part 1 of a 2 part series
We often forget, digital images (on a computer) are just bits of data that the computer converts into graphical representations we can understand. I often forget that, at least, so I would imagine others do as well. That said, it’s no wonder that something like 65 to 70% of a websites content is image data. And very often, that data is way too large and slows down the page. Most importantly, it’s usually unnecessarily so. Just to clarify, I am referring mainly to pictures, and not icons, logos, or any other simple image types.
Okay, so what does that mean really?
Well, more often than not, this means that the images used in their content were not properly optimized for the web. And I’m not even referring to the whole mobile web & image discussion, which introduces a whole slew of other concerns. What I’m referring to is proper image formatting, color settings, and image optimization. Say what!?! I know, it sounds confusing. But lets see if we can’t break it down a bit more so it’s not quite so off-putting.
Image formats for the web
It’s generally accepted now that there are 3 workable image types: .jpg .gif and .png. However, we can get images in all types of formats that typically don’t play well with browsers. Some of the might be .tiff, .bmp, .raw, .exit, etc. So, you can see how a non-tech savvy person who receives an image in one of these formats might have issues converting this, or even knowing what to do with them. If you have access to Photoshop, that’s the best place to start. Fortunately, there are some resources on the web that can help us to convert these files to web-friendly formats (see the resources at the end).
Image Color Settings
RGB or CMYK? I won’t get technical, but monitors display RGB, and browsers want images in RGB. So, in my previous jobs, where I worked with clients often, I would get emails or calls about our apps being broken because a certain image wouldn’t show up. But, it turned out the client was uploading CMYK images, and older browsers (and some modern ones) don’t support images saved in this color space. So again, what are most people to do? Too often, they had no choice, and didn’t know there was any issue, so nothing. But, again, the web is your friend; there are a good amount of online tools to help out with converting CMYK to RGB as well (see the resources at the end).
The bane of the web are images. Why? Because images delay load times on websites, and users are not patient (myself included). Large images delay load times even more. But they don’t always have to. What can be done about this? If the image is a .jpg, reducing the optimization level to an acceptable point where the image itself is still recognizable enough, but perhaps not 100% sharp. Yes, I know, this does not sound ideal, but the web is a trade-off: speed and load-time paired with user experience. If the image is a .gif or .png, then try reducing the number of colors used or the type of compression used. Again, in 2014, there are free online tools available to help with image optimization as well as the aforementioned issues (see the resources at the end).
Tips to keep in mind
The main things to keep in mind, if you ever are adding images to a website are the following: is the image the right format for the web, is the color set to RGB, and can the file be any smaller. The last part is so important, I’ll repeat it. Do you really need an image that is 100% crisp, or would just 60% of the work for most of your users? 99% of the time, that will be more than sufficient. The smaller the better, because, the smaller the image size, the quicker your website will load for your users and allow them to do what they need to do.
Next time, we’ll look at how our users can best take this knowledge and apply it inside LeagueApps, specifically how to take an image from point A to point B.
Image Editing/Optimization Resources
Advanced cropping and editing with a nice UX
Note: this is an app an employee built, but we think it’s pretty boss — choose a max width or height, and get the optimized image
Easily convert CMYK to RGB
Auto-optimize images to remove unnecessary bytes from them
Advanced lossy compression for PNG images that preserves full alpha transparency – that one worked great for me (decreased image size by 5 times without visible quality loss)!
- PNG optmizer
PNG optimizer can reduce, without quality loss, the size of your PNG image up to 20% by optimizing compression and stripping unused meta-data