Over the time, I’ve realized one problem many of our clients meet, that is, they don’t know how to optimize images for their sites :). This results in the fact that their sites load slowly and perform ugly user experience.

The purpose of optimizing images is not just about making the loading times of your site faster or making your images look better, but it also helps improve your SEO ranking, perform better user experience and of course, make your site look professional.

Below are four simple tips I use everyday to optimize images for all sites I manage, and you can easily apply these tips into your Weeby site.

 

1. Choose the right file type

When saving your images, you might forget to consider which file format should be chosen. The two formats I use frequently are: .png and .jpg/.jpeg

.png images will have higher quality but at the same time, they have larger file sizes. So choose .jpg/.jpeg format if you use normal images with lots of colors and go for .png if you use the following file type:

      • Favicon
      • Icons
      • Buttons
      • Product Images
      • Screenshot

There are more cases when you need to use .png format but above are 5 cases I meet frequently when building Weebly sites.

 

2. Image dimensions

You might want to use the largest images you have but a larger image means larger file size. So please don’t simply upload the largest images. You should consider how much space your image will take up on the site then edit your image to meet that space.

Choosing the right dimension for your images not only makes your site look more professional but it can also reduce the loading time of your site.

Imagine, if your image needs 500px by 500px space on the site but you upload the 2500px by 2500px file. What happens?

Of course, the image will auto scale to 500px by 500px as it needs. But it makes the loading time for that image increase by 4 times :(.

There are some tips when choosing the dimensions for your images.

For fullscreen background images, you can use images at the dimension of 1920px by 1080px or 1400px by 900px.

For header images, simply click on Edit Image button, you’ll see the exact dimension you need.

header images

For header images, simply click on Edit Image button

 

You’re wondering that, if you use images in the body of your site, then how could you know the exact dimension for images? It’s not hard as you think.

Let’s see if your image is placed in full column width or 1/2 column width, 1/3 column width or so on.

full column width or 1/2 column width, 1/3 column width

Let’s see if your image is placed in full column width or 1/2 column width, 1/3 column width or so on.

 

Now divide the width of the header image by 1, 2, 3, etc. then you’ll know the exact width (or at least the nearly exact width) the image will display on your site.

 

3. Compression tool

Choosing the right file format and dimension gives you a good result on file size but for even better result, you should use a compression tool to optimize the image size.

One really helpful and efficient tool I use everyday is https://compressor.io

compressor.io

The purpose of the tool is “reducing drastically the size of your images and photos whilst maintaining a high quality with almost no difference before and after compression.

By using compressor.io, I can normally reduce the image size by around 50% while the quality of the images is almost the same.

Ideally though, an image that’s uploaded to your webpage will be under:

  • 150kb for a large image such as the background image;
  • 100kb for a medium image such as the header image;
  • 30kb – 50kb for a small image such as an image to be displayed on the page.

 

4. Optimizing your images after uploading to your website

The process is almost done. After uploading images to your site, consider editing the default setting of your images before publishing your site. This will perform better result.

There are two important things you should consider in order to improve your SEO ranking: Image Caption and Image Alt Text

Image Alt Text

Image Alt Text

 

 

 

 

 

 

Image Caption

Image Caption

 

 

 

 

 

 

Both are the information that search engines read about your images and they help search engines understand your site better, which helps improve your SEO ranking.

Please note the differences between ALT text and Caption:

ALT text is displayed when a user’s browser is unable to locate an image. Search engines like Google use ALT text as a ranking factor in their image search results.

Caption is the text that you want to display with your image. It can provide additional details about your image.

 

Below are links to some helpful tutorials to help you master all things related to using images in your Weebly site:

Add a Favicon to Your Site

Upload a Logo to Your Site

Edit the Header

Upload an Image

Upload an Image Slideshow

Upload an Image Gallery

Use Professional or Free Stock Photos

Disable Image Downloads

 

Exercise

Now let’s start optimizing one image in your site! It’ll help you get familiarized with the process.

If you don’t have much time for doing this, there are more options for you:

  • Optimizing an image everyday is fine. That’s better than doing nothing :).
  • Hire someone to do it for you.

Please don’t avoid this kind of task. A successful website starts from little things like this.

 

Have some thoughts or questions related to this topic? Please discuss in the comments section below.

 

 

Share This