Become a web image master
Become a web image master
Has your boss ever given you the thankless job of uploading images to the company website, or perhaps you have a blog and need to prepare images for your latest post - those who have done this are all to aware that there is more to it than just uploading the images.
For something that should be so simple problems can arise from a number of unexpected avenues from incorrect aspect ratios, incompatible file types through to the ultimate sin of bloated or incorrectly sized images slowing down the website. This task is tedious, repetitive, prone to error all things that Laazy excels at.
In this post we are going to teach you how to create a Pipeline so you can just drag and drop images and have them perfectly formatted every time.
Start at the start
When processing an image, the first thing to do is make sure it’s cropped and sized correctly so you are showing exactly what you want to within the constraints of where it will be placed, if you will be outputting multiple images, create a split first and start with the biggest first.
When sizing an image it is essentially performing three distinct things.
Applying an aspect ratio
The Aspect Ratio is the ratio of the width to the height, it essentially describes the shape of the image, there are a number of standard ratios such as 4:3 think photos or old TVs, 16:9 think computer monitors or modern TV’s but that doesn’t mean your software developer or designer has stuck to these when creating the website.
The aspect ratio should always match the required ratio of where the image is being published.
Deciding what parts to lose
When an aspect ratio is changed on an image then you must select at least a portion to discard, Laazy has a number of methods from selecting a ‘focal point’ of an image (the most important thing in the image), manual select or predefined to always crop in a certain direction. Depending on your use case will define the method that is most suitable for you.
Resizing for placement
Now that your image is the correct shape and cropped just right it needs to be resized fit the size of the placement where it is to be uploaded, too small and it will look blurry or stretched, too big and you’ll be wasting pixels and slowing down your website for no benefit to the user.
The easiest way to do this is to resize along one dimension (width or height), because you have already set the Aspect Ratio the other dimension will be calculated automatically.
Saving the file
Next step (and for some the final step) is to save the file before uploading it to your website.
This bit is easy and only has two essential considerations format and compression, but there are also a number of non-essential considerations depending on your requirements.
First is to select the appropriate file format, some formats are more efficient with file size for certain types of images than others. We discuss what ones do what in our post Size Matters. If you don’t really know (or don’t want to) then you are usually safe sticking to JPG for photography or PNG for graphics.
After you have selected an image format you want to get rid of any excessive data that isn’t required to display the image, surprisingly a lot of data in an image file is just bloat and not required for simply displaying it. This can simply be completed by including a compress action in your pipeline, no configuration necessary.
Additional post processing steps you may want to look into could include;
- Redacting data from the image file such as GPS or names
- Configuring folders or filenames, this can be important when producing multiple images in a single pipeline.
- Zipping the files, again only useful when generating a number of files at once.
Split and repeat
Sometimes (a lot of times in fact) you need to produce multiple versions of the same image for displaying in different locations such as listing pages, thumbnails or previews. This can easily be done using the Split action. This action splits a pipeline into multiple channels that each have their own configuration. Add a split action at the top of the pipeline (or after the select focal point since this rarely changes) then repeat the steps above for each of the images that need to be output.
note: Adding a filename action can help in identifying the images once they have been generated.
And that’s you are now a web imagery master!