Sizing Images For The Web And WordPress- A Tutorial
Advances in technology are making the devices we view images on better and better. 4K, HD, Retina, are high resolution technologies that make our images look more like life, with amazing color and detail. Unless you don’t have your images prepared correctly to display on these devices!
Older articles on web design tell you to make your images as small as possible to optimize speed. Articles on mobile design tell you to make them smaller yet! The problem is that when viewed on these higher resolution devices, your images will look soft, fuzzy, and even out of focus! Is there anything worse? Actually there is! A great number of photographers upload full size images at the highest quality thinking that the images will look great. The may look great but full size images slow websites down to a crawl. Even if the images are resized as uploaded, extra time is required to handle all of the full size images.
So what is the best work flow for handling your images? Well lets look at some of the past issues to determine the fastest and best way to get an image from camera to client. First our delivery method has changed, we used to have to prepare images for print. That means that we had to handle different crops; 8×10, 5×7, 4×6, etc. We would never “pre-crop” an image because we may have to go back and change it later. Digital delivery has changed all of that. We only need one crop! This fact alone will save most photographers hundreds of hours on image prep.
Image Resizing Workflow
So the very first step in sizing images for the web is to save your hires files. Next crop all of your images to a 5×7 format at 300dpi and save at jpg 12. We rename our files to “filename_5R.jpg”. This will be the crop you work on in Photoshop, the same crop you will deliver to your clients, and yes the same crop that you will use on the web (we will only change the quality for the web)! Cropping first saves hundreds of hours per year, files save faster, load faster, they are faster to work on in Photoshop, they can be batch processed for the web, it is the fastest and easiest way to cut your workload in half!
Once cropped, do your retouch, add your file metadata. Next save the file under a different file name such as “filename_customername.jpg” You will deliver these files to your client. From there you can run a Photoshop batch action to prepare images for the web. The website images will be saved under a different folder and file name such as”filename_customername_web”. Your web images will be the same crop, same dpi, the only thing that changes, is we save the file as a jpg 8 or jpg 9. This reduces the file size by about half, keeping the resolution high enough for a full size image on an iPad retina display!
You can create a batch action to do this automatically. Batch actions can also place a logo, copyright, borders or whatever else you need, without you having to touch each image. Why? because we have a known image size from our crop!
Additional Benefits To The 5×7 Workflow
Lastly this workflow of sizing images for the web gives you a consistent look and feel to all of your images. It also provides a consistent size for your website (WordPress themes are picky about image sizes and crops), and still allows your customer to print almost any size that they need (if they ever print them!).
Yes… I get the question all the time. What if my customer wants to print a huge 16×20. When digital first came out we were shooting 3 megapixel cameras that produced files that were smaller than a 5×7 at 300dpi. I have seen prints as large as 30 inches from these files that look great. Our technology has only gotten better, allowing us to make even larger prints from relatively small files. I just shot a billboard with a 12mp camera and it looks great! In other words, yes, they can make almost any size that they need. In the RARE case they want something ginormous, simply redo the retouching on that one file and send them the full res image.
Sizing Images For The Web And Responsive Web Design
To provide the best of all worlds from the images that you just saved for the web, your website should be responsive and smart. Responsive means that it should automatically scale to fit any display, like a computer or a mobile device. Smart is my term that means that your website should not only scale down for any device, but it should be smart enough to deliver images that are sized specifically for the device that they are being displayed on. Many responsive sites load large images for viewing on a computer screen then simply scale these images for mobile devices. Loading a large image for display on a small device and rescaling it on the fly is slow and detrimental to your website and SEO efforts. Check out our WordPress themes for a Smart Responsive theme if you don’t have one.
A final note on sizing images for the web. There is a ton of image theft on the internet. Some by fellow photographers that are using your images as their own on their websites. Others are grabbing your images to get them noticed on the google image search. These sites can be spam sites, porn sites, and malware sites. I have had it happen over and over again. I highly recommend embedding metadata with your copyright and info in any file that is going on the web. Many strip out the data when they steal your images, but having a file with the proper metadata posted on your site, will help if you get into a dispute later. I also recommend placing your logo and copyright on the image somewhere. A border that will properly frame the image so that it displays correctly on all backgrounds helps as well.