How to Optimize Images for your Weebly site

[baamboostudio]

I had chance to take a look at tons of beautiful Weeby sites.

The one biggest problem that's repetitive over times on most sites is

Guess?

They don't optimize for images. Resulting in really slow loading.

If time isn't the reason (they must spend a lot of time to make the site beautiful), I guess the reason is they don't see the importance of optimizing images and they probably don't know how to optimize images.

In this post, I want to share some tips I know so you can apply for your site.

I would love to hear your thoughts, experience and advice too.

1. File type

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
Screenshots

 
2. Image dimensions

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

 
3. Image editing tool

There are a lot of options. Even I can use Photoshop to edit images, there is a free app I like a lot, it's PhotoSpace.

You might not believe, but I've used it for 4 years and it's helped me edit images for hundreds of Weebly sites as well as more than 20 demo sites for our themes.

Download: http://www.photoscape.org/ps/main/index.php

 
4. Compression tool

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

If you have any questions related, just post here. Maybe I can help you (Or a lot of other experienced users will do).

[jed]

Thanks for the helpful information.

[SomLivrosusados]

what would be the ideal size, in pixel images to put on the site? Thanks

[cw99999]

I would like to know this too.

[mike_b]

I have always understood the need to optimise (minimise!) photo file sizes. But as I haven't decided what size the photo will display at until after I have designed the page, I end up having to create my page, then resize the photos I have used based on how I am using them on the page, and uploading them all again. It would be great to have an on-line feature to be able to resize and/or compress pictures that are already uploaded - say, as part of the photo editor (plus something that would work for gallery pictures).

[SGI1]

Thank you for an informative and useful post.

[propblur]

I am looking to find the most appropriate SIZE for Weebly Product photos to make my items load fast.  Did not see that # in your info here, or anywhere else.  any help?

[Erin6]

Hi, @propblur!

It's more that you want an appropriate ratio, like 3x4 or 4x3. Also, images over 651 pixels will zoom on product page. So if you don't want the zoom, make the images smaller than 651 pixels per side.

Thanks,

Erin

[Diogenes]

I want to include a long, thin jpgs of text like the one attached.  When I try it there are very large white areas on the sides and the text is too small to read. 

How can I do this?

[seicolegwr]

@Diogenes 

If your theme has a 'full width' option choose that, or change theme to one that does. Or, you'll have to make the webpage body wider by either making changes to the code itself or using some override code added to the Header Code box. Either way, the code will depend on the theme.

Gary