Why you need high-quality images for your website

Imagine you heard about a new clothing start that has super cute clothes and you can’t wait to go check it out. You walk in the store and are immediately overwhelmed by where to go to find what you want. The clothes are crammed onto racks in no particular order by size or color and after a few minutes you get frustrated, give up and leave the store.

Now imagine a beautifully designed clothing store where you walk in to plenty of open space, racks with space between the hangers, clothing sorted by colors. It feels fresh and exciting and you could browse for hours.

It’s the same with websites!

Imagine you are excited to check out a website you heard about. You type in the url and wait, and wait, and wait for the website to open. Just when you are about to give up - it opens! You start scrolling down the page and are totally confused. There are a variety of images, in all different colors and tones, some nice, but others are really dark and grainy. It’s hard to follow what the site is really about. You eventually get frustrated, give up, and leave the website - same as you did in the clothing store.

EXCELLENT WEBSITE IMAGERY MATTERS

Did you know you only have 2-10 seconds to capture someone’s attention on your website? And good images play a vital role in the success of grabbing attention on your website. Many studies suggest a large portion of the population are visual learners. So these visual cues can be effective in grabbing attention and aiding in comprehension for many people. The right images enhance the visual appeal, user engagement, brand representation, communication, storytelling, and SEO performance. Investing in high-quality, relevant imagery can help your site stand out, engage visitors, and achieve your business goals more effectively.

VISUAL APPEAL

High-quality, visually appealing images enhance the overall look and feel of your website, making it more attractive and inviting to visitors. A well-chosen image can capture attention, evoke emotions, and create a positive first impression, encouraging users to explore further.

FIRST IMPRESSIONS

Visitors often form their first impressions of a website based on its visual elements. Eye-catching images can captivate users from the moment they land on your site, encouraging them to explore further.

USER ENGAGEMENT

Keeping someone on your site longer is key. Engaging images can capture users’ attention and encourage them to explore your site further, increasing overall engagement. Visual elements can help break up text-heavy pages and make information more digestible and engaging.

BRAND IDENTITY

Good images help to convey your brand’s personality, values and identity. Consistent use of images that align with your brand’s colors, style and messaging can strengthen brand recognition and make your website more memorable.

STORYTELLING

Images can tell a story or evoke emotions in ways that text alone cannot. By incorporating storytelling elements into your imagery, you can create a more immersive experience for visitors.

ENHANCED COMMUNICATION

Images can quickly and effectively communicate information, concepts, or emotions that might be difficult to express with text alone.

PRODUCT SHOWCASE

If you're selling products or services online, high-quality images are essential for showcasing your offerings effectively. Clear, detailed product images can help potential customers make informed purchasing decisions and reduce the likelihood of returns or dissatisfaction.

SEO BENEFITS

High-quality images and properly optimized images can improve your website’s search engine optimization (SEO) by enhancing user engagement and reducing bounce rates. Optimized images can improve your website's SEO by providing additional opportunities for keywords and enhancing overall user experience. Properly described images can also appear in image search results, driving additional traffic to your site.

HOW IMAGES CAN HARM YOUR WEBSITE

While images can greatly enhance a website's appeal and user experience, they can also contribute to its downfall if not used appropriately. It's essential to use them thoughtfully and strategically. Too many images can slow down your website's loading speed, detract from your messaging, or overwhelm visitors. Aim for a balance between text and visual elements, ensuring that each image serves a clear purpose and enhances the overall user experience.

Other ways images can negatively impact a website:

SLOW LOADING TIMES

Did you know you only have a few seconds to capture your audience? You only have 7-10 minutes to draw a person in or chances are they will leave your site. Large, unoptimized images can significantly slow down a website's loading speed, leading to a poor user experience and higher bounce rates. Users are less likely to wait for a website to load if it takes too long, resulting in lost traffic and potential customers.

POOR USER EXPERIENCE

Ever go shopping in a store is cluttered with poor displays? It can be overwhelming and there have been many times where I just walk out before I even see what they really have to offer. A cluttered website with poor quality or irrelevant images can cause the same confusion and overwhelm. It can make it difficult for visitors to find the information and cause them to abandon the site in frustration.

UNPROFESSIONAL APPEARANCE

