Site Designer - How do I make my...

User 458800 Photo


Registered User
78 posts

I'm finally ready to post my site. FTP uploads take a long time on the JPG files, and when I load my site with Chrome, the images all download slowly. During the FTP upload, I noticed that a lot of my images were 6 MB or larger, so I think I just need to economize them for website usage.

I'm embarrassed to say that I don't know how to do that (or what settings would be a good compromise between quality and performance). :o

I don't see any advice in the user guide, but maybe I'm not looking in the right place.

I'm using SD 6.5.3. Any advice would be appreciated!
Windows 11
Intel i9 (workstation) and i9 (laptop). Gobs of RAM and acres of SSD space on both machines.
User 2907842 Photo


Registered User
45 posts

An image compression tool is going to be your best bet. There is no shortage of software for compressing files.

This free service is my go to for image compression.
***Removed by admin***
User 2088758 Photo


Senior Advisor
3,086 posts

Hi BIF,

What you need to do is handled outside of Site Designer. You need to find an image compressor to compress your images before you add them to your resources in your project. The reason I say before is because if you add the large 6mb images to the project then save and export it loads them into the app. If you compress them after you export and save any time you make changes to your project and re-export it will overwrite your compressed images with the 6mb ones.

There are some image compressors online out there with various capabilities and some are free with a tonne of adds, but the one I love the most is within Website Insight. This not only gives you the ability to compress images but it gives you a bunch of insight into your website and makes suggestions for improvements. You can find the software here https://www.coffeecup.com/website-insight/

All that said the most important thing is what was mentioned at the start of my post. Once images are compressed then added it will drastically improve page load times.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 458800 Photo


Registered User
78 posts

Okay, I was under the misimpression that SD had a "compress this image" button built into the interface. I suppose it really doesn't make coffee either, huh? :P:lol:

Thank you both!
Windows 11
Intel i9 (workstation) and i9 (laptop). Gobs of RAM and acres of SSD space on both machines.
User 2906089 Photo


Registered User
222 posts

I'm really new to SD, but isn't there a way for the picture element to use different version of the same picture? That way you can use small images for phone, another for tablets, another for laptops, and finally one for really big desktops.
Learn something, Share something.
User 122279 Photo


Senior Advisor
14,447 posts

Yes, you can do that. I often use three sizes of the same images. I change them at the breakpoints.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2088758 Photo


Senior Advisor
3,086 posts

Hi Bosco,

As Inger mentioned yes you can accomplish this very easy with SD. The process really depends on what frame work you are using. If you are using Foundation or Bootstrap you want to slide your slider all the way to the left of the furthest left breakpoint and add your mobile image there. Then slide past the first breakpoint and simply just change the image to your medium size one. Then move to the last break point on the right and add your desktop image.

If your using Materialize it really doesn't matter what way you start editing your images.

Hope this helps
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2040390 Photo


Registered User
95 posts

Two questions: Does your image tell your story? and Will your user wait until it displays?

The fight between bandwidth and quality is endless. Every photographer wants to present the highest quality. Every site manager wants to have the smallest bandwidth.

The tool I use most often is Faststone Image Viewer. I was so impressed when I first saw it, I sent the developer $50 when I could have used it free. My iInitial editing is done with Lightroom and Photoshop if I need it but I use Faststone to reduce my largest website image to 1500 px width, adjusting the quality to get a file under 500 Kb. (Site designer gets huffy if you even store an image larger than 1 Mb in a working folder). I resize images to 1200, 900, and 600 px using end filename letters g (grande), L (large), m (medium), and s (small) to get the proper sizes for the various breakpoints as Inger mentioned. These letters put the thumbnails in size order in my working folder.


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.