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

You are watching: Weebly header image size

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, bring better user experience and of course, makes your site look professional.

Below are simple tips I use every day to optimize images for all sites I manage, and you can easily apply these tips to your Weebly site.


Want to know how to design a Weebly website?

This guide focuses on how to build a Weebly website. If you want to know how to design a Weebly website, head over to our step-by-step manual.


Table Of Content


File format


File size


Image text


Image size dimensions For Weebly


Compression tool


Optimizing your images after uploading to your website


Exercise


File format


When saving your images, you might forget to consider which file format should be chosen. The two formats accepted by Weebly I frequently use 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 types:


FaviconIconsProduct ImagesScreenshot

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


File size


For the Weebly file upload limit, we recommend using image files of less than 500 KB and up to 1Mb for the best results. When it comes to image size, bigger isn’t always better as uploading multiple large images can affect site performance. If you’re adding multiple images to a page, keep your overall page size in mind.


Image text


Whenever possible I recommend adding text as an overlay instead of including it within the image. This makes the text searchable and keeps it visible if the image crops on smaller devices

If your image contains text, it’s best to save it as a .png file. Text in a .jpg file often becomes blurry when the image is compressed. A .png file typically retains its sharpness, especially if the image is displaying at its original size.


*

Weebly Image Size Dimensions


Choosing the right dimension for your Weebly image size does not only makes your site look more professional but can also reduce the loading time of your site. You might want to use the largest images you have but a larger image means a larger file size. Thus you should consider how much space your image will take up on the site then edit your image so that it’s suitable for that space. 

Weebly Image Size Limit

There is no Weebly image size limit, but imagine if your image size needs 500px by 500px space on the site but you upload the 2500px by 2500px file. What happens?

Of course, the image will automatically 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. These give the best combination of image resolution and mobile loading time.

Weebly Header Image Size

Weebly header image size (or Weebly banner image size) dimension can be 1920 x 1080 pixels or 1500 x 900 pixels (width x height). You can increase or decrease the height size of the image, for a higher or shorter header banner. A Weebly short header size can be 1920 x 720 pixels. 

For example:

*

Weebly Background Image Size

Weebly background image size depends on if your section is in full column width, 1/2 column width, 1/3 column width, or so on.

If the background image size in full column width, you can also use the image dimension of 1920px by 1080px or 1500px by 900px for one column background. 

If the background image size is 1/2 or 1/3 column width, now divide the width of the header image by 2, 3, etc. then you’ll know the exact width (or at least the nearly exact width) of the background image on that section.

*

You can use third-party software (such as Photoshop) to resize an image’s dimensions. I don’t recommend enlarging a smaller image as this can make it appear pixelated. Instead, start with an image that is at least 1500 pixels wide.

If you are wondering how to create the 1/2 or 1/3 column width background like the Vous demo above, you can use the X app to create those vertical layouts for your section as you could see below. 

*

Weebly Gallery Image Size

Similar to background image size, the width of the Weebly gallery image size is equal to the fullwidth column size divine to the number of columns in the gallery. For example, if your fullwidth column size is 1200 pixels, and you want to have a 03 columns gallery, then the Weebly gallery image size is 400 x 400 pixels. Depends on how high you want for the images, you can set the height as 300 pixels, 400 pixels, or 500 pixels. 

Weebly Logo Size

The Weebly logo size depends on the Weebly theme that you use. The Weebly logo size is usually around 150 – 180 pixel width and 50 – 80 pixel height. To have a Weebly logo transparent background, you should use the PNG file with a transparent background for the logo image.

See more: Other Shows That Suck : Advice To Make Any Amateur Look Like A Pro

Weebly Favicon Size

Favicon is the tiny image that displays on the top of the browser tab. The Weebly favicon size is 16 x16 pixels. You can change the favicon image within your Weebly Editor settings tab. 

 


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

One really helpful and efficient tool that I use everyday is https://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 file 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: