How To Edit And Optimize Images For Web Performance

When designing web pages, how should the dimensions of the images used on the web be set? How can web images be optimized without compromising the quality? There are numerous articles online, both domestic and international, that explain how to create web images and what factors to consider. Over the years, I have iterated through various methods and continually optimized my approach to efficiently produce a large number of web images (Last updated: June 14, 2022)

“Practical experience sharing, not just online information compilation.” – Irving

My methods for creating web graphics primarily focus on two main goals: high efficiency and the ability to produce them in large quantities.

Video Explanation

Explanation: Because there’s just so much to do! I need to be extremely, extremely efficient in creating a large number of web graphics, and they also need to be optimized to prevent increasing the server load and slowing down the browsing speed for users. So, I quickly recorded a 26-minute video to explain the methods I commonly use for creating graphics, but it doesn’t have subtitles, so you’ll need to turn on the sound. If you’re also struggling with web design or know other designers with similar needs, feel free to share it with them!

Video Content

How to set the size of web images?

To maintain high performance, I typically set the size of web images in two ways. For images larger than 600px in width, I output them with a width of 1920px and an automatically scaled height to maintain the aspect ratio. For images with a width smaller than or equal to 600px, I output them with a width of 1200px. This ensures consistency and optimal display on different devices.

Note: It is important to remove the decimal points and keep the dimensions of the images as whole numbers, whether it’s width or height. This ensures that unnecessary issues like layout disruptions and blurriness do not occur on the webpage.

How to quickly and efficiently export a large number of web images (without using Photoshop to export them one by one)

In Figma, you can select multiple images at once and set the desired format for bulk exporting, which saves a lot of time and effort. It’s indeed a fast and efficient method! However, there’s one thing to note: when importing images into Figma, it’s important to check if there are any color changes. If there are, you may need to inspect and adjust those images in Photoshop to ensure they are displayed correctly.

3. How to optimize web images, you can follow these best practices?

In the past, like many web designers, I used to export images and then compress them using tools like TinyPng. However, I recently discovered the TinyImage Compressor plugin for Figma, which allows me to directly export optimized images from within Figma. This has significantly improved my workflow by eliminating the need for extra steps and saving time. It has greatly increased my efficiency!

Note: Graphic designers and web designers indeed belong to different fields, and there are many details specific to web design that need to be taken into account.

Tools

1. Figma：https://www.figma.com
2. TinyPNG：https://tinypng.com

Efficiency Tips

In Figma, there is a plugin called “TinyImage Compressor” that functions similar to TinyPNG. It allows you to optimize images directly within Figma and download them in various formats, including compressed JPG, PNG, SVG, WebP, GIF, WebM, AVIF, and PDF. This plugin helps streamline the process and improve efficiency by eliminating the need to use external tools. However, please note that there might be limitations on the usage of the plugin. If you reach the usage limit, you can always resort to using the web version of TinyPNG without any issues.

Usage: In Figma, first select the image(s) and set the export format. Then, right-click on the selected image(s) and choose Plugins > TinyImageCompressor. Confirm the list of images to be exported and click the “Compress Images” button.

Additional Instructions

Some clients provide an overwhelming number of product and lifestyle images from photographers, sometimes totaling five to six hundred images. To quickly filter, edit, and export them in web-ready formats, I use three main tools interchangeably based on different scenarios. This helps to improve execution efficiency. I will create a brief instructional video later to demonstrate how to use these tools effectively.

To efficiently handle large-scale photo editing, graphic creation, and image exporting, I employ the following methods:

1. Photoshop: Utilizing action recording, batch processing, and downloading multiple layers
2. Figma: Setting unified dimensions, rapid sorting, bulk naming, and downloading selected assets
3. Lightroom: Star rating classification, AI-based editing, and bulk downloading of selected images.

Note

1. Assuming that the photographs are taken by professional photographers and already have well-composed scenes, the mentioned methods are applicable. However, if additional tasks such as background removal, object removal, or intricate retouching are required, Photoshop would still be necessary for editing each image individually.
2. Improving efficiency can help speed up the execution time, but it does not mean the process becomes completely effortless. It simply means it becomes relatively faster.

---

---