Hello,
My name is Jeffrey Zhu and I’m a Graphics Production Artist. What this means is that most of my work entails taking assets that are created and making them web/app friendly images so that our pages retain the highest amount of detail while reducing the impact to the load on a user’s devices.
This is an introduction to Graphics Production, essentially. It will gone started on a pretty boring, but important step in taking an experience to the next level. I hope to share some of the knowledge I have gained. If you are already working for a company that has an image and web standard, great! Hopefully there is information that could still be of use to you here, but if not, I hope this gives you an idea of how to create some!
Let’s say we have just come off a long development cycle. We had done all the research a team could and designed the next greatest app (or webpage). The engineers are now in need of assets (images) for them to build the app. The team manages to load a high resolution asset that should fit across all devices, since, as long as it fits in the code, it should scale correctly to show on your page.
We did all the work during our user testing to make sure that the prototype worked smoothly and quickly. In testing across all the devices, this high resolution asset seems to have no issues loading in the lab. However, you notice that when you are outside the site seems to be a little slow, or takes even longer to work on a more budget friendly device. There may be many factors in play: such as scripts for our websites,a bug incode during development, or it could be those assets we had built earlier. All of which can be increasing the load that a device needs to download, which can be a serious problem for those who are on mobile connections or those with slower internet speeds.
Images can be heavy if improperly managed. Even worse, it’s possible to have them be exported with strange artifacts or inconsistent with what was intended. So in situations where images are being displayed, it is in our best interest to reduce their impact to the load as much as possible.
Plan to export most of your images as either a JPG or PNG. Unless you have specific reasons to, Usually you can be safe with exporting most of your assets as a JPG. The reason we want to do this is that it’s often more simpler to code and that it is surprisingly light if done right. Plan to export the images also at the exact targeted size they need to be.
This also means that if you intend to crop your asset that you should create an export of it that already has the crop, so the user never has to download or render more than they will ever see.
This way, if we have a phone that needs to be shown in 5 different places, all of different sizes, rotations, or crops, of the asset without having any more data than we need.
That means if you have a 1000px width by 400px height banner, and your photo is some 3840 x 2160 pixel (4k) file, create an export with that photo cropped and resized to the size of your banner. But if you have multiple banners or places that need to use that same asset, then you do as many as you need.
Working from the highest source of quality source we can get will give us the best results. However, this can easily get lost/destroyed if handled improperly. It can also make our work documents way larger than they really need to be.
So, assuming you do have a really high resolution asset, like a product photo or 3d render converted into an image, a precaution is to make a source copy and duplicate copy.
It is really important that you keep these separate, since this process is destructive – so you can never go back unless you have a backup. Certain programs like Figma can operate under non destructive ways, but others like Photoshop are usually destructive unless you are working with a smart object. Either way, especially if you don’t know, It’s best to work with backups on hand.
And to minimize the load on some of our files (when working with photoshop), it is ok to resize an image to 1k to make it so that when it’s placed inside our files, it doesn’t have the source size multiplied.
This is a pretty generic, high level overview that should get people started thinking about image optimization. There is so much that goes into it for increasingly diminishing returns, but the effort can make quite a difference.
Image optimization is usually a minor detail that could be often ignored by those who think it’s not necessary. It doesn’t take very long for users to decide that they would rather visit another site later if they cannot get what they want done fast. Although you could design your page then to be as simple as possible, what if you need to show a render of a physical product? This is where image optimization starts to become a little bit more crucial, because there is a challenge to keeping the most amount of detail possible while also being the smallest file size as possible.
Now, I know I haven’t really shown how to do any of this, and unfortunately, there are many different ways of achieving good results for each different program. But they will have to be explained individually. Please look forward to an expanded post on several programs that can give great results!
