Sourcing, prepping, and uploading images to your website

We know the thought of preparing images for websites can be daunting. In this super condensed guide we’ve focused on the most common questions and solutions that our client content editors ask.

While we have been streamlining the use of images in websites to make the content editors life easier, we can’t automate everything!

To balance this we have collated some useful tips like; how to ask for images from creatives, how to source images, and the tools you can use that do not need subscriptions or license costs.

Lastly we’ve gone into a little more detail around some of the broader concepts so you’re up to speed on terminology and the latest best practices.

In short, you do not need to be a photoshop expert to make use of powerful imagery in your website.

Sourcing images

For any given website layout, there can be a need for many different sizes and crops. For more recent websites, we now take care of all the resizing automatically meaning you can focus on sourcing images that are at least the same size or larger than required.

You’ll find the required sized either in the CMS under the name of the field where you upload it or in an image guide that accompanies the website if one was created.

There are three things you need to consider when sourcing images:

• Pixel dimensions (the width and height of the image).
• The ratio (e.g. landscape or portrait)
• Focal point (the part of the image that should always be visible at different crops and browser viewports).
• Image format (e.g. JPG)

The context of where the image will appear will determine the importance of each of these factors.

But this guide is all about keeping it simple, so…

A. Requesting images from a designer

You need to ensure you provide the information for each of the four considerations above.

For example, you’ve created a landing page so need a header image, a few portraits for the team section, testimonial logos and Infographics.

You would ask for them as follows:

Header images

• 2500px
• 16:9 (the equivalent of a wide header)
• Ensure focal point is in the middle (the site crops the left and right on smaller screen)
• JPG

Team photos

• 600px
• Square
• As per guidelines (you will likely have a set style for team or people photos).
• JPG

Logos

We also need some testimonial logos. As a rule they should always be vector files but failing that, a high res PNG will do!

• Cropped tight
• Saved as a SVG (This allows us to place a logo in the context of the designs in different ways - you can find out more about how we automate logo sizing here)”

Infographics

Lastly you have some infographics for an article.

• 1000px wide
• There is no need to give a height as infographics tend to vary depending on what it is.
• The format depends on a simple rule: if it is just text and flat graphics, then request a SVG. If it includes images, then ask for a PNG. A JPG is an option if the image is particularly complex.

If they ask what DPI you need, this is your time to shine. Simply say it is not relevant for displaying on screen.

B. Sourcing images from an image library

As a general, rule download the highest resolution version. If there are budget considerations, then at least match the minimum size needed by the website.

Safe sizes for the following include:

• iStockphoto: L (2000px) or XL (3600px).
• Getty Images: Medium or Large.
• Unsplash: Large or Original size.
• Shutterstock: Large (3000px+) and only Medium (1000px) if a smaller support image.

Making simple edits

If you are one of the lucky marketeers or content editors with Photoshop or Photo Affinity installed, this is not for you. For the rest of you who do not, this may save you a lot of time.

A. Photopea (free online editing app)

Photopea is a great web browser based photo editing application. So unless IT blocks access, it avoids the need to install anything locally.

It’s very similar to Photoshop in that allows you to make colour adjustments, retouch areas, resize, crop, and remove backgrounds to make an image transparent.

B. Crops in Craft CMS

If all you want to do is crop an image to make sure the area of interest is the focus, then an easier option is to use the built in image editing tool in Craft CMS.

Uploading images

You’ve finally got the images and all you want to do is upload them to your page and be done with it! But there are three key rules to abide by:

• Use a good naming convention for your site.
• Keep a tidy folder structure.
• Add the alt description.

Filename

Depending on your industry, image search can be important. This is especially true of e-commerce websites.

Good file naming conventions can be a factor in helping search engines understand the image. Other factors will be the context of the image, captions, alt descriptions, and the site content as a whole.

For example:

• white-running-shoes-brand-name.jpg
• your-company-infographic-chart-of-comparing-something.jpg
• 2022-prediction-future-of-web-3d.jpg

A handy tip is to include a SKU reference if a shop as consumers will sometimes search for a very specific model of a product using the product SKU.

• white-running-shoes-brand-name-sku12345.jpg

Or simply name them intuitively so you can find the image in the CMS asset folders! We will refrain from naming and shaming but you know who you are…

Folders in Craft CMS

Depending on where in the CMS you are uploading an image, we will pre-determine which folders you can upload too. This is to help manage the responsive image resizing (more about that further down) but crucially to ensure that as the site grows over time you are able to find images when you return in a few weeks or even months.

A little tip in Craft is that you can right click on a folder and create a sub folder. This is useful if you are uploading images for a project and you want to keep them all together or for a Craft Commerce site where having a folder per product can make life much easier.

Another useful tip is that you can drag images into folders without breaking the link to the layout you added it. This allows you to tidy up… erm… any temporary dumping of images. The same goes for filenames. The only caveat is if you have manually linked to an image for some reason!

You can move an image by clicking and dragging it into the desired folder.

Alt descriptions

These are important for accessibility and also helpful for SEO. From an accessibility perspective the alt descriptions are read out by screen readers which can really help people who have a sight impairment to understand the page better. If you happen to be on a very slow connection, they can also helpfully display in place of the image allowing you to move on if it’s not relevant.

A search engine can not see an image the way we do (if we park the advances in AI for a moment) so providing useful descriptions of the images can help the search engine crawler to assess how relevant they are for a given search query. In short, in combination with the factors already mentioned they can help rank your website better!

So what’s a good alt description?

• Keep it concise, like a Tweet.
• Make it context specific, focus on what is relevant in the image to the page.
• If the image is used as a link, explain what will happen.
• There is no need to add ‘image of…’!

Some examples:

A few things ‘not’ to do is try and stuff keywords into the descriptions and avoid adding text to decorative images. If you do, you’re simply asking someone with a screen reader to listen to a description of an image that adds no value to their understanding of the page. Accessibility before SEO!

Formats

Keep to:

• JPG - photographs (raster)
• PNG - infographics, images with text or if there is a need for transparency (raster)
• SVG - logos, infographics, and interactive diagrams (vector)

The ones you can’t use: EPS, AI, PSD or TIFF. If you are using these formats, you’re likely the designer so will be able to export a more web friendly version.

Webp is the future and your site likely already converts your carefully prepared jpgs as part of the optimisation process for responsive images.