Inappropriate or amateurish images can reflect poorly on the credibility and professionalism of a website and its brand. Using stock photos that are overused or irrelevant to the content can also diminish the site's authenticity and trustworthiness so choose your images wisely.

COPYRIGHT INFRINGEMENT

Using images without proper authorization or licensing can result in copyright infringement issues, leading to legal consequences and potential fines. It's essential to ensure that all images used on a website are either original, properly licensed, or obtained from reputable sources with permission.

Overall, while images can enhance a website's visual appeal and engagement, it's crucial to use them thoughtfully and responsibly to avoid potential pitfalls and ensure a positive user experience. Strive to use good quality images that are in line with the look, feel, and colors of your website. Avoid grainy, dark, or low-quality images.

WHERE DO I GET HIGH QUALITY IMAGES?

Ideally, hiring a professional photographer to do a branding photoshoot is your best option. However, if you just don’t have the funds right now for a professional photo shoot, there are some things you can do to improve the quality of images your website.

OPEN-SOURCE STOCK IMAGES

Open-source images refer to visual content, such as photographs, illustrations, or graphics, that are distributed under an open license. This means that the images are freely available for anyone to use, modify, and distribute, often without the need for payment or obtaining explicit permission from the creator.

There are some great open-source stock images available for free on sites. One of my favorites is Unsplash, a popular platform for high-quality, free images. Most images on Unsplash are licensed under the Unsplash License, which permits virtually unrestricted use for commercial and non-commercial purposes. Plus it is directly connected with Squarespace making it super easy to find high-quality images right within the editor.

Another option I like is Pexels.  Similar to Unsplash, Pexels provides high-quality, free stock photos and videos. Most content on Pexels is licensed under the Creative Commons Zero (CC0) license, allowing for unrestricted use.

TAKING YOUR OWN IMAGES

Another option is having a friend or family member help you get some images with your phone or camera. Keep in mind the colors and mood that are relevant to your website. Good lighting and clutter free backgrounds will also be key factors in getting good quality images on your own.

HIRE A PROFESSIONAL

Eventually you should consider hiring a professional photographer. Check their portfolio and find someone that aligns with your style. And if it’s just not in the budget right now another option is to barter. You could offer some type of exchange for a photo session.

CHOOSING THE RIGHT FILE FORMAT FOR YOUR IMAGES

Now that you have your images, what is the best format for your website? Generally, JPEG or JPG is best for photos while PNG is ideal for graphics, logos, and images with transparency. For motion us GIFs or MP4 video files.

JPEG – (JOINT PHOTOGRAPHIC EXPERTS GROUP)

JPEG, which stands for Joint Photographic Experts Group, is a commonly used standard for compressing and decompressing digital images. Designed to minimize the loss of perceptible image quality, JPEG is an efficient format for storing and sharing photographic images on the web and in other digital media. JPEG files typically have the extension ".jpg" or ".jpeg".

PNG (PORTABLE NETWORK GRAPHICS)

You will need to use PNGs for graphics like icons, your logos, and any images with a transparent background. PNGs are usually larger files than JPEGs so whenever possible choose JPEG.

GIF (GRAPHICS INTERCHANGE FORMAT)

When you want to add motion, a GIF is a great idea. They are super popular right now and so much fun! Small GIFs are a fun way to add motion to your website with great image quality. GIFs can be used anywhere an image is used in Squarespace, and they are smaller than video files. They don’t have audio and they loop which is perfect for website use.

PRO TIP: It’s super easy to make a GIF in Canva.

MP4 FILES FOR VIDEOS

Videos are uploaded as MP4 files and can be tricky to keep the file size low enough to have a high-quality video that is not a huge file. A couple of tips to reduce the file size for videos embedded on your site:

1.    Remove the audio. You don’t need the sound and removing the audio will reduce the file size.

2.    Record in HD and keep the resolution 1080p or lower.

SHARING VIDEOS AS PART OF YOUR CONTENT

If your video is part of your content a good option is to host your video somewhere else and share the link in a video block on your website. Linking to your public videos on YouTube or private videos on Vimeo works really well for loading quickly.

WHAT DOES IT MEAN TO OPTIMIZE MY IMAGES?

Optimizing images reduces the file size and is crucial for improving page load times, enhancing user experience, and boosting SEO performance. Most photos on your website will be in JPEG format. The key is to optimize the size for good image quality and quick loading times.

I LEARNED THIS HARD WAY!

