Recently we launched a new local directory website for Northern Westchester County, WestchesterNorth.com. Westchester is home to a number of amazing places and people. The area is rich in history and beauty. Westchester is located north of New York City (no it’s not upstate – that would be Buffalo). It is a convenient and enjoyable commute to Grand Central Terminal (no not station – that would also be incorrect). Westchester North is a gateway to the local businesses and people of Northern Westchester, and we continue to enjoy developing content for the site and social. But I digress, the point of this post is to talk about the importance of images on your website, in your social media, and for your brand in general.
In building and designing Westchester North one of our primary tasks was to capture and organize 1000s of photos for the site and for social. As content creators we tend to go overboard with high-end cameras and lenses, often capturing content in 4K and beyond when necessary or just enjoyable. When it comes to a website however it is best to keep in mind the mantra “size matters.” If you are building an image-heavy website you need to make sure your site will load quickly and efficiently for both proper google ranking (and SEO) and most importantly for ease of use by your visitors. Below we breakdown some important steps to help you optimize your content. Our quick guide to preparing your images for your website, brand, and beyond.
Let’s start with the basics.
QUALITY
First, start with high-quality images. Whether you are sourcing stock imagery or taking your own photos start with the highest quality possible. This will give you the opportunity to properly resize, crop, correct, augment, or enhance as your heart desires.
It’s also important to remember if you are using your phone to capture images for your website how you plan on using the image. Play it safe and take a PORTRAIT and LANDSCAPE photo, you’ll thank me later.
Portrait of Mr. Chris Valentino
Landscape Photo of Nancy Burpee for NYU Winthrop
FILE FORMAT
In most cases, your image is likely to be a JPEG file. While there are other web-compatible files such as GIF, SVG, and PNG, JPEG and PNG are most common. PNG’s offer you the option to have a transparent background say for your logo if you want to overlay it on your page or another photo. Starting with a high-quality LARGE jpeg file will give you the opportunity to edit it for a variety of uses. Remember you can always make a large image smaller, but making a smaller image larger well that results in a poor looking, pixelated disaster.
JPEG for Photos
PNG for Graphics and Logos
Many simple image programs you might find on your computer or phone let you choose JPG or PNG by going to “Save As,” “Export,” or “Save for web” and selecting your preference. There are some great web apps that make editing images and graphics super easy. (We love canva and crello for creating simple graphics.)
RESIZE TO OPTIMIZE
Life is all about balance. When it comes to your photos and your website you will need to find the right balance between page speed and appearance. If you are using a high-resolution image (read large file size) you will greatly affect the speed at which your web page loads. Large file = Slow load, this hurts your user’s experience and your SEO as I mentioned above.
That said there are times when you want to use a large image for your page header or hero banner or to showcase an amazing feature that requires detail, so it’s okay, but don’t go overboard. You want to keep an eye on the size of the image after you save it. Is it 6 MB or 128 KBs? Are you using multiple images on a page? They add up too.
Size and Resolution (DPI). DPI or dots per square inch refers to the pixel density of an image. If you plan on printing you will often want your images to be 300 dpi minimum and scale up as necessary (which if we jump back up a few paragraphs is why we often capture content with super cameras and lenses, or as we say, overkill). However, if your goal is the internet then you need to think smaller, 72 dpi to be exact (although 92 dpi is also an acceptable practice). Now, the resolution is only one part of the equation, the other is dimension. Like most humans you are probably familiar with typical photo formats such as 4×6 or 5×7, perhaps you even have your 8×10 highschool photo matted in a nice 9×12 frame. On the web we talk about dimensions in pixels. For example, a hero blog pic may be 1600 by 800 pixels. We typically start with our images at 2000x 1200 and scale down as appropriate. There are times where we will play with the scale of an image for a more cinematic look and others where the image dictates the format (such as a portrait or landscape photo).
We could talk for hours about the numerous ways to format a picture from 1:1 for Instagram, to 4:3, to 16:9, to 9:16, and so on. Every social media page has its own requirements and guidelines and you have to think of how your image will work on both desktop and mobile as well.
CONSISTENCY IS KEY ( a side note)
Before we jump into the all-important topic of naming and organizing, we’d like to stress that consistency plays a huge role in your web design and presentation. Think about how your images will be used on your page or in your post and create your own brand style guide to uniformly organize your images.
THE NAME GAME
As some of my clients will tell you, I can be a bit pushy when it comes to naming things clearly and properly. When it comes to images most people don’t think about their file names at all. If they took a pic and it is “DSC_120312343489.jpg”, “Photo2.png” or, dare I say, “Screen Shot 2019-07-01 at 3.28.42 PM”
If this sounds familiar, take a break from reading and start renaming your images before you upload anything to your website. Why? Why? Because doing this one simple thing makes managing your photos easier and in the process, it may just help boost your SEO (depending on where the images appear online.)
Again on the topic of consistency, stick to one format: use lowercase letters and numbers 0-9. Don’t introduce punctuation or spaces, it is best to use-hyphens-to-separate-words-rather-than_underscores. (Think awesome-photo-of-chris-valentino-on-set-looking-dashing.jpg rather than DSC12345.jpg).
CAPTION THIS
Once you properly name, resize, and UPLOAD your images think about the other SEO seasoning called Alt-Tags (Alternative Text). While not visible to your average user this information tells search engines what your image is all about. Typically with Alt – tags you want to describe your image in a simple, descriptive way this helps visually impaired visitors who navigate your site with audio-based software. It’s also a great way to improve website accessibility.
PLACEMENT
The last thing to add is to always keep your images placed in a relevant position on your page or post.
Don’t just toss it on the page, place it close to the related textual content. While Google is getting better at recognizing images they won’t do your work for you.
All in all, think organization, optimization, and quality!
