Saving Images For Your Website

Saving Images for Your Website

Big Rig Xpress designs, manages, hosts, and even makes needed changes to your business website (up to one hour per month) for a low monthly fee of $199. But that doesn’t mean you can’t add images to your gallery and make minor edits yourself. Your website design also comes with a training session showing you how to login and edit your business site. However, improperly formatted photos can dramatically affect how fast your site loads for your customers. Once you know the basics, saving images for your website is quick and easy.

Size Does Matter

Modern cameras can take huge photos at high resolutions, which is excellent for printing high-quality 8 X 10 inch images. But, unfortunately, they are way too big for websites and digital screens. Digital images are typically measured in pixels. The most important thing to remember when saving images for your website is that more pixels equals larger photos, and the larger a picture is, the longer it will take to download.

Google doesn’t like large photo file sizes and will ding your website if the images on your site aren’t optimized. Sizing your photos before uploading them will help them load fast and keep your site closer to the top of search results.

Image Sizes For The Web

The image size (height and width) directly correlates to your screen size. So, for example, a photo that is 1920 x 1080px will take up the entire screen that is set to the same size. Trying to display an image larger than the display size wastes space and page load time. So what is the best size for web images? It depends on how you will use it.

  1. Full-size background or header images should be around 1920 x 900px.
  2. Gallery images showcasing your property or business look best if they are all relatively the same width. Between 1000px and 1200px is generally plenty.
  3. Large photos in pages don’t need to be more than 800px wide.
  4. Medium size photos can be saved at 500px wide.
  5. Smaller photos or logos are good at around 200px wide.
Image File Types

There are many options when it comes to file types like JPG, PNG, GIF, and others. When saving a file for the web, you will want to use JPEG or PNG most of the time. We could get into lots of details on how these two file types differ. If you don’t handle graphics for a living, just remember two rules to get the smallest possible file size.

  1. Photographs should be saved as a JPG.
  2. Images like logos, diagrams, charts, and other graphics with a limited amount of solid colors should be saved as a PNG.
A Free Online Tool For Saving Images For Your Website

Photopea is a free online image editor with many of the same functions as paid editors like Photoshop. However, it’s free to use and has everything to optimize your photos quickly before uploading them to your Big Rig Xpress website in 4 easy steps.

1. Go to Photopea.com and click “Open From Computer.” Go to the folder where your photo is located, select it, and click open.

Photopea tool showing the “Open From Computer” dialogue

2. Once the image is open, click “File”, then hover over “Export as” and choose the desired file type from the menu. The example image is a photograph, so we’ll use JPG.

The Photopea "Export as" menu with JPG highlighted as the file type

3. The “Save for web” window will come up, and you will want to adjust the following settings.

  1. Format: You can change the format if you didn’t select the correct one from the previous menu.
  2. Width: If you are looking for a specific height, you can adjust that, but lowering the width to your desired size is generally the way to go. Photopea will automatically adjust the height based on the width you input by default.
  3. Quality: This should be set at the lowest setting possible while maintaining acceptable image quality and an image size under 200 KB. Most of the time, a value of 60% to 75% works well. The smaller the file size, the faster your image will load for your customers.

Photopea

(Left) The photo started at 4032 x 3024px at 100% quality resulting in a file size of 7 MB. Customers with slower than average internet connections will have to wait 3 or more seconds for that one image to load.

(Right) Changing the width to 1000px (Photopea automatically adjusts the height) and dropping the quality to 65% results in a 164 KB file size and a 0.0656 second download time for the same customers.

4. Click save once you have adjusted the settings for the smallest file size possible. It may be good to create a separate folder labeled “Resized Images” and save them as individual files to keep the original high-resolution photo. You have now optimized your photo for the web.

Big Rig Has You Covered

If you have a Big Rig Xpress site, there’s an even easier method for saving images for your website. You get one hour of updates included in your monthly subscription. So send your photo updates to us, and we’ll make sure they are optimized and on your site. That’s just one of the many features you get with your website as a service.

Let Us Build You An Awesome Website For Your Small Business

Get Started