Image Optimization for WordPress
There is no arguing that great graphics make great websites. Image optimization for WordPress can be a great way to speed up your site and transform your website from good to great. In this article we’ll talk about different image file types, which ones are best for optimization, and how to optimize your images for WordPress.
There are 2 main categories that images can be sorted under: vector images and raster images. Vector graphics are mathematically created from basic geometrical shapes such as points, lines and curves. Raster graphics are made up of a rectangular grid of pixels. These are the ones that we’ll primarily focus on when optimizing images for WordPress.
Vector images have great image quality so they can be resized up or down without losing anything, they are easily editable, and they have small file sizes. Because of these reasons, they are great for website graphics, background, and logos and for the most part they come already optimized before you even put them on your site. Although vector images sound like they’d be the perfect option for putting images on your WordPress site, they do have some limitations. Currently, there is not enough cross-browser support for vector images. SVG’s (Scalable Vector Graphics) is the native web format but true cross-browser support is not there yet, but we may be seeing that soon which will help everyone out. As of right now, the majority of vector images have to be exported to raster files in order for them to display correctly on web pages. This is where image optimization comes into play.
Raster images are the complete opposite of vector images in that they are compatible with all browsers, but, as you can see from the picture above, need lots of optimization to make them look good on your websites. There are three main raster file types: GIFs, JPEGs, and PNG’s.
GIFs, or Graphics Interchange Format, started off in 1987. They have a small file size, are limited to a 256 color, color palette, and they support transparency. Currently, their main use is for animated GIFs, but primarily have been used as images containing mostly text and flat colors.
JPEGs have been the most commonly used image file type with over 70% of websites using them. They don’t support transparency like GIFs, but they do allow for heavy optimization. JPEGs also allow for a more varied color palette.
PNGs (Portable Network Graphics) allow for heavy optimization, support transparency, and have great image quality. PNGs are in an 8-bit format so they can be a replacement for GIFs because of the small file size. PNGs also come in both 24 and 32-bit formats which can be replacements for JPEGS but the file sizes can be very big.
While vector images are great, you most likely will be working in either GIFs, JPEGs, or PNGs for the foreseeable future. Next, we’ll talk about why it’s so important to optimize your images and some helpful tips and tricks for how to optimize them.
Why is Optimization Important?
The first case for image optimization for WordPress is speed, for both desktops and increasingly more important, mobile devices. With mobile devices, screens are smaller so every image and every pixel counts. If it takes up space on a users mobile device, it needs to have a very strong reason for being there. Currently, images are the main reason why web pages run slowly. The majority of people expect a webpage to load in 2 seconds or less. So, if your images aren’t optimized correctly and your images are too big and taking up too much room, your site will run slowly and this could make your customers frustrated before they’ve even looked at your content. Website speed is also a factor in determining rankings on Google. Another reason for optimizing your images is your conversion rates. Strangeloop shows that as little as a one second delay in page load time can lead to drops in conversion of 7% or more. This means that you could be losing customers and money because your site loads too slowly due to un-optimized images. Now that you’ve heard the case for image optimization, we’ll talk about how to optimize your images for your WordPress website.
The first step is to resize your images. In order to resize your images, you will need a tool to help you. Adobe Photoshop continues to be the standard for resizing images, but can be a costly option. Free options already on most computers such as Paint and Preview can help you resize images. There are also other free options to download like Gimp and there are online-only tools as well such as Pixlr and Fotoflexer. Once you’ve chosen what program you want to work in to resize your images, you’ll want to make a copy of your image. It’s best practice to work on a copy instead of the original just in case anything happens. You will also want to keep the original image’s aspect ratio without introducing optical distortion when resizing. After changing the overall dimensions of your image, you can also crop images. Cropping can help your file size decrease and your images will be more focused on what you want to showcase rather than empty space. When resizing and cropping your images, you will also want to keep in mind that retina displays are becoming more and more prominent. This means that you will need to create 2 versions of your images, one at base pixel size requirement and a 2x version (e.g. 350px x 350px JPEG would also be output at 700px x 700px).
After you have resized and cropped your images, the next step will be to compress your images. Image compression is the process of algorithmically removing image information that the human eye cannot perceive. JPEGs are usually the best file type for image compression but PNGs and GIFs can also benefit from compression, but you may not see as big of a reduction in file size. No matter what file type you use, you want the smallest file size with the highest possible image quality. It is very important to check your images after you’ve compressed them to make sure that you don’t lose quality.
There are many different options out there for image compression. Image compression can be done in Photoshop via the save options. If you’re looking for other offline options, you can check out ImageOptim, Trimage, TinyPNG, and Kraken. There are also plugins such as WP Smush that you can use right on WordPress.
Besides the display properties of images, you also want to focus on optimizing your images for SEO. Two of the most important things you can do to optimize your images for SEO is to use descriptive filenames instead of random letters and numbers and to use alt tags.
Schedule Image Optimization and Conclusion
Now that you’ve gained an understanding of how to optimize your images, your next step will be to get your image optimization for WordPress on a schedule. This can be done by you or someone else that helps with your site. You’ll want to continue to optimize your images in order to keep your site running smoothly, quickly, and efficiently. Overall, image optimization can really help increase your WordPress website’s speed and help your conversion rates, as well.
If you need help with image optimization or other support for WordPress, we have instructors that are ready to help you. Call 512-593-1621 to schedule a consultation today.