Skip to content

Web Images: A Cheat Sheet

Web Images: A Cheat Sheet

A picture is worth a thousand words, but how do you make sure that these are positive words when it comes to images on your website? Sometimes you find an image that you think would be perfect for your site: it matches your branding, it follows the theme of your existing images and it’s just downright stunning to behold. Then you add it to the site and it appears that something has gone horribly wrong. The image is stretched or otherwise distorted, or it’s so zoomed in that you can only see one tiny aspect of the picture.

So what happened? There are a number of issues that can occur when adding images to your site. Below is a cheat sheet that describes common sources of image errors and how to correct them.

size

Size

An image that is too small for the space will be stretched to fit, making it appear distorted. On the other hand, if you try to use an image that is too large, you will only be able to see a small, close-up portion of the larger image. Make sure that your image is sized correctly for its corresponding space. If you’re not sure of the proper dimensions ask your web developer.


size

Orientation

If the space on your page is landscape (wider than it is tall), use a landscape image. If it’s portrait (taller than it is wide), use a portrait image. Trying to use these interchangeably is like trying to put a round peg in a square hole – you can make it fit, but it won’t look right.


size

Shape

Not only do you have to consider the orientation of your space, you also have to take the shape of the space into account. If your space is 750 pixels (wide) x 200 pixels (tall) and you are using an image that is 750 pixels X 400 pixels, half of the photo will be cropped out. This is fine if you can still capture the focal point of the image, but for some images this just won’t do. Remember to keep the shape of your space in mind when choosing an image.

Share This:
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

Book FREE Trial

We know that getting back into fitness is tough! Let us help you achieve your weight boxing workouts.

Creative Director/Senior Designer

Tom DiGrazia

With over a decade and a half of professional design experience, Tom brings his knowledge of design principles and focus on user experience to every aspect of his contribution to TTG. Paying special attention to each client’s brand, personalized needs and individual interests, he strives to create compelling concepts utilizing intuitive and highly-refined design solutions. In addition to traditional and digital design work and oversight at TTG, Tom also boasts a wide portfolio of web development projects with the company, allowing him to stretch his CSS and HTML skills across multiple platforms and disciplines. He feels that being a designer in the digital landscape of websites, eCommerce solutions, email marketing platforms and social media, it is important to understand the code that goes into these areas as it assists his ability to tailor designs specifically targeted to achieve the best end result and further builds understanding and communication with backend development teams.

In his off hours, Tom is an avid pop culture enthusiast, staying up to date on the latest shows, films, comics and games. He can also typically be found taking part in a whole host of artistic activities that help him further stretch his creative legs. Regardless of the activity, Tom is always accompanied by his dog, Eli, and his cat, Tib.

Specialties:
Design, Photography, Illustration, Digital Imagery Manipulation, Wesbite Development

Platforms/Tools:
Photoshop, Illustrator, InDesign, Lightroom, HTML/CSS, Wordpress

Analyst/Strategist

Courtney Dumont

As Senior Marketing Strategist & Analyst at Technology Therapy Group, Courtney is energized by the ability to flex both her left and right brain daily. Courtney discovered her passion for Marketing at Bryant University, where she spearheaded research on students’ perceptions of Social Media Marketing for her Honors Capstone Project. After graduating Bryant in 2012, she joined the Technology Therapy team, where she’s honed her skills in social media, search and social advertising, email marketing, SEO, and more.

Since joining the team, Courtney has created digital marketing strategies and managed campaigns for clients across the country, ranging from plastic surgery centers, to jewelry stores, to construction companies. With a cohesive, cross-channel approach and a focus on data-driven decision making, she has increased their leads by up to 217%. But Courtney doesn’t leave her zeal for social media at the office; she also runs a local foodie Instagram account with her husband to document their meals across Rhode Island and beyond. Check them out: @hoppilyfed.

Specialties:
Marketing Strategy, Data Analysis, Google Ads, Facebook Ads, Social Media

Platforms/Tools:
Google Analytics, Google Ads, Facebook Ads, Facebook Creator Studio, Instagram, Klaviyo, Mailchimp, Emma Mail, Google Data Studio, WordPress, YouTube, LinkedIn, Facebook, Microsoft Office