Images are important elements on a website as they help to bring your services and products to life, capture user’s attention, break up the text for a better user experience and even aid in SEO (search engine optimization). They bring a lot of great perks to your website, but if they are not optimized, they can slow down the page loading time because of their large file size. What happens when a webpage takes too long to load?… Site visitors bounce. If you have an e-commerce website, slow page load time can make users feel like the site is not secure for purchases. If visitors aren’t sticking around to wait for your website to load, then you are missing out on sales and conversions.
Image optimization is the process of decreasing or compressing the size of an image’s file by removing data from the file. There are two types of compression methods to choose from when optimizing an image: lossy and lossless compression. Lossy compression will delete some of the file data resulting in a smaller file but a lower quality image; this process cannot be reversed. Lossless compression, will only compress useless data such as meta data added by the device used to take the photo, resulting in only a slight reduction in the file size. The file size will be larger with lossless compression than with lossy but, the image quality is reserved.
Image optimization is the process of decreasing or compressing the size of an image’s file by removing data from the file.
The best file types for images on the web are PNG, JPG or GIF.
JPG – (Joint Photographic Experts Group (JPEG) uses lossy compression but you do have the option of selecting the level of quality of output. JPG format has a smaller file size because it uses less data and are best used online with photos and large scale images. These file types (lossy) do not retain image data but rather deletes it, so you cannot scale the image up without losing quality after you have saved it. If you choose to save as a JPG, make sure you keep a copy of the original and save the a version for your website in the exact sized needed with a level of compression that offers the best quality.
PNG – (Portable Network Graphic) uses lossless compression. The PNG image format outputs a higher-quality, and sharper image with a larger file size because of the amount of color data it holds. PNGs also give you the option of an image with a transparent background and they give a sharper image display on mobile devices than other formats. These file types are best used online for images requiring a transparent background, illustrations and icons with few colors, and logos.
GIF – (Graphics Interchange Format) uses lossless compression. The GIF format compresses an image file immensely compared to the JPG and PNG formats, meaning the file sizes are much smaller. The GIF format allows for transparent images as well as short web animations. Though GIFs can output high-resolution images, they are limited to the use of only 256 colors. Since photos typically use thousands of colors, saving one in the GIF format would leave your pictures looking flat and dull. This file format is best used for web animations and small, simple web graphics and icons.
Whichever file type you choose, find a good balance between the file size and compression rate where you get good quality and a smaller file.
The best way to optimize your images for your website, is to optimize them before you place them online. This is done by saving them using one of the formats previously listed and selecting the highest compression rate that gives you the best quality. If your photos are already posted on your website, there are tools that you can use to compress your image files. Here are some paid and free options:
Photoshop https://www.adobe.com/products/photoshop.html
Optimizilla – https://imagecompressor.com/
Kraken.io https://kraken.io/web-interface
Imagify https://imagify.io/optimizer/
Tiny PNG – https://tinypng.com/
WP-Optimize https://getwpo.com/ (Worpress plug-in)
Hummingbird https://wordpress.org/plugins/hummingbird-performance/ (Worpress plug-in)
Optimizing your website images may seem like a daunting task, but it is well worth it to boost the loading time on your website. Images make up a large portion of a webpage’s size and the larger the image files, the longer it will take for your webpages to load. If you find the best combination between file format and compression type, you can reduce the file size and boost your loading time without sacrificing the quality of your photos.
Stephanie
Log into your portal to submit payment for your upcoming / ongoing project.
Subscribe to my newsletter for exclusive promotions and tips and tricks to help you grow your business and reach your goals.
943-239-9480
stephanie@smaysdesigns.com
PO Box 1793 Conyers , GA 30012
Monday – Friday
9:00 AM – 5:00 PM
