How To Avoid 5 Common Image Optimisation Mistakes on WordPress - PDF document

How To Avoid 5 Common Image Optimisation Mistakes on WordPress Building a WordPress website is not just about the written content. It also involves images, which can take up around 60% or more of a site’s bandwidth . Yo u might think that adding images to your site is as simple as selecting and uploading them – but it’s a bit more complicated. Here, we explain image optimisation, why it’s so important and how to sidestep the most common mistakes people make. “Image opti misation” is the practice of compressing images to reduce website page load times and lessen the burden on network resources, including data usage in the case of mobile. Done right, image optimisation also helps to increase your site’s search engine optimi sation (SEO) rankings, because search engines factor in page load times when ranking websites. By contrast, not optimising images can generate a damaging ripple effect: a website’s load time slows dramatically, which causes the online search engines to “p unish” it by dropping it further down their search results. People who do still find the website may get frustrated by its sluggish loading time and log off early (goodbye, potential customers). Clearly, image optimisation is a must! Let’s look at some of the most common pictorial boo - boo’s and how to fix them. Using the wrong image format Every image on your website including photographs, logotypes and infographics, is a type of image. For the sake of website load time, it’s important to know which format to use when saving these different images to your WordPress media library. Most images fall into one of two categories – raster or vector files. Raster files ( JPEG, PNG, GIF, TIF F, RAW, PSD ) are pixelated; meaning they are composed of thousands of tiny, coloured dots. You must be careful when resizing them, because they are size - dependent. There is only a small size range at which they will have decent resolution. Move too far out of this range and they become blurry. Vector files ( PDF, EPS, SVG, AI ) are composed of flat lines and colour, and are size - independent; they can be as big or small as you wish, without losing resolution. When working with raster images: • For profession al photographs or art works on which you need the best possible resolution, for example if they are meant to be printed out large size, save as TIFF . • TIFFs chew up a lot of bandwidth, so save other photographs or art works as JPEG , for optimal resolution at a smaller file size. • For most other raster images, the even more compact PNG will suffice. You can use this for most stock images, illustrations and other graphics. • Then there are those moving, looped animations, or GIF s – like people post on Twitter. GIFs need to stay as GIFS, in order keep working. • RAW images (literally “raw” images uploaded from a digital device) should be saved as PNG or JPEG before uploading to a website. • PSD is a format to switch over to in Photoshop, when you have existing JPEG site images you want to edit. After editing, convert them back to JPEG. All raster files must also be saved as either of two colour models: CMYK or RGB. Choose CMYK if images are meant for physical print, and RGB if they will only be viewed o nscreen. Image Optimisation when Working with Vector Images: Vector images are usually things like logos, icons, typesetting and digital illustrations. Adobe Illustrator is normally used for creating, designing and editing vectors. You may need to save ima ges as PDF when you send them to a printer – printers often request PDF – or when you need to load big, readable documents to your website, like “how to” guides or product brochures with lots of pages. When you come across single images that are PDFs, conv ert them to PNG with a free online converter. About the only time you’d save as EPS is to send a vector logo to someone via email; you wouldn’t use it for your site images. You are unlikely to work with SVG or AI files but convert to PNG when you can. Up loading huge image files Many people happily select their images and upload them to WordPress, assuming the size they look on the website page will be the size they are. The file size of the image may be much larger; download any stock image to your deskt op, then right - click to “view actual size” and you’ll see what we mean … As a rule of thumb, it’s a good idea to compress images manually before you upload them to your website. There are several free file compression platforms for JPEG, PNG, and other f ile types. Visit our sister blog for more tips on compressing images . As a further safeguard, integrate one of the WordPress image optimisation plugins to your website – see our five best here . These plugins can compress images when you upload them to your site, or compress images already in your WordPress media library. Not Caching images “Caching” is when an internet browser “stores” copies of images in a temporary storage location, or cache, so that they can be accessed by the browser more quickly in the future. Think of visiting a website for the first time: your browser needs to process a lot of file information before it can display the website in full. It only wants to do that job once, so it automatically stores much of the site content in a temporary cache, so that the next time you visit the site – provided it hasn’t been months an d months – the browser only has to pull images and other content from the cache, for a quick and easy load. Browsers cache files until their time to live (TTL) expires. To ensure your website’s images can be easily cached for visitors to your website, in tegrate a WordPress caching plugin – here are Elementor’s top five picks . Not using Lazy Loading “Eager loading” is when a website’s page content loads all at once as so on as you open it. This slows overall site performance and load speed, especially when the page has lots of images – and especially on mobile. By contrast, lazy loading loads only the page content that the website visitor can immediately see onscreen. The rest of the (still hidden) content loads at its leisure or when the visitor scrolls onto it. Loading iteratively, in this manner, makes for a smoother load process. To optimise lazy loading for your WordPress website, we suggest integrating the a3 Lazy Load plugin. You can then choose the settings for Image Lazy Load , Video Lazy Load , and for other page content. It’s intuitive and easy to use and makes even a webpage with hundreds of i mages load briskly. BTW, our popular FooGallery plugin uses lazy loading by default, making it ideal for photographers. Not using a Content Delivery Network (CDN) Ever hear of “latency”? It’s that frustrating pause between your request to load a web page and the moment it loads. Remember, the Internet is not airborne; it’s moved around the world through undersea and underground cables; so, if you’re in London and vi sit an image - heavy website that is locally hosted in Auckland, New Zealand, that website is going to take time to get to you! Unless, of course, there are multiple copies of that website’s images already cached in networked servers around the world, one of which will be near to you. That’s what Content Delivery Networks do. They’re an invisible network behind much of the web. In most cases, you would need to subscribe to a CDN service separately from your website hosting service . Here are WPbeginner’s 7 recommended CDN services . We’ve covered the big picture here, on image optimisation – but if you h ave any other tips for image optimisation on WordPress, please drop them here and we’ll add them in! Thanks for reading and continued success online. See Original Content @ https://fooplugins.com/image - optimisation - mistakes - on - wordpress/