Photo sizing

Good photos are essential for your IndieMade site. This page gives you some guidance about how to get a beautiful, fast-loading website with the least amount of fuss.

Automatic Resizing

In many instances, photos you upload to your site will automatically be resized by the IndieMade system. This is not only a huge time saver for you, it keeps your site loading quickly and your pages looking consistent.

The following categories of photos are resized automatically:

  1. Your site banner
  2. Product images attached to a product in your store
  3. Photographs that you upload as gallery images
  4. The primary image associated with a news story

In each case, the eventual size and cropping strategy depends on the theme you've chosen. For example, for the peasy theme your product detail images will be resized, cropped, and centered to 380x285, with 80x60 thumbnails for navigation. For paper, the product detail image is shrunk, but the full image is always visible.

When you switch themes, all your images will automatically be resized to match the new theme's design.

Photos You Should Resize Yourself

You can also upload images using the rich text editor. If you are adding images to blog posts or pages, for example, then the IndieMade system does not resize them for you -- this way you can lay them out however you like.

When uploading an image using the editor, you can specify the height and width of the image on screen, as seen here:

 Example of the Image Properties Window 

However, you will get better results if you resize the image using the image editing software of your choice before uploading them to your site. Not only is the quality higher, but your web page will load much more quickly (if you take a 2GB image and display it in a 50x50 box, the browser still has to suck down the entire 2GB, and that takes time). It takes a tiny bit more work on your part, but the results are far superior.

We recommend you keep your images between 400 and 700 pixels wide and no certainly larger than the width of your page -- if the theme you've chosen is 960 pixels wide, then it will look awful to upload a 2000px wide image.

Popular Image Editing Software

There are, of course, many options for editing images. Some popular ones are shown below.

  • Photoshop, an Adobe product that is powerful but hard to learn
  • GIMP, a sophisticated but complex free alternative to Photoshop
  • Paint.net, a free Windows-based image editor
  • Pinta, a multiplatform program similar to paint.net, free
  • PicMagick.com, a free online photo editor
  • Picasa, a Google image editing program

Our resource collection has lots of tips for how to take great product phtotos, so check those out also.

Comments

Candace

My product pictures seem a little fuzzy. Any tips?

Michaela Pembroke

I'm also having a problem with my photos appearing a little fuzzy.

Axel McCarthy

For pages that the IndieMade system builds -- like the store, product, image gallery, and so on -- the IndieMade system creates new versions of your images so they fit in with the design. If you are uploading pictures that are smaller than that, some themes "upscale" them so they fit in with the design. This can result in fuzzy images. For example if you have a 200x200 pixel image and the theme upscales it to 400x400, then obviously you'll lose some detail. You'll want to use the biggest image you have for those pages, so this "upscaling" doesn't happen.

Make sense?

Anonymous

How big should the theme photo be? That's the one that I need help with.