Images for Weebly – Part 3: Preparation

Virtually every task or project you’re working on needs some sort of preparation. Whether you’re painting a wall, servicing your car, or building a website, preparation is more important than you’d imagine. When it comes to Images for Weebly, preparation is also an important factor.

This article goes into the details of what “preparing” an image for your Weebly website actually means. There are several aspects to consider and we’ll be covering these:

  1. Selection
  2. Color & Contrast
  3. Cropping
  4. Sizing
  5. Image Quality

1. Selection – Chosing the right Image for Weebly.

We’ve already touched on Selection in the first chapter of this series however we’re going to go into a bit more detail now.

Image Selection is the most important and possibly the hardest aspect of preparing an Image for your Weebly website. When selecting an image you need to think about where it is going to be placed on your website, how big the image needs to be (if you only want a small area taken up by your image, a really detailed image will not look very good, where as if you want a large image, one with less detail will make the page look bare.

You also need to consider the color of the image. Having a really light image on a dark background, or vice versa can look contrasting and in many cases that can be a good thing, but sometimes not.

Finally you need to make sure the image you’re adding ties in with the content surrounding it.

With all this being said, don’t be afraid to try different images. you won’t truly know if it’s the right image until you’ve seen it on your page, so it’s always a good idea to try multiple images until you feel you’ve got the right one.

Another useful tip, that will probably save you time is, unless you need a really specific image that only you can achieve by taking a picture/designing a vector yourself, don’t try and re-invent the wheel, there are so many images out there on the net, you should be able to find what you’re looking for pretty easily.

So… Lets use this example to give you some inspiration to selecting an image…

You are a company that specializes in planning and selling pet friendly holidays. Somewhere a family could go with their pet dog, at a reasonable cost. you want an image for the banner of your About Us page.

The kind of Image I’d chose would be something with a dog on it, enjoying himself on a beach, relaxed, sunny… This would really set the scene nicely.

dog-773439_640

The image above is a small version of the image that you’d use. We found this image for Free and it gives full permission to use for commercial use. It was quite a simple image to find, and is relative to the type of site. Obviously if you’re looking for something really specific, you may either need to pay for the image or get it taken professionally yourself.

2. Color and Contrast – Making your image stand out more

Color and Contrast is really important, you want the image to be striking with enough contrast to stand out but not too much to look out of place on your website. We aren’t photographers or graphic designers, so there aren’t really any “Rules” that we can tell you other than play around and get the image looking right using the tools from Part 2 of this series of articles.

You can do some really funky stuff with your images… Take the image we used for the example above… Keeping the same idea about what the website was for, it is pretty obvious you wouldn’t want to make this photo Black and White, it should be colorful. What you may want to do however is add some contrast to make the colors a bit deeper. Like this:

dog2

Notice that with just a few tweaks the picture looks much more rich in color and enticing. This was done in GIMP and took around 5 minutes of playing around.

3. Cropping – tidy up the edges.

Cropping is really important, it not only ensures the unwanted edges of the image are removed, but also allows you to select a specific part of an image if you don’t want the full image to be displayed.

For example, lets say the image being used in the earlier example was actually for a banner at the top of the page, something you wouldn’t want to be too tall. You could take your image and crop the top and bottom off to re-size it without causing any image distortion:

dog3

4. Sizing – Making sure your images are the right size

Sizing, again is an important aspect when adding an image to your Weebly website. Most web browsers today resize images for you based on the size of the screen/window, however, if the browser is having to downsize your image for you, it means you could be slowing your site down. Also if your browser has to make images bigger you risk having a distorted or pixelated image on your site.

We recommend, always make the image only as big as it would ever need to be. For a page where you want a full width image they width should always be 1920px to accomodate for larger screens. The height is less important in this case, make the height as tall as you’d want it to be displayed (so if you only want it taking up, at maximum half of the height of the screen, don’t make the image more than 600px or so.

For small images that you want to wrap around text or show in a widget (like a team profile widget) we’d recommend making the image only as big as you want it… don’t upload a large image and leave it to the browser to resize.

5. Image Quality – Making sure your image is good enough, but not better than it needs to be!

The last thing you want is an image that is poor quality, and by Quality, I mean image resolution. It’s all very well putting a super high resolution image on your site, but the chances are the viewer will not be using a screen that is powerful enough to really show off that image. On most screens, the eye will not really be able to tell any difference between a super high resolution image and an image that has been optimized for the web.

The importance of optimizing images really boils down to performance. If you minimize the file size of the image by reducing the resolution (but not too much to make it noticeable) you will ultimately speed up the load time of your website.

Can you tell the difference between these two images?high

 

low

So…. The top image is full quality, with no image optimization and the bottom is optimized. As you can see, both look really good quality, maybe not for a print on your wall, but for a website the lower quality image is more than good enough…

To give you an idea of the file size different, the high resolution image is 6.43mb and the lower quality one is just 655kb That’s almost ten times smaller. Which is going to help your page load speed massively.

Now you’ve read through this, you should have all the info you need to preparing your images for your Weebly website.

Weebly Templtes