Need help with image optimization for my personal website
I’m working on creating my first portfolio website and running into some challenges with images. I designed everything in Figma first, but now I’m struggling with how to handle the images properly when coding the actual site.
The main issue is that when I export images from Figma at normal resolution, they look pretty pixelated on the website. But if I export them at higher resolutions like 2x or 3x, the file sizes become huge and my site loads really slowly.
Since I’m still learning web development, I’m not sure what the right approach is here. I want my portfolio to look professional with crisp images, but I also don’t want visitors waiting forever for pages to load.
Specifically looking for advice on:
What’s the standard approach for making images web-ready?
How do I figure out if an image file is too large for web use?
Are there any tools or techniques I should know about for this?
Any guidance would be really appreciated since this is my first time building a website from scratch!
Balancing image quality and file size is essential. When exporting from Figma, I recommend exporting images at 2x resolution and then using compression tools such as TinyPNG or ImageOptim, which generally reduce file sizes by 60-70% without sacrificing quality. For larger images, aim to keep JPEGs under 200KB and smaller images between 50-100KB. Reserve PNGs for instances where transparency is necessary. Additionally, consider using WebP format for better compression. Implementing lazy loading can also enhance load speeds by ensuring images only load as they come into view.
Stop doing this manually - you’re wasting time when you’ve got multiple projects to showcase.
I built an automation for the entire Figma to web pipeline. It grabs exports, compresses them, creates multiple formats, and generates responsive HTML markup.
The smart part? It analyzes each image and picks optimal settings automatically. Photos get JPEG with progressive loading, graphics with text get PNG compression. WebP versions are created as fallbacks.
Perfect for portfolios since you want to focus on adding new work, not spending hours optimizing images every time. My system processes a whole project folder in minutes and outputs everything production-ready.
File size targets happen automatically - no more guessing between 150KB or 300KB for each image. It tests different compression levels and picks what works best.
You’re building from scratch anyway, so set up automation now instead of creating manual work later. Your future self will thank you when you’re adding project 10 and everything just works.
just use figma’s export at 2x for retina, then compress with squoosh.app - cuts file sizes in half. don’t overthink it since browsers cache images anyway.
Export images at 1x from Figma and let CSS handle retina optimization. Use srcset so browsers automatically grab the right version for each device. I made the same mistake of defaulting to 2x exports - learned this the hard way. For portfolio stuff, try progressive JPEGs. They load piece by piece and feel faster even at the same file size. Test your images on actual mobile data, not just wifi. What looks fine on desktop can crawl on 4G. Find the sweet spot between quality and performance instead of maxing out resolution everywhere.
Manual compression works but gets old fast with dozens of images.
I automate everything now. My workflow grabs Figma exports and spits out multiple formats and sizes automatically. Different versions for different screens - the browser picks what works best.
Anything over 500KB is way too big. Keep most images under 200KB like someone mentioned above. Skip the manual checking though - just automate the compression and resizing.
My setup handles WebP conversion, builds responsive image sets, and even generates the HTML picture elements with fallbacks. What used to take hours now takes a few clicks.
Perfect for portfolio sites since you want to show off your work, not waste time optimizing images every time you add a project.
Format choice matters way more than people think. JPEG’s perfect for photos and colorful images, but PNG wins for graphics with solid colors or text. Here’s what I’ve learned: you don’t need to max out JPEG quality - 75-85% usually looks fine and saves tons of space. When exporting from Figma, I go with 1.5x resolution first instead of jumping to 2x right away. Always test on a real phone, not just your desktop. Images that look pixelated on your monitor often look great on smaller screens. And don’t forget max-width in CSS so your images scale nicely without getting blurry.