Hi folks, I’m building up my web and wondering what are the best practices of images to be uploaded. I only know that in order to improve the site speed, I should have images in PNG format. But wondering what else is important - resolution 1x/2x…? I’m using Figma to export images. Anybody using the same tool?
Cheers,
Dat
I only know that in order to improve the site speed, I should have images in PNG format.
This isn’t really true and depends on what types of images your saving out. PNGs are a lossless format (as opposed to JPGs which are lossy) and only really benefit in size/quality when colors are limited.
The 1X/2X/etc your seeing represents pixel density and can be used to ensure images are crisp on high resolution displays. I know Webflow allows you to select whether an image is HiDPI (which will render it at half the size to account for higher resolutions) however I’ve found that most of the time this just leads to larger image sizes.
My preference is to prioritize lower file sizes, and if possible, utilize Webflow’s built-in responsive images to ensure larger image sizes are only served for larger displays. You can read more about that feature here, but just keep in mind that this is the default behavior for image elements anyway.
The less size of your image for your websites is a good practice. Make sure that all your images are optimized for the web. Numerous tools are available that will reduce your image file size by a fairly large amount with no image quality loss. Moreover, for boosting your SEO, you should use the right filename and alternate text for your image.
@mikeyevin thanks for the link. it’s really informative to learn about responsive image feature at webflow. new to me 
@Naheed thanks for the SEO reminder. and yeah I’m trying to understand how small the image can be.
Quick one for both @mikeyevin and @Naheed: I normally use PageSpeed tool from Google Developer to see how i can speed up the page. It always says I should serve images in JPEG 2000, JPEG XR, and WebP. Do you know how I can do this? And it says I should serve images that are appropriately-sized so I’m wondering what image size I should export. Really appreciate your sharing!
My page (designer view): https://preview.webflow.com/preview/honey-by-dat?utm_medium=preview_link&utm_source=designer&utm_content=honey-by-dat&preview=d2850e8a79a20aab333f613678d215a6&mode=preview
These “next-gen” image formats aren’t yet supported by Webflow natively, so you’d need to reference them with an embed element from a third party—which doesn’t really make it a viable option at the moment.
I’d say WebP is the most supported option at the moment, however AVIF is superior (even smaller file sizes) and will supersede it once support is available.
Hi,
I use this app by Google to reduce image file size. You may give it a try:
@mikeyevin thanks for sharing that. hopefully webflow will support those next-gen image formats soon.
@devroy thanks for sharing the app. it’s very straight forward. i’m wondering what’s the best practice of reducing the image size? If I’d love to reduce this image, should i compress it to browser PNG or browser JPEG, with quality 80%?
@le.tiendat10 I have been using Moz JPEG. It reduces the size without any ‘visible’ reduction in clarity. You can play around with the other compression formats and see which is best suited for your image.
Just to throw in another option, I’ve been using TinyPNG for quite a while and found that they provide great results with no visible reduction in quality—which works for JPG, PNG, and APNG (animated PNGs). The service is totally free (up to 20 files at once at 5MB or less) but you can pay $25/yr to go Pro which removes the file limit and allow files up to 75MB.
If you end up liking the product, they offer a Photoshop plugin ($65 one time fee) that gives you access to their compression in the app within the export menu—meaning you can save the step of needing to use their online converter.
