Image Preparation for Experts

by SiteWelder
March 28, 2024
There are too many books for dummies: Fitness for Dummies, Magic for Dummies, Calculus for Dummies, even The Torah for Dummies.

This isn't for dummies, though. You're already an expert at what you create.

But when it comes to getting your images ready to put up on the web, it can be a little tricky.

We talk with a lot of customers who aren't sure how to best save images of their work: How big should I make them? Should I use a special color profile? How can I make sure they look perfect?

At SiteWelder, we have a lot of experience with images and have done extensive work to make sure your work looks its best and loads quickly on your website.

Great-looking images start with well-prepared digital files of your work.

If you are scanning in your work from slides, negatives or original prints, it helps to have it done professionally. Preserving all the fine details and original colors is important. If you have good original files, you are well on your way.

We are fans of Peter Krogh's work with digital asset management - he personally led me down the path of scanning salvation with some of his ideas. Check out his excellent book and blog: The DAM Book.

Photoshop and Lightroom give you the software tools you need to create and save beautiful digital files. I personally like using Photoshop to adjust levels and colors. Once I've done my work on a larger image, I scale it down to a size suitable for uploading. Often, you'll need to re-sharpen the image after sizing it down to be sure it still looks crisp.

(You can also successfully use Apple's Photos app to edit and save your photos for the web, but it lacks the sophisticated tools of Photoshop or Lightroom).

Before uploading, we suggest sizing your images to a maximum width of 1800 pixels and a maximum height of 1200px. This gives you an appropriately large file to fill the space nicely on larger monitors. And the saved file won't be too large to slow down the download speeds for your site.

Here's what's really important for saving web images: save your work with an sRGB color profile. The sRGB profile is what web browsers on computers and phones use to match colors. If you don't do this, your work will often look flat or display with strange colors.

If you export your images from Lightroom, you'll see an option for saving your JPGs with an sRGB profile. Similarly in Photoshop, you can use the invaluable "Save for Web" option and include the sRGB profile with your JPG files (this is how I save all of my files for the web, including JPGs for images and PNG files for graphics).

Image Compression

You'll be saving your images in JPG format, which is the most efficient way to save images and reduce image sizes for the web. But how much compression should you choose?

Many customers I talk to assume they should save their JPGs at 100% quality level (100% is best, right?). But that isn't necessary. We suggest saving your images at 75% quality - after endless testing, we have found no discernable difference in image quality. And the difference in the image size in KB is significant.

After saving a JPG at 100 quality, the size can often be well over 1 MB. The same image at 75 quality can easily come in at less than 500K, more than half the size. There are other factors that affect image sizes in JPGs. Significantly, an image with more complex details won't save as efficiently as an image with larger areas of similar patterns (contrast an image of a dense forest with endless branches and leaves against an image of a beach scene with a large view of the sky included - the JPG of the beach scene will save as a much smaller file).

Uploading and Working With Your Images in SiteWelder

When uploading into our system, we give you the option to upload all of your images at once into a gallery. If you can save the image names in the order you want them on your website, this can save you some time. After you've uploaded, you can drag-and-sort your images into your preferred sequence.

The Coolest Thing About SiteWelder's Image System

Image Library Thumbnail Detail and Recompression Option

At the heart of SiteWelder's image system is the Image Library. When you upload images, you can always view the originally-uploaded files here, even if they already appear in galleries. You can also move images into galleries directly from the Image Library.

When you upload an image into SiteWelder, we keep the original file saved separately. We create a new version of the JPG file for your website in your preferred compression setting (75 is the default). After you upload the file, though, you might see that it's too large in KB. We have buttons below each of the thumbnails to show you the current saved image size (see above). If the images are larger than 500 KB, we highlight the number in red to alert you.

Here's the cool thing:  When you click the image size button, you'll get an option to recompress the image at a different quality level. Use the slider to choose a new level from 10-100. When you recompress, we make a new version from your original image. We don't compress the same image over and over - that would ruin its image quality. We always use your originally-uploaded image to recompress a new version.

I frequently use this tool on my images - some images with complex details can actually be reduced down to 20 or 30 quality without any apparent loss in quality. You can view the large version of the image with the magnifying tool to view your change. This can really help to optimize the sizes of your images and speed up your website.

Some Randomly-Discovered SiteWelder Users Sites:
For prospective users, go to SiteWelder and set up a free 30-day trial site. You'll have full access to our system and will be creating your actual website as you go along. Once you're ready, we'll get your domain name pointed towards us and set you up with an SSL (secure socket layer) site. You can also register a new domain through DomainWelder.com. Enjoy!
SiteWelder is a website platform for creatives that features beautful designs, 24/7 updating, unlimited image display and built-in sales options.

Reston, VA USA
Like
Favorites
Log Out
Log In