[02] Optimizing Your Images

hey there it's ash from elementor in this lesson we're going to explore the importance of optimizing your images when building a website it's a good idea to try and keep your page size to one megabyte or less one of the biggest factors which can affect this is the images that you use on your website a website without images is a rare thing and rightly so images can transform a website into a piece of art provide a better user experience and in general really bring a website to life however with the use of images comes more elements for your website to load this doesn't mean that you shouldn't use them quite the opposite with some simple planning and optimizations using images on your website can have very little impact on your website's loading times before we look into how to optimize images let's first take a look at the common image types used on websites first of all we have raster format images these include jpegs gifs and pngs raster images are made up of pixels and each pixel is assigned a color if we were to expand our raster image beyond its original size it would become pixelated or blurry jpegs are one of the most widely used formats and are best used for photographs and large web images jpegs can easily be compressed making them ideal for many website projects next we have gifs or gifs however you like to pronounce it this image format is useful when you need to create a web animation which has a very small file size and our last common raster image is the png pngs have built-in transparency and can also support 16 million colours making them the perfect choice for usage on websites the next common image type we'll cover is svg svg stands for scalable vector graphics and is an xml based vector image format this incredibly versatile image type is very useful as it can scale up to any size whilst maintaining its original quality and will also keep the same file size common use cases for this are logos icons and computer generated graphics the first image type we're going to optimize is a jpeg as you can see on our website we have several photographs being used which are all jpegs in our hero area we have a very large jpeg which is set into the background of our section whilst this image is beautifully crisp and clear it hasn't been optimized and is therefore loading a much larger version of this image than what is required now let's do some testing to see just how long this image takes to load we're using chrome and we'll open the chrome developer tools by using option command j on mac or shift ctrl j on windows switch to the network tab and then select image to perform the test we must now refresh the page before we do this though let's make sure that we have disabled cache selected as we do not want our browser to save any previous data as you can see our hero image has taken 6.23 seconds to load bear in mind that google recommends your entire page should load in less than three seconds so this isn't a good start and it's only one element of many which need to load we can also see that the file size is 3.4 megabytes which is far too large for an image on a web page and if we click onto the waterfall stat we can view in detail a little more information about our image and how the entire load time was calculated whilst there are other ways to optimize images already uploaded to a website mainly with a third party plugin which we'll cover later on the best option for any website creator is to optimize their images before they've uploaded them to their website this will give you more control over the sizing and quality of your image ensuring it is right for your project we'll start off in photoshop which is a premium image editing tool from adobe photoshop is a great program to have in your toolkit as not only does it allow you to resize images it will also compress them for you whilst maintaining the quality of the image launch photoshop and open your image now whilst there are a few ways to optimize and export images from photoshop the following steps provide a foolproof way to optimize your jpegs navigate to file export export as and you should now see the export as screen as you can see our current image is showing as 2753 by 1856 pixels and a file size of 3.1 megabytes it seems by simply importing our image into photoshop we've shaved off 300 kilobytes which is at least a start next select the two-up option so that we can have a side-by-side comparison of our optimized and original image our optimized image will show on the left hand side so let's make sure that we have that one selected we can use the plus and minus icons to zoom in on the image to really test the difference in the top right hand corner the first option we have is format here we can switch the image type if required we'll leave this as jpeg as it's the best option for a photo next we have quality here we can adjust the quality of the image to reduce the file size down photoshop does a great job at maintaining a very high image quality so don't be afraid to experiment with the lower settings as you can see we can move this all the way down to 40 without much reduction in image quality if we now check our image file size you can see that it has reduced from 3.1 megabytes to a rather impressive 548 kilobytes we encourage you to experiment with the quality setting as depending on the image sometimes you can reduce the file size down even further with a minimal loss in image quality the next step here before we export our image is to alter the image size at the moment it is 2753 pixels wide when in fact the largest we need this image to be for our website is 2000 pixels wide under the image size settings enter 2000 pixels in the width field and the height will automatically update now when we view the file size we can see that it has been further reduced to an impressive 310 kilobytes that's a really great result and we're now ready to export our image and upload it to our website click the export button and save the optimized image to your computer as previously mentioned there are numerous ways to optimize and export images in photoshop another popular method is to use the save as option before we do this let's first resize our image by going to image image size and amending the field shown here we'll set ours to 2000 pixels wide which will also automatically update the height and then we'll select ok when finished now if we go to file save as we can save and optimize our photo for use on our website first of all choose a location to save your image to add an image file name then select save you will now see the jpeg options screen here we can adjust several settings for the image ensure preview is selected so that you can witness the changes in real time and keep an eye on the image size when you're making the changes there is a drop down which provides some preset options and you can also amend this manually under format options ensure progressive is selected as this will further help with optimal loading times as it displays a lower resolution image whilst the page is loading once you've finished with your adjustments save your image and it's now ready to be uploaded to your website a great free alternative to photoshop is a website called photop photop has many similar features and most importantly we can optimize and export jpeg images let's open our image first of all and then head to file export as jpeg unfortunately we're not presented with the same side-by-side comparison that photoshop offers but we can see a live view of our image which will update when we adjust the configuration as you can see photo p automatically applies 70 to the quality field which has produced a great result and we're now seeing an image size of 552 kilobytes just to remind you our original image was 3.4 megabytes very much like with photoshop we encourage you to experiment with the quality settings as depending on your image you will see vastly different results and it's a case of individually fine-tuning your image for the best image quality and file size it's also worth noting that the quality slider isn't exactly the same as the one we saw in the photoshop example reducing this down to 40 like we did in photoshop blurs our image a little too much so we'll leave it at 70 percent now if we resize our image to 2000 pixels wide we can see the file size is even further reduced to 285 kilobytes let's save this image and head back to our website back in the elementor editor we're now going to replace our image with our newly optimized image from photoshop and then rerun the test that we performed earlier let's select the section and switch to the style tab click onto the background image and replace it in the media library upload your new image and give it an old description and then insert it into your page now let's update our page and head back to our live website where we have chrome developer tools already open we need to perform a refresh but let's just double check we're clearing any browser cache by holding shift and refresh as you can see our newly optimized hero image is showing some much better results we've gone from an image size of 3.4 megabytes to 270 kilobytes and a loading time of 6.23 seconds to 656 milliseconds this is a great improvement and if we continue to work through all of the images on our website we will be able to dramatically improve the performance next we'll take a look at optimizing the png images used on our website if we scroll down you can see that we have these company logos whilst these logos look great if we take a closer look you can see that these png images are very large and are roughly 25 to 50 kilobytes in size each we can certainly reduce these numbers to help with our page load time the first step is to resize our png images they are currently around 2000 pixels wide yet the website is only displaying them at a maximum of 300 pixels wide for this we'll open up photoshop again import our png and then resize it using the export as option with the export window open ensure the format is set to png and the transparency option is checked now adjust the width to 300 pixels and as you can see we've just reduced our png from 19.9 kilobytes to 3.4 kilobytes that's a great start for our png optimization but we can still do better let's save our newly resized png and head over to tiny png tiny png is a free tool which compresses pngs whilst maintaining quality for faster loading times on the tiny png website we'll simply drop our png onto the upload button and let tinypng work its magic instantly we can see our newly optimized file has been reduced by 56 we've gone from a file size of 3.4 kilobytes to 1.5 kilobytes if we now download and view our two png files side by side you can see that tiny png has done a fantastic job and there is virtually no difference between the two versions we'll now repeat the process for our other images and once finished we'll upload these optimized pngs to our logo carousel to replace the unoptimized versions the next image type we'll take a look at is the svg svg stands for scalable vector graphic and is a very useful image type which works in a different way to jpegs and pngs jpegs and pngs are raster images meaning they are made up of pixels and if oversized can become pixelated or blurry an svg image is an xml based vector format image this basically means it can scale to any size without losing any of its quality they're not suitable for all image types though and are best used for logos icons and computer generated graphics they also maintain a very small file size which is great when looking at the performance of a website please note that to be able to upload svgs in elementor you must first enable this within the elementor settings simply navigate to elementor settings advanced and then enable unfiltered file uploads going back to our optimized web page which we improved in lesson one we can see two occasions where we used svgs to improve the performance of the site the first was the logo previously this was made up of two widgets an image and a title by combining the two into an svg we were able to display a much clearer scalable and faster loading logo we used adobe illustrator to create and export our logo but you can use any vector-based software to achieve the same result here you can see our logo file which we've recreated in vector format to save this as an svg file simply head to file export export as and then choose a location and amend the file name if required select export and now we are presented with some additional options the default illustrator options shown here work great ensure the minify option is selected as this will further reduce the file size by ensuring the generated svg code has minimal ids indents lines and white spaces select ok when done and your svg is now ready for your website the second example saw us convert a four column layout where each column contained an image title and text editor widget into an identical layout using the icon box widget the great thing about the icon box widget is that you can upload an svg icon further improving our loading times we're using a free tool here called inkscape as you can see we've redrawn our icon images into vector graphics we can now export these svgs and upload them to our icon box widget which will provide not only faster loading times but also cleaner crisper images in inkscape head to file save as choose a location amend the file name if required and then choose optimized svg from the drop down inkscape does a great job with its default settings but feel free to experiment here for more customized results the new icons are now saved and we can upload these to our icon box widgets to further optimize our website in the final chapter of our image optimization lesson we're going to take a look at a third-party image optimization plugin as previously mentioned it's best to optimize your images before you upload them to your website however there may be an occasion where you are working on a website which already has images uploaded and these may not have been optimized this is where a third-party plugin can be useful rather than downloading optimizing and then re-uploading the images used on the website we can use an image optimization tool to optimize the images already on the website the plugin which we're going to use is called smush which is a highly rated free image optimization plugin from wpmu dev smush will automatically compress your images to achieve smaller file sizes whilst maintaining great image quality and with smaller file sizes come faster loading times let's first install the plugin and explore what it can do for us head to plugins add new and search for smush select install now and then activate the plugin once the plugin has been activated you will now see a new menu item called smush hover your mouse over and let's head to the dashboard as you can see smush has a setup wizard which helps with the configuration of the plugin select begin setup to get started the first option allows you to apply the automatic compression option a very handy feature which will automatically apply your compression settings to any new images you add to the website in future next we have the option to strip exif metadata from your photos often this data is not needed and if this is relevant for you then enable this option to help with reducing the file size of your images smush also has a built-in lazy load feature which can be applied to the images on your pages and posts lazy loading will stop off-screen images loading until they come into view this really helps with speeding up your website's loading times finally we'll select finish setup wizard to complete the initial setup smush will now run a scan of your images to gather some data on the images which need to be compressed as you can see we have 49 images which need to be compressed before we compress these however let's just double check our configuration scroll down to the settings area and the first option we see is for our image sizes as stated here wordpress generates multiple image thumbnails for every image uploaded to your website if you do not wish for a particular size to be compressed you can select it here in the custom tab we can also amend any of the configurations we made during the setup wizard and finally we can amend the image resizing settings we'll select this option and change the width to 2000 pixels as this is the widest our images need to be on our website when done select update settings and now it's time to compress our images select the bulk smash now button and wait for the plugin to get to work please note that you need to keep this window open for the compressions to successfully work once finished you should see an alert telling you that all of your images have been smushed at the top of the page you can see the file size reduction which has been made on our website we managed to save 1.4 megabytes in space over all of our images to further inspect the exact size reduction of our images let's head over to the media library if we select our hero image you will now see a new option underneath the file url called smush we can see that this image and its thumbnails have been reduced by 13.1 kilobytes which is a reduction of nearly three percent we also have the option to view more information about each thumbnail version of the image by selecting the view stats link using an image optimization plugin on your website is crucial for unoptimized images but can also help shave off a few more kilobytes for images which have already been optimized in a tool like photoshop be sure to experiment with the available tools to find the perfect configuration for you ensuring your images are fully optimized for performance is quite likely one of the biggest improvements you can make to your website faster loading images will have a large impact on your website's performance and will also improve the user experience in our next lesson we're going to explore additional performance boosts we can apply to our website to further enhance your website's performance you

Channel: Elementor

Views: 31,957

Keywords:

Id: 8BqHUx6Zex4

Length: 22min 0sec (1320 seconds)

Published: Sun Apr 25 2021