How to Optimize Images for your Portfolio Website
Did you know that one of the most important things you can do to set up your website for up for success is optimize your website images for better SEO?
What is image optimization? Image optimization is a process of saving and delivering images in the smallest possible file size without reducing the overall image quality (Source: WPBeginner).
It sounds complicated, but in practice it’s actually pretty easy. In this post, I’ll cover a few things you can do to prepare your images before and after you upload them to your website.
Starting with a great image is paramount to presenting your artwork in the best possible light. I’ve written a guide to preparing for a professional photoshoot here, so if you haven’t yet started planning for your website images, it may help. But, no matter what images you’re working with, you may find these tips helpful, especially if you’re planning to DIY your own portfolio website.
Resize your Images
Resizing your images helps your site load faster, which is among the most important things to your site’s ranking on search engines. To find the size and dimensions of your original image:
PC - Right click on the image file and select Properties.
Mac - Press Option while clicking on the image file, then select Get Info.
Recommended formats for websites are .jpg, .gif, or .png. Here is a useful guide to understanding image formats.
I routinely work with artists whose artwork images are high-resolution images, and some of those files can often be 4,000 to 5,000 pixels wide, or larger in dimensions. You will definitely need to keep large high-resolution images, including .TIFF format images for use in print projects, but use on a website, low-resolution images are generally best. Lower resolution images can also be a deterrent to stealing or unauthorized use. So the objective is to reduce the image size without losing image quality, which can sometimes be a challenge. Experiment and find what works best for you.
If you're concerned about image resolution, focus on the image's dimensions and keeping file sizes under 500 KB, rather than DPI (dots per inch) or PPI (pixels per inch). DPI and PPI affect an image's print quality, but not its web display.
For Squarespace websites, I usually recommend using an image dimension between 1500 and 2500 pixels wide (while maintaining the same aspect ratio), and then using a consistent width across all your site files. Ideally, background images should have a width of 2500 pixels.
Also, always try to start with larger images and reduce their size, versus enlarging smaller images because they will likely render as distorted or pixelated on your site. Not good!
Most website platforms will resize your images automatically based on the screen where they are being viewed, so starting with the right image size can impact your user experience significantly. When in doubt, check your website platform’s recommendations for image size before you start this process to be sure you meet their recommendations.
Compress Them!
Once you’ve reduced the image size, you can also compress the files without losing image quality, to help your site load quickly. There are lots of apps available in the market that will help you compress your images for free, including Optimizilla, Tinypng, JpegMini. I’ve included instructions on how to compress your image files using Optimizilla in the above video.
Keep in mind that you may have to experiment with this step, because it lends itself better to some types of images than it does to others (for example, artwork that requires an extra level of effort to view subtle details can sometimes suffer a loss in quality, so you would need to adjust accordingly).
Customize Image File Names
This seems like such a small detail, but it’s important to helping search engines discover what the image is about, which makes it more likely that your images will turn up in image searches. You can see why this might be more important to artists and creatives than it would be to other types of businesses.
Generally, images of your artwork, including any that are going to be included in an online gallery should employ a naming format similar to the ones below, and include hyphens to separate words so search engines can distinguish between each word:
First-Name-Last-Name-Title-of-Work-Year-Media-Dimensions.jpg (or.png)
Use this format consistently throughout your site, and better yet, see if you can make a habit of always saving your images this way, when you’re uploading them to your routine storage tool. It’ll save you valuable time and effort in the long run.
Other images, such as portrait photos, or process images should be saved with descriptive file names, for example:
Painting-Florals-with-Watercolor-Process.jpg
Interview-with-Name-of-Artist-for-Name-of-Podcast.jpg
Whatever you do, don’t add keywords that are unrelated to your image, because that will actually hurt your site’s SEO (those algorithms are smart!). Also, remember to only use letters, numbers, underscores, and hyphens. Anything else, including question marks, may not upload or cause unexpected issues.
Once You’ve Uploaded the Images to Your Site… Add Captions!
Once you’ve uploaded your images to your website, don’t forget to add captions under each image. In most platforms, you will have the option to hide the captions if you prefer a clean layout, but do add them to your site’s back end, because they’re still be hard at work, even when they’re invisible on the front end.
Lastly, Don’t Forget to Add ‘Alt” Descriptions
These descriptions need to be entered in a special field marked “Alt” and won’t show up on your site, but are important to making your site accessible to visitors who are visually impaired, so in addition to making your user experience more inclusive, they also provide information to engine crawlers about the content of the image.
There are additional steps you can take, but this post covers some of the basics you can easily take care of yourself. Many of these things are often overlooked on DIY sites. I know, it can be tempting to skip some of the smaller steps involved in on-site SEO, especially the ones that are invisible on the front end of the site, but if you make the time to do this, I promise, you will see a difference over time in the volume and kind of traffic you’ll receive on your site.
Comment below, which of these strategies will you be implementing first?
