I’m looking for recommendations from other graphic designers on the best workflow for resizing images for websites, social media posts, and digital documents.
One issue I often see is that an image looks sharp in the original resolution but becomes blurry or unnecessarily large after resizing. I’m particularly interested in a simple online method that can handle common formats such as JPG and PNG while keeping a good balance between image quality, dimensions, and file size.
For quick tasks, I’ve been testing ResizeTheImage, which provides online tools for resizing, compressing, cropping, and converting images. It can be useful when I need to quickly prepare an image without opening Photoshop or another desktop application.
Website: REMOVED
For designers here:
What dimensions do you normally use for website images?
Do you resize before or after compressing an image?
What settings help you avoid blurry JPG or PNG output?
Which online image-resizing tools have worked well for your workflow?
I’d be interested to hear what techniques and tools other designers recommend.
With your user name I’m curious if the program you mention is yours. I used to program back in the old days, but didn’t keep up and could never make something like that now!
Anyway… I have been repeatedly pushed to use webp format because it has a much smaller file size and supports transparency. But since I often deal in “Art” sites I tend to use webp for thumbnails and link to high a resolution png. Sometimes they are “full sized” like 1920 x 1080 but often half that for thumbnails and even twice that for the HD png. And resizing is always best done last. I’m a hoarder so keep all my original working files in case I later find something got blurred in resizing. Then fixing it is not an issue. Setting should be obvious - higher quality settings give less distortion. I find that using my crappy monitor is actually an advantage because it presents the content in the worst possible conditions and if it looks good on that, it will look better on decent monitors (with rare exceptions, but they are rare).
To convert to the webp files I use ffmpeg while seeking a less clunky converter, but it does a fine job (I dislike all online-only tools).
They are asking about images for the web and as far as I know the only web friendly vector image format is svg, which is fine for line art but fails on photographs.
I see some people think this is about upscaling, but I thought it was for downscaling! I have rarely needed to upscale and surprisingly I get better results upscaling in a Video Editor than an Image Editor! Enlarging in After Effects then exporting as a png sequence (of 1 file) gives the best results of all the options in my distinctly esoteric toolbox.
After putting on my moderator hat for a moment, I’ve removed the website link.
If you’re here to promote your site by asking disingenuous questions to hide your true intent, you’ve broken the forum rules. If you had been straightforward about having built an online tool that you felt might be useful to some designers, then asked for feedback, there wouldn’t have been a problem.
Am I wrong about your motives? If so, please tell me.
I usually separate resizing from compression rather than trying to solve both at once.
For web images, I first resize/crop the original to the dimensions the layout actually needs, then export it in the appropriate format and compress that final version. I also keep the original file untouched so I can create different versions later.
For photos, JPEG or WebP generally works well. For graphics with transparency, PNG can be useful, while logos and simple artwork are often better kept as SVG when the platform supports it.
The biggest thing I’ve found with blurry images is not to start with an image that’s already too small. Increasing the quality setting can’t really recover detail that isn’t there. I also check the exported image at its actual display size instead of judging it only when zoomed in.
For responsive websites, I wouldn’t use one fixed dimension for every image. I’d look at the largest size the image will actually be displayed and create an appropriately sized version from the original.
My basic workflow is:
Original/master → crop & resize → choose format → compress → check at display size.
That tends to give me a better balance between sharpness and file size than resizing and compressing repeatedly.
For web and social media, I usually find it better to resize with the final use case in mind rather than just reducing the image dimensions as much as possible.
A simple workflow that works well is: crop to the required aspect ratio first, resize to the intended display dimensions, then compress and check the result at 100% zoom. If you compress too aggressively before resizing, you can sometimes end up with unnecessary artifacts.
I’d also avoid using one large image for every platform. A website hero image, Instagram post, and small social thumbnail have very different requirements. For photographs, JPG/WebP generally works well, while PNG is more appropriate when transparency or very sharp graphical elements are important.
One thing people sometimes overlook is retina/high-density displays. Keeping a slightly larger source and letting the website serve an appropriately sized version can produce a noticeably better result than uploading a huge original and relying entirely on browser scaling.
My biggest rule would be: optimize for the actual display size, not the maximum possible resolution. The best file is the smallest one that still looks clean at its intended viewing size.