What size should my images be?

For web design in general it's good practice to use the smallest size image possible.

While ShinePages does do automatic image optimization to compress files, we recommend you compress all of your images 1st and then upload them to your site - using a site like Compressor.io to compress the overall file size without losing any image quality. You can also resize images using free tools such as picmonkey.com or canva.com.

This will make for faster, "lighter" pages that load quickly. If you are loading large file size over 1MB and there are many of them on one page, that can slow down your page load.

Use Webpage File Size Check Tool to check your download page size: https://www.seoptimer.com/web-page-size-check

Here are some guidelines:

- The standard resolution for images on websites is 72 dpi "dots per inch”.

The idea size for STANDARD IMAGES: 

- FILE SIZE - no more than 200 KB

- IMAGE SIZE (PPI “pixels per inch”) is a max-width of 800 pixels.

The ideal size for HERO, FULL-SCREEN or BACKGROUND IMAGES:  

- FILE SIZE - no more than 1MB

- IMAGE SIZE (PPI “pixels per inch”) is between 1200 pixels to 1800 pixels wide with a 16:9 aspect ratio.

Your hero image design must be responsive and fit a vertical (phone), this being 1 of the few edits you need to make in the mobile view in ShinePages. The ideal size for a mobile hero image is 800 x 1,200 pixels.

The ideal size for BANNER IMAGES:

- FILE SIZE - no more than 600KB

- IMAGE SIZE (PPI “pixels per inch”) is 1600 x 500 pixels.

However, as you can add images to backgrounds and columns within ShinePages and you can make these containers any size - there really are no set "sizes" that are required.

The Ideal size for SOCIAL SHARING IMAGES: 

Note that the image dimensions of 1600 x 900px works best for Facebook, Twitter or LinkedIn. Feel free to play around with different dimensions in case you're looking to share in a platform different than those.

The Ideal size for BLOG POST IMAGES: 

Because there are so many settings options for how you can display Blog post images (both on the Blog main page and within the Blog post itself) - there is not one specific size for Blog Posts.

We have found however, that generally using images that can be used in BOTH a Horizontal and Square format work well regardless of the blog setting you select. 

For example - if you use an image that is 1500px wide x 600px high (ie: a "horizontal" format) BUT ensure that it has a more centralized focus (where the image subject or words are placed within in a central "square" within the horizontal space) you should find that your image works well regardless of if you select to display your blog posts as "masonry", "medium", "large" or "blog" style within the settings of the main Blog page and whether you choose to select "Expanded feature image/gallery" for your individual blog post or not.   

A few image size dimensions that work well with a centralized focus: 

1500 x 600px

1350 x 1080px

1280 x 720px

1920 x 1016px

EXAMPLE OF A "HORIZONTAL" IMAGE THAT HAS A "CENTRALIZED" SUBJECT: 

Please see this troubleshooting article: Help! My images appear pixelated or "fuzzy"

And these two articles: 

Uploading Photos and Files to your File Manager