The amount of time you have to capture someone's interest and engage them on your website is typically very brief, often just a matter of seconds. Research suggests that you may have as little as 2 to 10 seconds to make a positive impression and convince a visitor to stay on your site. This short window of opportunity highlights the importance of having a visually appealing, user-friendly, and compelling website that quickly communicates its value proposition and entices visitors to explore further.

And guess what, if they are waiting past that short amount of time for your website to load because of large image files, chances are they will leave your site before they even see the first page.

Way back in the day, when I first got started with my photography website, I talked with someone who mentioned it took a long time for my website to load. I was so proud of the beautiful images I was taking, but I had no idea they needed to be MUCH smaller files to work properly on a website and still look great. It took me some trial and error to get it right, but once I did the difference was amazing.

AND… I started getting more clients from my website.

HOW TO OPTIMIZE YOUR IMAGES

RESIZE IMAGES

For optimal loading times, your goal is to get the file size to 500 KB or less. The smaller the file size, the faster it will load. Resize your images to 500KB or less before uploading them to your website.

How do I get my images to 500KB or less?

A couple of free programs available for resizing your images are BeFunky and vistacreate.

• Resize banner images to a width of 1,800 - 2,000px (3000 wide max)

• Resize all other images to a width of 1,500px or less

• Choose a resolution 72 PPI (pixels per inch). While 300 PPI is great for print, it is not necessary for websites and will give you a much large, and slower loading, file size.

• For optimal loading times, your goal is to get the file size to 500 KB or less. The smaller the file size, the faster it will load.

COMPRESS IMAGES

Once you have resized your images to get the file size as close to 500kb as possible, there is one more step you can take to reduce it further. You can reduce the file size of your images further without significantly impacting quality by compressing them. Use image editing software or online tools to compress JPEG and PNG files. JPEGmini, Squoosh.app, TinyPNG, and JPEG Optimizer are popular tools for image compression.

HOW IMAGES EFFECT YOUR SEO (SEARCH ENGINE OPTIMIZATION)

Once your images are resized and ready to go, there is one final step before uploading them to your site. Give the images a good title that includes relevant keywords.

ADDING IMAGE NAMES

Name every image so Google can see it. Google takes cues as to what is in the image from the name of the file. Describe the image using keywords but avoid keyword stuffing. The title should legitimately explain the photo while including keywords.

You can rename your images later, but best practice is to resize and name your images before you upload them to your website.

A good image file name should be descriptive, concise, and relevant to the content of the image. Here are some tips for creating effective image file names:

1.    Be descriptive: Use words that accurately describe the subject or content of the image. This helps both users and search engines understand what the image is about.

2.    Use keywords: Incorporate relevant keywords into the file name that people might use when searching for similar images. This can improve the image's visibility in search results.

3.    Keep it concise: Avoid long and overly complicated file names. Aim for brevity while still conveying essential information about the image.

4.    Use hyphens or underscores: When separating words in the file name, use hyphens (-) or underscores (_) rather than spaces. This ensures compatibility with web browsers and servers.

5.    Include the file format: It can be helpful to include the file format extension (e.g., .jpg, .png) at the end of the file name to indicate the image type.

6.    Avoid special characters: Steer clear of special characters, symbols, or spaces in file names, as these can cause issues with compatibility and file handling.

Here's an example of a good image file name: "golden-retriever-puppy.jpg"

In this example, the file name is descriptive ("golden retriever puppy") and includes relevant keywords for search ability. The words are separated by hyphens for readability, and the file format extension (.jpg) is included at the end.

ADDING ALT TEXT

Add descriptive and relevant alt text to your images to improve accessibility and SEO. Alt text helps visually impaired users understand the content of an image and provides context for search engines. Include relevant keywords in alt text but avoid keyword stuffing and keep it concise and descriptive.

By following these image optimization best practices, you can improve your website's performance, user experience, and SEO rankings while ensuring that your images look great and load quickly across all devices.

Overall, using good quality and optimized images is essential for creating a visually appealing, fast-loading, and user-friendly website that effectively communicates your message and enhances your online presence.

Want more SEO tips? Download my free SEO guide here.

Need more help with your Squarespace website?

A photographer turned Squarespace website designer with a passion for yoga + holistic wellness. My mission: to help others get their vision online so they have more time to do what they love!