Blog Series Post #2: Get Your Assets in Gear!
As you get underway with a new web project, it’s helpful to have a solid working process in place. When agencies and clients have different styles and methods for dealing with and transferring assets such as copy and images, inefficiencies can creep in which can slow down the process and add to the cost.
In this second part of our blog series, Get Your Assets in Gear, we outline some tips and considerations related to the preparation and delivery of your visual assets. Following a few simple steps like these will streamline your efforts and ensure that your project stays on schedule, comes in on (or under) budget, and produces a great online experience.
1. Image sizes for web: Bigger is better, but not too big.
For best results, images should be large when handed over to your web team. Large digital images (such as JPG and PNG images) can always be made smaller with photo editing software like Photoshop or GIMP, but small ones can rarely be made larger.
At Stride, we build websites in WordPress. When an image is uploaded into most WordPress sites, multiple versions of the image are automatically generated. These versions often include a small, square ‘thumbnail’ image, as well as small, medium and large crops of your original image that are usable throughout the site’s posts and pages. The appropriate version will then be used based on the particular use of the image.
In order for an image to get cropped appropriately, it must be at least as big as each crop size. For this reason, it’s always a good idea to provide us (or your own web agency) with large images. We can then optimize them and ensure they’ll look sharp and be cropped correctly.
Note: Photos larger than 2560 pixels wide shouldn’t be necessary on a typical website. Images this big can slow down your site.
2. Web image orientation: Horizontal, vertical, or square?
Typically, horizontal images work best on websites. Depending on your website’s design, it is usually best practice to provide horizontal images. While vertical or square images can still work well, horizontal images are generally preferred due to the dimensions of a typical screen. Of course, there are exceptions to every rule, so if your library of images contains primarily square or vertical images, your website design can be adjusted to take advantage of your particular images.
3. DIY web images: How to size and optimize
Agencies like ours regularly handle image cropping and optimizing for websites. But if you have image cropping and optimization software, you can shave a bit off your budget by sizing and optimizing your own images. If this work sounds suited to you, there’s just a couple things to keep in mind. We use Adobe Photoshop, but there are free tools online like GIMP that can do the job, too.
To size your images: Aim for a maximum width of 1600-1920 pixels wide (for horizontal images). Also, aim for a standard size ratio, which will be easier to apply to different types of pages and posts.
To optimize your images: For best results, optimize your images to the lowest possible file size that doesn’t harm the integrity of the image. You’re trying to strike a balance of good image quality and small image size. Start by optimizing the photo to approximately 30-40% quality for JPGs. If the resulting image looks blurry or jagged, it may be over-optimized — so go back and do the optimization again, increasing the optimization level to 40-50%. These steps should help minimize the file size of even the most large and detailed images to be well under 400 kilobytes. Smaller photos, logos, and less-detailed images should have a much smaller file size usually well below 100k.
4. File naming: Best practices for web images
File names matter on the web. Most importantly, name your image files in a way that doesn’t contain spaces or unusual punctuation. In addition, file names should contain keywords that describe the image and/or its location on your site.
A file named DSC-12896.JPG will not be helpful when you’re looking for it in your WordPress media gallery. Filenames with keywords will help you easily locate the images, and will be read by search engines to help drive traffic to your site.
Good file nomenclature is also essential for a smooth transfer of files from you to your web agency. Try to aim for a naming system that makes sense and is easily repeatable throughout the site.
5. Web image delivery: Be organized
When sending images files to your web team, aim to be as organized as you can. A little extra effort on your end can result in significant savings in time and project management costs.
Whether you’re sending original images or ones you’ve sized and optimized yourself, group your images into folders according to your site map — either by section or by page. If there are images you want featured in a specific way, indicate that in your folder organization, your file names, and/or in a document that accompanies your images.
You can easily transfer your files in a number of ways. File transfer sites like Dropbox work well, or you can use your agency’s FTP site (if they have one) to upload them there. Never send lots of image files loosely in multiple emails — this creates extra project management work and can introduce errors into the process.
By following these tips, you’ll be on your way to a smooth and cost-efficient website filled with high-quality images, which will serve your organization for years to come.
