Como optimizar imágenes para un CMS
Images are a vital part of grabbing a visitor’s attention, breaking up long pieces of content, and helping your content be shared across the web. Unfortunately, images also increase the size of your pages.
Every image that you add to a page has to be downloaded by visitors from your server to their computer. This increases page loading times, which can frustrate visitors and have an adverse effect on search engine rankings.
Too many images will also increase your bandwidth significantly and use up more storage on your server. This is unlikely to be a problem at the start of your website’s life, however it could increase your hosting costs over time.
In this article, I would like to show you how you can optimize your images for your website.
Graphic applications allow you to save images in a number of different file formats. The most commonly used file formats online are JPEG and PNG. JPEGS are better suited for photographs as they contain many colors. The format uses compression in order to reduce file size. PNGs are more suited to screenshots and website design images such as icons and buttons. It uses lossless compression techniques so quality is higher, however this also means larger file sizes.
Optimizing your images will reduce file size, but it will also effect the quality of the image.
The other format that you will see used frequently on the internet is GIF. GIFs are better suited for low quality images with just a few colors. Today, the GIF format is widely known on the internet as being the file format for animated files.
Optimizing Your Images Before Uploading To Your Website
A CMS has a useful thumbnail feature that will automatically create three different sizes of any image you upload. This can be found in the CMS admin area under settings/media.
You can adjust the thumbnail sizes are you see fit. For example, you can configure your CMS to create a 150×150 pixel thumbnail image, a 300×200 pixel medium image and a 600×600 pixel large image.
If you uploaded an image that was 1,000 pixels in width, you could display the large image in your article and link to the full size image. This is exactly what many bloggers do, however it is not the optimal way of handling images. Whilst the file size of thumbnail images will be smaller as a CMS reduces the size of the uploaded image, the CMS does not compress images when it creates thumbnails. A more efficient method is to optimize images before you upload it them to your website.
Most graphical editing applications allow you to reduce the quality of an image for the internet. In Photoshop, this option is called “Save for Web and Devices”.
Most graphic editing applications have an option to save images for the internet.
Photoshop allows you to choose the file type of the image and the quality of the image. The bottom left hand side of the interface also details what the image file size will be if you save the image using a particular setting.
Photoshop allows you to choose the exact level of optimization.
Comparative optimization options are available in other graphic editing applications, such as GIMP. If your graphical editor does not have an optimization option, I recommend checking out one of the following applications:
- ImageOptim (MAC)
- PNGGauntlet (Windows)
- Trimage (Linux)
All of the above applications are free to download. There are many premium applications available online too though I do not see any major benefits to using them over their free alternatives.
One of the best features of Radical Image Optimization Tool is the ability to compare the image you are optimizing with the original image.
Optimizing Your Images After Uploading To Your Website
There are many plugins available that can optimize your images after you have uploaded them to your website. I believe that it is better to optimize images before you upload them, however I do understand why many website owners optimize images after uploading as it can save time.
One of the most well known optimization plugins for a CMS is Yahoo’s WP Smush.it. Utilizing the Smush.it API, the plugin allows you to strip meta data from JPEGs (date, time, camera etc.), optimize JPEG compression, convert GIF files to PNG and remove unused images.
Smush.it can optimize all of your images at once.
If you have not optimized your images in the past, Smush.it is a quick and effective way of reducing the file size of all of your uploaded images. Be warned that the plugin can be a CPU hog when it is optimizing images. It is therefore best to run the application when your website traffic is low e.g. overnight.
Alternatives to WP Smush.it include EWWW Image Optimizer, CW Image Optimizer,Imsanity and Hammy. Many CMS users prefer using these plugins as they do not rely on an external server to process your images.
The importance of optimizing your images should not be underestimated. Optimizing your images will reduce your website’s page loading times, reduce bandwidth and improve the browsing experience for visitors. Your search engine ranking should also improve due to your pages loading quicker.
Please remember that whilst compressing an image will reduce file size, quality can also be notably reduced if you compress an image too much. It is therefore important to get the balance between image quality and image file size right.
For those of you who place a big priority on image quality (e.g. photographers), I recommend trying out Lazy Load. Once the plugin is activated, your images will only be displayed to visitors when the images are visible in their browser. This greatly reduces the initial size of web pages as images will only load when the user scrolls down the page.
If you would like to know more about optimizing your CMS, I encourage you to read my recent article “Optimize Your CMS Website Using These Simple Tips“. In the article I cover a lot of important topics such as reducing post revisions, enabling caching and utilizing a content delivery network.