Industry

Banking

Client

Handelsbanken

Role

Designops

Image processing and structure for Handelsbanken to reduce load time

Creating a folder structure for content managers, for easier access when creating new pages and reducing load time by compressing images.

The content managers are using a CMS where they store all their images used on the website. Previously it was managed by all the managers and print designers (with minimal experience within digital design) It created a mess of folders with no naming conventions or logical structure on where to find the images. The CMS is an outdated legacy system that is not compatible with newer gen - WebP format and also responsive images. For one image you had to manually format it into four different sizes to be able to use it on different screen sizes. Handelsbanken are using a lot of images on their website, a page could have up to 14 images all over 1mb. So having a template or script that could help with formatting all the images would be crucial on saving time and minimize all manual work with cropping. Also using a program that could help with compressing all the images equally. Creating a threshold of 100kb per image would now total up to the same size of 1 image.

Large Project Gallery Image #1

Large Project Gallery Image #2

Large Project Gallery Image #4

Large Project Gallery Image #5

Process and Outcome

I chose to look through all the images and see where each image was connected to the page. This way I could get an overview for each category e.g lifestyle, workplace, home, tech. I then went on to group them into each formatted size. So we would have Hero-images (the largest, which also had to have the motive of time image right aligned) Sub-hero for underpages, this one had to have the motive centered because of the way the image behaved in mobile view. Where it became a round image. - Reduced loading time on the website by 2 seconds. - Increased speed when formatting images by 150% - Format template for easy onboarding of new designers.