AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Pagespeed insights optimize images12/21/2023 I get it – it’s a hassle to go over every image on your site and try to understand the real size that your website is displaying. While it certainly is awesome that Elementor lets us do that, the problem is – it costs our users extra load time. I advise to have images of under 300 kb file size – that’s the absolute maximum I recommend for full resolution images in places like full-width backgrounds etc.īefore our page optimization, many of our images were resized in CSS, meaning that they were bigger, e.g., 960×960 px in real life, but scaled down by simply tweaking the Elementor image width to 183. I know it feels like the right thing to do – you want your images to be really good quality, right? However, there are ways to preserve the quality, while ensuring the file size is low. Basically anything around 1 MB or over, is way too big for websites. Some sources say you can upload full resolution images up to 1 MB, but I strongly advise you not to. Don’t worry – I’ll show you how to do that. Simply find them in your PC, or library, or click on the link in the list and download it again to optimize them properly. There you’ll find all the files that are deemed too big. Use the GTmetrix and click on the “Optimize images” item in your report recommendations. STEP 1: IDENTIFY WHICH IMAGES ARE TOO BIG IN FILE SIZE THE FULL ACTION PLAN: HOW TO REDUCE IMAGE SIZE TO IMPROVE YOUR PAGE LOADING SPEED But what to do when you have already uploaded huge images on your site that are making your page load slower? Proceed to read the full action plan. Taking note of these things ensures from the very beginning that your page will load faster. We’re using this tool all the time, and we’ve found it works even better than Photoshop. png images greatly reducing the file size. Upload the resized images to TinyPNG– a free web tool that optimizes. – Optimize the images to a reduced file size Or you can use a free web tool for resizing pixels like LunaPic. Follow the instructions in this helpful guideto learn how to do that. Resize your images using a photo editing software like Adobe Photoshop or Lightroom, OR resize in your built-in image editing programs, like, Microsoft Paint or Mac OS Preview app. – Resize the images in your computer or web apps After you’ve finished the webpage design, use a Chrome extension like the Image Size Info extension to assess what is the actual pixel size in the place where the image is put in your page, and then resize the images on your computer or web apps to meet these actual dimensions. 1080 x 1920 px, and then upload it in Media Library, and then resize it in Elementor by changing the padding or by tweaking the “Width” function. You probably take an image of whatever dimensions, e.g. – Upload images that are true to their pixel size in the intended spaces You’ll see the actual file size of the image in your PC library or in your WordPress Media Library where you’ve uploaded the image. Upload images that are 300 kb of file size or less ( way less (!!) for smaller images in your page – follow the action plan below). – Don’t upload images that are too big in file size The following points will ensure you upload optimized, size-reduced and still pixel-perfect images to your site, which will let you dramatically increase your page loading speed. These are some key things to always take in mind whenever you upload new images to your site.
0 Comments
Read More
Leave a Reply. |