While it can be tempting to take any image, upload it to the web (or WordPress Media Library) and try to add it to a website in an unedited or unoptimized “raw” form, the results can often be less than ideal.
Images that are added to a website require some strategic thought as to their use in the website, their overall positioning and look, and optimal size and resolution to allow for best rendering. Very large images that have not been reduced in size appropriately for the web will load excruciatingly slowly even on fast internet connections. Images that are too small will appear distorted or “pixelated” on displays that increasingly want to achieve ever sharper resolution. In between, there is a happy medium and there are tools that can be used and strategies that can be deployed to ensure visitors to your website see a strong visual appeal from your images while also ensuring that they see them the way you want them to.
There are two items that determine an images appearance on any compute screen: dimensions (measured usually in pixels) and resolution (measured usually in dots per inch or dpi). Both must be optimized for use with the web. A third, less precise need has to do with how the image may be automatically cropped in certain places to show only parts of it and the general location of the “core” or “meat” of the image.
Dimensions (width x height)
The width and height (in pixels) determines how much of the screen (as a percentage) is needed to show the image.
Your image’s dimensions should be the maximum you will need. What you need will vary depending on where on your website the image will be. Is it a large hero image on the home page? Is it in a slideshow of medium-sized images? Will it appear as a thumbnail? Will it appear in multiple places (e.g. once as a right-justified image in blog post and another as a thumbnail for that blog post on a page)? These are the types of questions to consider for dimensions when working with images. Additionally, with high resolution “retina” displays now common, the dimensions play an even more important role. Dimensions for an image are usually described by two numbers – width and height. Usually width is written first, then height and a “px” (for pixels) often follows them but not always. Thus 800 px x 600 px (or 800 x 600) means an image that is 800 pixels in width dimension and 600 pixels in height dimension.
Typically, you can find the dimensions for any image by viewing it in a photo viewing program. In the WordPress media library, clicking on any image will bring up its details, one of which is the dimensions. Dimensions will and should vary depending on where a photo is used on a sight, but when you purchase or download a raw image to your computer, you should always start with an image that is the largest in dimension as possible. You can always shrink dimensions in ratio but it can be difficult to make a smaller image look good in larger dimensions.
You can often determine what dimensions an image should be in a particular place on the website by viewing similar images in the area you want to add the image. A slideshow will have other images in it. Find the dimensions of one of the images and you are likely to know exactly what dimensions you need. In our client portals, we often provide exact dimensions for areas of your site that require customized, cropped images and the dimensions provided can be relied on to produce a properly sized image in those locations.
Some websites are enabled with a capacity to display different versions of the image for high capacity “retina” displays that show images at a higher dpi ratio (a function of resolution – see below). However, for dimensions, when working with retina-enabled websites, generally you would take the standard size dimensions and double them. For example 800px x 600px for in retina would become 1600px x 1200px. If your website is equipped to handle retina images (usually through a plugin in a WordPress site), you would upload the 1600 x 1200 image and on standard displays it would generate a version that is 800 x 600 so that in each instance the image renders in proper dimension and resolution (resolution is also a setting as per below).
Resolution (dots per inch / dpi)
Resolution is how tight the pixels exist over an inch of space on a screen. The more pixels per inch, the greater the resolution. While modern professional cameras are capable of rendering images in massive dimensions and resolutions (e.g. 8000 x 3500 at 1000 dpi), these are just not practical sizes for a website (unless you happen to be a professional photographer or graphic design artist). The files would be extremely large and take long times to upload and render on websites. This is especially true of resolution. As it is generally best to start with the highest resolution you can find for your raw image, just like with dimension, you will want to resize and crop your image to a more modest resolution so that it renders well and quickly on a website or in a social medium.
Generally speaking, for online rendering, resolution or dpi should never exceed 240 dpi. Retina-ready images optimally should be prepared at 240 dpi but no larger. A more standard resolution (non-reitina display) is around 72 – 150 dpi. The reason (noted above) why an image at a small dimension might not look good if artificially increased to a higher dimension set has to do with dpi. It is easier again to go from a larger dpi to a smaller one, but it almost never works well in reverse. Thus, even if you have a retina-capable website and your only image is 72 dpi, it is better to leave it at that standard size than attempt to artificially increase the dpi. Although you can prepare a retina rendering in a larger dimension if needed (double the original standard width and height), always leave dpi as is.
General Image Size File Parameters
Slide images / Large Hero Images (images over 1800px) – 1MB and under
Page Toppers / Featured Images (images between 700-1200) 500k-1MB
All other site images – 500K or less
You can determine image size by viewing the size of the image on your computer (under Properties for example) and if in Photoshop when saving the file. If you attempt to upload a file that is too large for the Media Library in WordPress you will get an error message. Review File Size and Security Limits for more information.
Finding Your Image’s “Core”
Each website, when it takes part of an image for a thumbnail or small instance of an image and renders it, often operates on the basis of pre-set marks based on the dimensions of the image. If an image is properly sized in dimension to work with the website, a thumbnail or excerpted part of the image may start at the very top of the image and stop at the center, or it might take the very center of the image and produce a thumbnail square. These settings will depend on how your website is configured and we at Perisphere Media can provide guidance as to how your particular website crops images in these cases.
Knowing this, however, and implementing it practically with images that may be (for example) photographs that are not ideally cropped to begin with is a trial-and-error process at times. General rules of thumb are to ensure that the “core” of your image, or what you most hope to display in all instances, is at or near the center of the image and respects the crop distinctions for how an image is “cut” by the system when it displays in a larger place (a slide for example) and a smaller place (a photo thumbnail).
Such fine distinctions often require the work of someone who is familiar with design programs such as Photoshop. However, sometimes various plugins for WordPress can provide limited assistance in making sure images are sized best for the look you want.
Other Parameters
If you are using a design program like Photoshop, check to make sure the color mode is RGB. If this is set to CMYK, LAB or another color setting, switch to RGB. RGB is best for online use. If your use of this conversion causes a significant hue / color change has occurred contact Perisphere Media so we may further assist you with the conversion.
If an image is too small in dimension or dpi to be used the way you want it to be used, and it is graphic art, it is possible to re-vectorize such art at the resolution you need and a graphic designer can perform this task. This does not readily work with photos.
Image files for the web should generally be either PNG or JPG file formats as these are standard. If you attempt to use a format for an image file in WordPress that is not supported and attempt to upload it to the Media Library you will get an error message. Review File Size and Security Limits for more information.
Graphic Design Programs
Adobe Photoshop and other graphic design programs are very robust platforms for working with image files and can be used to make any of the adjustments noted here. For those without access to Adobe Photoshop, many of these settings can now be found in apps like Canva, Photos for Mac, Google Picasa, Gimp for Linux, Pixelmator, and Adobe Photoshop Express.
