Both digital and print marketing are alive and well; it’s safe to say content marketing is at its pinnacle. At HIPB2B, we’ve mentioned before how significant visuals are in a content strategy.
“When people hear information, they’re likely to remember only 10% of that information three days later. However, if a relevant image is paired with that same information, people retained 65% of the information three days later.”
Of course, something so successful doesn’t come easy or simply. With the variety of platforms to utilize visuals on — such as web, email, social, and print — image optimization is crucial. The benefits of optimizing your images include:
- Improves page load speed
- Improves SEO ranking
- Uses less bandwidth
- Requires less storage space on your server
- Color and sharpening accuracy
- All of which improves user experience
File Formats
The 3 most common file formats available for images include:
JPEG
- The most commonly used file format due to its small size
- Image quality of JPEGs is lower than PNGs but also has the reduced file size
- Uses both lossy and lossless compression
- Traditionally used for saving photos
PNG
- Image quality is high which creates a larger file size
- Uses lossless compression
- Used when a transparent background is needed (something JPEG can’t offer)
- Traditionally used for saving logos and graphics
GIF
- Small file size
- Uses lossless compression
- Used for displaying animation
- Only uses 256 colors
Image Compression and Resizing
Studies show that up to 40% of visitors click the back button if a site takes longer than three seconds to load. This is why your visuals need to be ready to go from the second a visitor lands on your site. Image compression and resizing are essential for this. However, this is where it can get tricky. You don’t want to overdo it with the compression and resizing as this can affect image quality.
Resizing images for the web can be the difference between a snails-pace page load and lightning fast page load. Especially with photos, the file size of many images before resizing and compression are HUGE. Imagine you upload this photo directly from your camera. This photo is 49MB and 4157 x 4157 pixels.
There’s a very, very good chance you don’t need a photo this large on your website. A general suggested dimension size for a header image would be something like 1600 x 800 pixels. That’s a third smaller than the original file dimensions.
When it comes to resizing images, there’s an important difference between actually resizing and just shrinking it using HTML/CSS. Instead of defining the height and width attributes in your HTML code, resize it before it’s sent to the browser by the server. This reduces the amount of time it takes to load your page, as well as saves disk space and bandwidth.
When it comes to optimizing images, nothing reduces file size more than lossy image compression. Lossy compression eliminates some of the data of the image. The file size can be reduced by a large amount. Lossless compression compresses the data of the image. It doesn’t reduce the quality but requires the images to be uncompressed before they can be rendered.
Did you know that there are tools that can take your “optimized” image from Photoshop/other editing tools, compress it by another 40%, and still have it appear nearly identical to the uncompressed image?
- Adobe Photoshop — Photoshop is the be-all-end-all of all photo software. You can resize, compress, change color profiles, resolution.
- TinyPNG — “Optimizes your PNG images by 50–80% while preserving full transparency.”
- io — “Optimizes your images with blazing speed using powerful API and online web interface.”
- ImageOptim — “Makes images load faster. Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality.”
- JPEGmini — “Significantly reduces the size of photographs without affecting their perceptual quality.”
Optimizing your images for print requires a bit more finesse. To get the most out of your prints, you’ll need to:
- Convert your color profile from RBG (red/green/blue) to CMYK (cyan/magenta/yellow/black). RGB is optimized for screen display, whereas CMYK produces all colors for print.
- Adjust the resolution accordingly. 300 DPI (dots per inch) is suggested for printed images.
- Optimize your file type to TIFF or PSD. It’s important that when printing images, you retain as much data as possible, and that not too much gets compressed. These create massive file sizes, but you can save a separate JPEG version to upload online.
Other Best Practices
- Use alt tags and optimize image file names; this provides a description of the image in case it happens to fail upon loading and search engines can find it.
- Optimize your thumbnails. Make your thumbnail sizes as small as possible and assure you to apply a proper alt tag.
- Optimize for mobile. Images can be optimized for mobile by using responsive images. This way you give the list of variants to the browser of a particular image suitable for various screen sizes.
Conclusion
Once you’ve optimized your images for better performance, your site will be ranked more favorably by search engines, browsers, and networks, and will load faster for overall improved user experience. Get into the right image habits now and you’ll reap the benefits across your entire website.
Originally published at https://www.hipb2b.com on June 4, 2019.
