Always use Photoshop’s “Save for Web & Devices” option
Adobe Photoshop is by far the most popular raster graphics editor and is used by most web designers and website owners. Amongst many other features, Photoshop offers an efficient image optimizer for images that are intended to be used online.
While most web people I know are working with Photoshop, I am always shocked to find that so few are actually using the Save for Web function. This very handy tool allows you to save a web-optimized copy of any image, ensuring a sufficient quality while drastically reducing the size of the image.
To optimize your images for online use with Adobe Photoshop, simply open your image and navigate to File → Save for Web & Devices. Choose the desired image format and save your image. Simple yet efficient way to make your website load faster and save on bandwidth.
Save bandwidth by preventing hotlinking
Hotlinking is the practice of illegally using and displaying an image on your own site, hosted on another site. The big problem is that when a website displays your images on their website, they are using your bandwidth. Therefore, you are paying bandwidth for their site.
It goes without saying that hotlinking should be disabled in order for you to save bandwidth and reduce its related costs. They are several ways to do so.
Using Apache
On an Apache server, you can use the code below to disable hotlinking and replace hotlinked images by an image of your choice. Make sure that you update the domain on line 3 and the URL on line 7 before using it.
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yoursite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|svg)$ http://yoursite.com/hotlink.jpg [NC,R,L]
Using Nginx
On a Nginx server, hotlinking can be easily disabled by using the code below in your config file. Make sure to update the domain name on line 2 before you proceed.
location ~ .(gif|png|jpeg|jpg|svg)$ {
valid_referers none blocked ~.google. ~.bing. ~.yahoo yoursite.com *.yoursite.com;
if ($invalid_referer) {
return 403;
}
}
If you would like more information about how to protect your website against hotlinking, the fine folks at Kinsta have recently published a very interesting article on the subject.
Implement local caching of images
Images, unlike text, are rarely updated once they are displayed on your website. For this reason, it’s absolutely unnecessary that your visitors’ browser downloads the same images each time they visit your site.
What needs to be done is simply to tell the browsers that it doesn’t need to re-download images each time they visit your site and can use the local cache copies instead. To do so, we need to add the following snippet into your site’s .htaccess file:
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch>
The above code tells the browser that if a file is one of the aforementioned types (CSS, JPG, JPEG, PNG, GIF, JS or ICO), it should be cached for one month (2592000 seconds).
Implementing this solution known as leverage browser caching will make your website faster to load and will reduce the amount of bandwidth used by your site.
Using WordPress? Install the WP Smush plugin
If you are using WordPress, I definitely recommend using the WP Smush plugin. This very handy plugin optimizes every image uploaded via the WordPress media uploader, allowing you to display lighter images without compromising their quality.
WP Smush also allows you to bulk process images that you have uploaded previously, which is an amazing way to save on bandwidth and make your site faster without having to spend hours manually replacing every image featured on your site.
WP Smush is also available as a premium plugin, featuring more options and advanced compression. I unfortunately haven’t had the chance to try it.
Don’t use images for things you can achieve using CSS
There was a time where using image assets for things like background images, buttons or containers was common. It was justified since the CSS technology wasn’t at the time as complex and powerful as it is nowadays.
Unfortunately, many people still rely on images assets for things that can be easily doable using CSS, such as gradients, for example.