Do you ever feel the frustration of uploading a picture to your art therapy website, but it’s cut off, stretched or blurry? Then you waste more time and energy to go back, resize it and save it until it fits just right. Ugh! Frustrating, isn’t it? All you want to do is just focus on your clients not trying to size a photo to fit a space.
It’s that frustration of the times in finding a suitable picture frame with the right size to fit one of your favourite portraits that you oh so badly want to hang on your wall. If it doesn’t fit it would have gaps in the frame or it just doesn’t fit in the slot. Yeah, definitely stressful.
This is similar to digital realms with fitting photos into a website frame, where its a cover image, a background image, an image group with text or a thumbnail. They’re all different types of picture frames but they all have standard sizes so no need to plow through different types of picture frames. Those days are over. Thank goodness for systems.
Now in the digital age
Websites are the go to marketing material to hold and something that is easy to navigate. The focus of user experience has been the focal point in today’s market. The website not only has to look visually pleasing but has to perform well too. Visuals have become the dominant aspect in web communication. Did you know that people remember pictures then they do of text? Goes to show you how much love and care you need to put in your visuals. Plus visuals help to support any misunderstandings because it’s a universal language and will help paint the picture about art therapy much faster than text ever can.
Through my experience working with art therapists in building their brands, they are not tech savvy and get overwhelmed and confused when it comes to these technical softwares and they like to keep things very simple. Today I am sharing easy tools and tactics you can use to get the basics down in saving out graphics for your website that doesn’t require purchasing any software or have any deep learning curves.
Understanding the Impact of Proper Graphic Sizing
I am sure you are familiar with social media’s different size guides, right? Instagram has their 1080 x 1080px square post size and Facebook has their 820px by 360px cover banner. This is similar to the image elements on your own art therapy website. Why these rules are in place is because of the following
- Highest quality: These guides ensure your picture will be displayed at the best resolution with no pixelation.
- Performance: It will optimize the size of the image and improve loading times on your website without interrupting the quality of the image.
- Consistency: The focus of systemizing the process to keep things simple, easy and accessible which leads to your website looking professional.
Why Size Matters:
Importance of Properly Sized Graphics for Website Performance
If you are up to date with the social media algorithm, they look for postings that have good quality and performance. If that meets their requirements then they will push the content to more people. This is similar to the behavior of websites interacting with search engines like Google.
The importance of properly sized graphics is crucial for art thearpy website performance. Saving your image to the appropriate sizes and adjusting the file sizes before your upload it to your art therapy page can help you in a few ways:
1. Speed
Websites need to load fast to keep users engaged. If it takes more than 5 seconds to load, that’s a sign to adjust your images in resizing or reducing the image file size. The focus is on the functionality the aesthetics come later, the purpose of a website is for it to be usable and functional.
2. User experience
Focus on the quality and creating impactful images that way it keeps visitors interested about your content and want to dive deeper into the experience which will stay on your page longer. Visuals can make your content more informative, engaging, and memorable. Think about how you want our visitors to feel when they come to your art therapy website. By keeping the images small and loading fast – you’re opening doors to a seamless and smooth experience for your visitors, which motivates them to spend more time on your site and explore your content.
3. High SEO ranking
So many art therapists tell me about SEO and how to achieve a high rank. One of the things to keep in mind is that speed is one of the ranking factors but not only that it’s about the alt tags on images. Image Alt tags can add an extra layer of accessibility. This is connected to Google crawling your pages looking for keywords, so your Image alt tags need to be a focus for any image you upload. Don’t just place it in space and call it a day. There’s so much more involved in leveling up your site’s performance and experience.
4. Sales
By spending the time improving your graphics, and your SEO rank you will notice more traffic coming to your website because its performing much better. Google sees your website as a good place for people to visit and experience. Think of your website like a physical store, are all the clothes organized? Are the displays easy to read?. Think of your website as a space or a room. It will increase your chances in getting bookings.
Here are some Graphic Sizing Tips:
- Use an image sizing program to correct your images.
- Stick to the Web Graphics Measurements of your website template.
- Use an Image info tool to identify the specific size and match the size.
Effects of Oversized or Undersized Graphics on User Experience
If you don’t make the effort to improve your graphics then it will do the following:
- Slow down your website loading time: People hate waiting for and will more than likely walk away. This is a bad user experience.
- Google will lower your search rank: Google looks for quality and performance just like Instagram does, so if there is a lack of effort in this area your rank is lowered on Google’s search pages.
- Low traffic or visitors: People like websites that are easy to navigate and are pleasant and accessible. If it doesn’t meet these expectations then they will turn their attention elsewhere.
Factors Affecting Graphic Sizing
Resolution and File Format Considerations
Displaying any images for web design aesthetics, it must always be displayed 72 DPI. DPI stands for dots per inch and is a measure of resolution commonly used in digital images. Moving onto file formats, always stick to .JPGs, .PNGs, .SVG files. They are the best to use on the web and can be easily compressed and optimized without losing quality. I’ll break down the best use for each of these file formats.
JPG
Best used for full-colour images and detailed images such as photos of people, landscapes or shots taken by a camera in general.
PNG
They are best for simple graphics that hold many colours. Simple graphics can be icons, logos, shapes, graphics that need the background removed. PNG can do transparent images or images with the background removed.
SVG
This is a little more advance but its best for logos, and its similar to PNGs.
Responsive Design and Mobile Compatibility
Responsive design is about your website having the power to shrink to a phone size and back up to a computer screen size without losing quality and performance. The entire time it still displays seamlessly.
When it comes to thinking this way we think about creative image sizing because when we save our images we need to remember that it has to look good on a phone and on a computer. It’s usually best practice to work with the biggest size and then know that it will be adjusted to whatever screen it’s been viewed, which is called display size.
It’s easier to scale something that is big to small but hard to take something small and make it big.
Measuring Tactics for Optimal Graphic Sizing
In this section. I’ll share a few tactics that helped me adjust my graphics for web viewing. These are all very accessible options that are free. First I do want to share the website image elements that are always consistent in all web pages. That way you can get familiar with each image element.
Website Image Standards Guide
Images that cover your whole screen – 2400 x1600px
Landscape Images with content beside them – 1500 px in width max
Portrait Images with content beside them – 1000 px in width max
Gallery photos – must be all the same height of 1500px
Blog Post Images – 1500px in width x 630 px in height
Portrait Feature Images: 1000 px in width
Landscape Feature Images: 1000 px in width
Hero Feature images: 2400 x1600px
Background Image 1920 x 1080 pixels
Thumbnail size: 200px × 200px (square)
Background Image 1920 x 1080 pixels or 2400 x1600px
Header Image 1280 x 720 pixels
Website Banner 728px × 90px (leaderboard), 300px × 250px (medium rectangle), or 336px × 280px (large rectangle).
Logo 100px to 200px in width and 50px to 100px in height
Icons: 50px x 50px
Large Infographic Icons (square) 200px x 200px
Button: 50px height to 300px in width
Favicons:64px × 64px
Utilizing Tools for Accurate Measurement:
Introduction to Online Graphic Sizing Tools
Through my experience with working on websites I have discovered Photopea for a free online browser photo editing software to quickly get the job done. I have found two web graphic measurement tools through the Google Chrome Store, they are free extensions. First one is called Page Ruler and the other one is called Image Size Info. These tools can help you find the size of an image inside of a website template or create a graphic for an empty space on your art therapy website.
Step-by-Step Guide to Measuring and Adjusting Graphic Sizes
Step 1
Download the Image Size Info or Page Ruler to your Google Chrome Browser.
Image Size Info
This one you can simply right click on the image and you will see in the drop down Image info icon.
https://chromewebstore.google.com/detail/image-size-info/oihdhfbfoagfkpcncinlbhfdgpegcigf
Page Ruler
You have to set a key shortcut to get this one to work.
https://chromewebstore.google.com/detail/page-ruler/jcbmcnpepaddcedmjdcmhbekjhbfnlff
Step 2
Go to the website template you are using for your art therapy website and use the Google tools to capture its height and width in pixels.
Step 3
Open Photopea
https://www.photopea.com/
File, new, give your project a name. Under the width and height plug in the numbers you collected. Keep the DPI at 72. Hit. Create.
You have a blank canvas with the right size frame to match your website template. Go to file and Open & Place to get the photo you want to use.
The photo will then be placed inside the canvas. Size it accordingly, fill the frame and it will keep the proportions the same.
Step 4
Export the image for web
File, export as JPG or PNG depending on the image, check the height and width to make sure it matches what you captured on your website. Under quality, move the slider to 60% this will change your file size but keep the quality of the photo in good condition. Make sure you name your photo too and make sure there are no spaces in the name. (Example: arttherapysession.jpg).
In conclusion
Together we explored the essentials of proper graphic sizing in creating an effective art therapy website that performs to its highest potential. By practicing these techniques outlined above you can connect meaningfully with your ideal client taking into consideration how you want them to feel when they visit your digital space. These measuring tactics are tools in your back pocket to take with you on your branding journey to build the best experience for your people and create deep connections.