Best Image Size for Websites

If you’re creating your own website, you’ve likely realized that it isn’t something that “just happens.” From SEO and website copy to the website design itself, there are many elements involved in the website design process. If you’re using a Showit template, you’ve found one of the easiest and most effective ways to DIY. Although it is a “drag and drop” format, it is vital to know the best image size for websites before you “drop” the wrong size. This website photo guide will walk you through the process: 

Why Image Size for Websites is Important

Getting what we want quickly and simply has become second nature to many of us. Improvements in technology through smartphones and other devices provide us with access to the Internet, nearly 24/7. With the touch of a button, we can order what we want when we want it. 

But when our Internet access slows down or we visit a website that takes several minutes to load, how do we react? While some of us may have more patience than others, many of us will get frustrated or even angry. We might stop trying altogether. Remember, if you exit a website because it’s running slowly, others are likely to do the same. As a new entrepreneur, you want your visitors to stick around!

As you build your Showit website and get ready to fill it with beautiful photographs, ensure your files are appropriately sized. If a photo or video file is too large, your web page will run slowly, and your visitors might leave before they get started. Prevent this issue by following a few website image size guidelines and video options suggested below:

Showit Website for Professionals

Whether you’re a florist, wedding or event planner, or professional photographer, showcasing your talent is necessary to attract new clients to your business. Before adding images to your website, first, make sure you size your photos correctly. 

Showit automatically optimizes your images used on pages within Showit, as opposed to Squarespace for photographers, which creates up to seven versions of your image, each with a different width.1 

When you upload a photo to a premade Showit website template on your blog, you have to resize it for optimization. Showit supports JPG, PNG, and GIF formats and suggests, “resizing your original-sized images to 3500px on the long edge to make the uploading process faster.” 2

The Showit team also suggests simplifying the process by using BlogStomp—a software that eases your website image prep. The software lets you drag and drop a full-resolution image, pair it, customize it, re-order it, resize it, and save it for your blog or Facebook page.3 Which option should you choose? The choice is yours!

The Best Photo Size for Websites

Is there a best image size for websites? Yes! As a general rule of thumb, always keep your uploaded images files at or under 300kb as Showit recommends this image size for websites and blogs. The best way to achieve this is to make sure your image is no longer than 3000 px on the longest side (if you’re wanting to upload a full screen image) and then I like to run my images through www.tinypng.com to compress, resize and optimise

When you’re ready to replace a default image with a personal photo, like your headshot, the first step is adding the picture to your media library. Choose your new image and then add it to the page. If you want to make adjustments, you can use the image border scaling options or drag-and-drop the image’s placement.

If you prefer manually setting an image’s size or location, you can do so under the “Size & Position” tab. You will find this tab in the right of your toolbar when selecting your image. You can also manually set your Showit photo size and location under the “Size & Position” tab in the right toolbar when selecting the image.

Placing Images within an Image Field

Showit gives users three options for how an image will react inside the image field or the area where you are inserting your image. This area also has an associated height and width. These options are:

1. Fill – A setting that forces your image to fill the image field in both height and width. You can crop your image if it is not the same size as the image field.
2. Contain – A setting that keeps an original image’s dimensions within the image field but lets you adjust the height and width of the image area without changing your original image’s dimensions. 
3. Scale – A setting that lets you adjust your image’s focal point inside the image element container. 

Adding Videos

Your website represents you and your business. Including a video is a great way to personalize your content and connect with your visitors on another level. Showit gives you two options for adding videos through an external source like Youtube or Vimeo or by uploading content hosted in your media.

To add a video as a canvas background in your Showit site (desktop only), Showit recommends you:

1. Make sure your video is compatible with your media server. Your video must be a .mp4 format. The maximum file size is 8mb. If your file is not compatible, then you have to convert the video;
2. Open your media library and click the “Upload File” button;
3. Select your video file on your computer and upload it to your media library;
4. Pick the canvas you want to edit;
5. Click the “Canvas Background” option on the right-hand properties panel; 
6. Select “Video” from the “Type” drop-down;
7. Click the object icon that pops up and select your video from the media library.

To add content through Youtube, Showit advises the following:

1. Add a Video Widget element to your selected canvas;
2. Copy the Youtube video ID from the last part of your video’s URL;
3. Set the type to “YouTube.” This is found in the right toolbar under the video tab. Paste the end of the URL in the YouTube ID box. 

Additional settings, like AutoPlay, are available once you add your video. Select the ones you want and you’re ready to go!

Take Your Business to the Next Level with Custom Web Design

Adding content to your website can get tricky, especially if you’re unfamiliar with image layouts and resizing. If you get stuck or need help adding your beautiful photographs to your website, a Showit design partner can help. We can work together to create a custom website design that is uniquely yours. Contact us today to schedule your free consultation. 

Resources:

1. Downs, Kylen. “Optimizing Your Images to Improve Blog Load Speed.” Showit. Accessed 07/02/2020. https://learn.showit.co/en/articles/1982410-optimizing-your-images-to-improve-blog-load-speed
2. Pals, JT. “Preparing Your Images for Showit.” Accessed 07/02/2020. https://learn.showit.co/en/articles/1991409-preparing-your-images-for-showit
3. “How to Size Images for the Web. Showit. Accessed 07/02/2020. https://showit.co/business/education/how-to-size-images-for-the-web/
4. Willems, Jeff. “Add a Photo.” Showit. Accessed 07/02/2020. https://learn.showit.co/en/articles/762364-add-a-photo
5. Downs, Kylen. “Image Size and Placement Settings.” Accessed 07/02/2020. https://learn.showit.co/en/articles/1094388-image-size-and-placement-settings
6. Downs, Kylen. “Video.” Showit. Accessed 07/02/2020. https://learn.showit.co/en/articles/357765-video
7. Downs, Kylen. “Add a YouTube Video.” Accessed 07/02/2020. https://learn.showit.co/en/articles/895112-add-a-youtube-video