Processing images for use in your site
It's common to have image resources that start off as the wrong aspect ratio or size for what your intended usage. So, the question is "how do I edit my source images to meet the destination needs?" Let's figure it out!
-
Identifying the output dimensions
Using placeholder images in the site mock-up helps you to determine how large the final optimized image needs to be. In this case, our images need to be 200px by 200px for these boxes and 960x100 for the header background image.
-
Resource and Process the Asset
Whether you are using one of your own resources or one that you've found on a stock site, you'll need to start with it in your Source folder, take it through an editor and output it as the correct dimensions, file type and file size.
-
Add the Asset to your Site via HTML or CSS
Is this asset for foreground or background use? Consider the impact of the asset and then apply it appropriately. For HTML, you'll use the image tag and for CSS you'll apply it as a background-image in the suitable element.