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

Hi there! I’m Irving Chen, a senior web designer. Let me quickly introduce my website development experience. I have several years of experience using WordPress for website building and web design, and in recent years, I have been focusing on Shopify e-commerce website design and development. I have a good understanding of the limitations and flexibility of these website platforms. For example, WordPress offers a high level of flexibility, allowing you to navigate the backend easily, modify page code, and utilize a wide range of templates and plugins to create a comprehensive digital presence for your website. If you have any website-related questions, feel free to fill out the contact form and leave a message or request. I will get back to you as soon as possible!

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 for creating web images: Figma + TinyPNG


  1. Figma:
  2. TinyPNG:
A Figma plugin similar to TinyPNG is called TinyImage Compressor

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.


  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.

Design and Marketing Tools

  • ActiveCampaign: Email marketing and newsletter system (the best alternative to MailChimp)
  • Canva: Online graphic design tool, a real lifesaver if you don’t have a designer on your team! It solves all your marketing, social media, graphic design, and presentation needs with a wide range of templates.
  • Envato Elements: Unlimited downloads of paid resources including images, videos, music, sound effects, graphic designs, illustrations, presentation templates, and more. This is a platform I frequently use for various materials.
  • GetResponse: All-in-one marketing platform that includes email marketing, landing page creation, marketing automation, and more. You can start with a free account and upgrade as needed. This software is similar to Hubspot.
  • PickFu: An online research tool that allows you to conduct tests, optimizations, and instant consumer surveys to replace guesswork. With PickFu, you can instantly gather opinions from up to 500 US consumers. By seeking collective wisdom, it helps you make better business decisions.
  • SurveySparrow: Omnichannel Experience Management Platform for conducting customer satisfaction surveys across various channels.
  • Qwary: A CX (Customer Experience) platform that helps businesses collect customer feedback and improve shopping experiences and product performance through beautifully designed professional surveys. It allows measurement of NPS, CSAT, and CES.
  • Opinion Stage: Create free quizzes, polls, and forms with visually appealing designs and good functionality. It also offers paid plans to increase the number of responses per month.
  • Typeform: Elegant online form builder.
  • UXPressia: Quickly create professional Customer Journey Maps, Personas, and Impact Maps with various ready-to-use templates.
  • Surfer: SEO tool primarily used by content editors. It offers AI-generated SEO copy, keyword recommendations, SEO audits, and a visually appealing interface.
  • CopyAI: An AI-powered copywriting generator that creates high-quality copy for your business.
  • ABtesting AI: Have you tried optimizing your website with AB testing? Try AI testing with a free plan available.
  • Frase: Use AI to assist in searching, writing, and optimizing SEO articles with ease.
  • AppSumo: One-time payment platform for discounted digital software (greatly reduces costs).
  • Tidio: Design a high-quality online chat tool for your website.
  • Help Scout: Online customer support platform (alternative to Zendesk).
  • HeySummit: Host virtual online summits.
  • SimplyBook: Online appointment scheduling system and app booking software.
  • Liinks: One-page multi-link website that integrates multiple social and official website links.
  • LearnWorlds: Create and sell online course websites.
  • Teachable: A platform for creating and selling online course websites.
  • Make: A visual automation workflow tool that allows data integration and seamless movement between various software applications, enhancing work efficiency.
  • Piktochart: An information chart design tool.
  • ClickMagick: While searching for AB testing tools, I came across ClickMagick, which offers this functionality. After watching introductions from other YouTubers and finding it user-friendly, I decided to give it a try.
  • MotionElements: A platform for professional video materials, templates, and plugins.
  • MotionVFX: A platform for professional video materials, templates, and plugins.
  • Payoneer: A secure and fast one-stop solution for cross-border payments.
  • Wise: A cross-border account for international payments and receipts.
  • Surfshark: I recently started using Surfshark VPN, and it’s been great! Originally, I wanted to browse certain foreign websites that automatically redirected me, but using a VPN solved this problem.
  • Firstory: The most comprehensive and powerful podcast hosting platform for platform deployment, sponsored subscriptions, and advertising revenue. It eliminates all the tedious publishing processes by automatically distributing your recorded audio files to platforms such as KKBOX, Apple Podcasts, Spotify, and Google Podcasts.
  • Continuously collecting and researching more…

If you have any questions, please feel free to fill out the form and leave a message or email me at You can also reach out to me through the Facebook or have a direct online chat. Let’s communicate and grow together! You can check out my web design portfolio to see my work. Join the Shopify website design and development learning community on the Line group to exchange ideas and learn together! However, please note that users in the United States cannot join the Taiwan Line group. Therefore, I have also created a Telegram community where valuable experiences from both platforms will be shared and organized. To further understand our services, you can add Irvinglab’s Line@ official account and leave a message for us.

Leave a Reply

Your email address will not be published.