Today, I was converting PNG and JPG images to 'interlaced' (PNG) and 'progressive' (JPG) formats. This is to ensure smoother rendering on web pages, where images transition from very pixelated to clear, rather than displaying a 'slow printing' effect, particularly for visitors with low-speed internet connections.
Comparison:
Here is an example of what I call "printing load" [1]:
And here is a smoother variant after re-saving in Photoshop [1]:
Photoshop's "Save for web" feature
So I was wondering why Figma doesn't have an export tool like Photoshop's 'Save for Web' feature, which has been available since at least 2007 and can be accessed with the shortcut Alt + Shift + Ctrl + S (or Cmd + Option + Shift + S for Mac).
Initially, I export images from Figma and then reopen all files in Photoshop to resave them with the necessary settings.
Next step
Next, I am going to create a JS script that handles three variants of each image, tailored for different screen widths—namely, for widths above 1400 pixels, between 1400 and 700 pixels, and below 700 pixels. Depending on the browser window's width, the script dynamically assigns the appropriate image to the src attribute (or the background-image in CSS) in a lazy-loading manner to enhance user experience. However, I plan to write the JavaScript part later.
What steps do you take to optimize image loading and improve user experience?
Sources:
[1] - web-gate.org
Top comments (0)