Thanks Ran, great advice! I optimise my images in the same way that you do. The only difference is I don’t export images from XD (or Sketch) instead I optimise the original image for size, resolution and compression in Photoshop and TinyPNG before uploading to Webflow. My thinking is this reduces the number of times the image gets compressed and gives more control over cropping. Cheers!
Good video. For clients running content media sites (blogs) with limited personnel, we set-up Photoshop scripts for batch-processing all the images in a content piece. Webflow looks after the device resizing. It's not a perfect solution for every image but is a practical option for keeping a large site loading fast and looking good.
I prefer squoosh.app instead of photoshop for compressing JPG Files, it compress images with MozJPEG - MozJPEG is quote similar to WebP but the OP of MozJPEG is .jpg so lower sizes and accessible on all browser. NOTE I use squoosh.app only for JPEG's
Aren’t the megabytes (etc…) more important than the dimensions? I always fix the dimensions once I get them downloaded. I think I’m confused about the terminology. I had Wp Optimize so I’ve never optimized before I get them downloaded. Then I was told that I need to do a compression before I get them to my website. Now I have Ezoic and they are telling me to disable the photo optimize feature because it’s not working well for my website. I am totally confused.
Quick question: why export images from Sketch? Why not using TinyPNG to compress the original image files before using them on Sketch, then use the same compressed files for development?
I would say that your Sketch file should be as high quality as possible to give it the most amount of flexibility. What if developers need different file types or compressions in future?
Samuel Gregory You're right, the compression should be done after the wireframe, when you already agreed on which image se to use. I was just thinking about simplifying the process. I've used TinyPNG for a photography website and it worked fine, files are small and quality is very high even when you look at the images on full screen. I was also the developer so I didn't need to communicate with another person. I'm new at wireframing with digital tools so I wanted to understand the benefits of this additional step. Of course every case is different!
Thank you a lot for that great video! It helped me al lot! Would 200kb be an ok size for a coast to coast images only? Or would that size also be ok for regular pictures in my design portfolio website? Cause Wix is recommending me 20 to 30 kb for regular pictures which seems quite small. I can see pixels already...
Very helpful video, now I probably know why my website go slow. Thanks, I’m going to try after I back to toronto. I’m travel to New York, wondering if I’m in the same city as you now. Hahahahahahah, anyway Merry Christmas 😬
Thanks Ran, great advice! I optimise my images in the same way that you do. The only difference is I don’t export images from XD (or Sketch) instead I optimise the original image for size, resolution and compression in Photoshop and TinyPNG before uploading to Webflow. My thinking is this reduces the number of times the image gets compressed and gives more control over cropping. Cheers!
Good video. For clients running content media sites (blogs) with limited personnel, we set-up Photoshop scripts for batch-processing all the images in a content piece. Webflow looks after the device resizing. It's not a perfect solution for every image but is a practical option for keeping a large site loading fast and looking good.
How about Gif compressions?
Supports transparent background and is smaller than PNG, so yes, why isn't this mentioned?
Great video on the most underrated area of web development.
I prefer squoosh.app instead of photoshop for compressing JPG Files, it compress images with MozJPEG - MozJPEG is quote similar to WebP but the OP of MozJPEG is .jpg so lower sizes and accessible on all browser.
NOTE I use squoosh.app only for JPEG's
Im using kraken.io/web-interface for image compressions.
great info! Fyi WebP is supported by ios since Sept 2020 ✌️
Thanks for the info! 🙂
Aren’t the megabytes (etc…) more important than the dimensions? I always fix the dimensions once I get them downloaded. I think I’m confused about the terminology. I had Wp Optimize so I’ve never optimized before I get them downloaded. Then I was told that I need to do a compression before I get them to my website. Now I have Ezoic and they are telling me to disable the photo optimize feature because it’s not working well for my website. I am totally confused.
Quick question: why export images from Sketch? Why not using TinyPNG to compress the original image files before using them on Sketch, then use the same compressed files for development?
I would say that your Sketch file should be as high quality as possible to give it the most amount of flexibility. What if developers need different file types or compressions in future?
Samuel Gregory You're right, the compression should be done after the wireframe, when you already agreed on which image se to use.
I was just thinking about simplifying the process. I've used TinyPNG for a photography website and it worked fine, files are small and quality is very high even when you look at the images on full screen. I was also the developer so I didn't need to communicate with another person.
I'm new at wireframing with digital tools so I wanted to understand the benefits of this additional step.
Of course every case is different!
Thank you a lot for that great video! It helped me al lot!
Would 200kb be an ok size for a coast to coast images only? Or would that size also be ok for regular pictures in my design portfolio website? Cause Wix is recommending me 20 to 30 kb for regular pictures which seems quite small. I can see pixels already...
Thank you sir
How to implement a 2x image for work well in both retina and non-retina?
The actual css code. Should I set the width to 50% for all images?
Does this whole tutorial still applies if only use Webflow?
Hey! Cool video but you didn't cover case with optimizing SVG files (i mean SVGO, can be sketch automate plugin and etc.)
Very helpful video, now I probably know why my website go slow. Thanks, I’m going to try after I back to toronto. I’m travel to New York, wondering if I’m in the same city as you now. Hahahahahahah, anyway Merry Christmas 😬
Hey, i love your videos and I've been watching for a while. Do you have your own website like a portfolio?
yep, but just some work on my website ransegall.com
Great video 👍🏻
bro where do you use image cdn responsive for device
I wish that he would reply