Now, there are areas related to page speed where you need technical developers who can change how the stack loads and optimize your server performance.However, not all issues of page load are complicated or require much technical knowledge.In this case, the issue we are talking about is image weight.Images are often a major issue for sites with slow page load.
Images and page load
Whenever we audit sites for slow page load, images are almost always a significant part of the issue. Those who create websites seem to have forgotten that we need to resize and compress images before uploading and not just leave it to the site CMS or server compression software.Today, we often see pages with megabytes of images on the page.That is megabytes.A page should never be larger than 1 megabyte, let alone several megabytes, yet this is a frequent finding.In fact, many sites even come in at more than 10 MB per page.No web page should ever be that large — and when it is, there is almost always an image optimization issue.
So when did we go awry?
Now that we are in the era of fast connections, sites have become very lax in monitoring page weight, resulting in sites that can be as large as 25 MB per page (true story).The issue is, in some ways, these slow page loads matter even more now than they did back then.Today, we not only have restrictive parameters like mobile, but also, your rankings in Google are affected by slow page load.Because page load was so important in the early days of the internet,companies used to have graphics people dedicated to image optimization.Now, however, most are relying on the CMS (content management system) for image resizing and compression.This means that, in most cases, the image optimization is happening after upload.This process results in overly large and heavy file weights for images, which slows down page speed — and, if extensively implemented across the site, it can result in lower site positioning.
Why can’t you rely on the CMS to resize/compress your images?
When you use a CMS to resize an image, it is usually only changing the image size and not compressing the image, or your server is resizing it “on the fly.”If it is compressing the image (like in WordPress), the rate is preset; this means that even if it does a decent job, your files are still going to average 15 percent to 30 percent larger than if they had been properly compressed before upload.If your CMS is resizing images “on the fly,” meaning that they are resized as they are served, then very little (if any) compression is done.
Preparing images for your site
Resizing the image is very important.If you have a 2400px wide image, and all you need is a 500px wide image on the site, even resizing inside your CMS will require it to compress all the information in the 2400px image.This makes your image far larger to begin with.Now, most teams do not have a person dedicated to image resizing and compression.This means that although we should have multiple optimized image sizes for desktop, tablet and mobile,you might not have the resources to do this.If this is the case, the most important thing to do with any image on a site is to save it in the largest physical size needed, but NO larger.This means if you need three images and 800 x 600 pixels is the largest size needed, then make sure you resize the original image to 800 x 600 in a proper program like Photoshop.
So, first you must resize the image, compress, and then upload. However, not only is a failure to resize and compress before upload an issue, but simply choosing the right file type has become problematic.Many people who handle images on a site these days often do not have image experience, so they will use a JPG when you should use a PNG, and vice versa.There are several file types, with JPG, GIF, PNG and WebP being the most common.Out of these, the ones you are going to use most often are JPG and PNG
What About GIF or WebP?
No one should use a GIF unless animating an image.And while WebP shows great promise in its high-quality, no-loss compression algorithms, right now it is not highly supported, and special programming has to be used to get the it to work with any browser outside the supported browsers like Opera and Chrome.This does not mean you cannot use it, but it does mean you cannot use it without creating the workarounds for unsupported browsers.For most, it is easier to stick with the standard formats of JPG and PNG.
Picking the right file type
Any time you are saving a photo, you want to use JPG; for all else (logos, line art, artworks and so on), you want to use a PNG.When we use the wrong format, we can significantly add weight and size.In addition, line art may not look as clear or crisp using a lossy compression model (where data is lost), like with a JPG.
*JPGs vs. PNGs
The difference is lossy vs. lossless compression.
JPGs use what is called “lossy” compression.This means that some data is permanently lost as the file is compressed.The eye typically does not easily perceive the lost data, so you get a smaller file with minimal degradation.This is reliant on the quality of the saved JPG.The more the quality is reduced, the more data that is lost.If saved at too low a quality, the image can start “ghosting,” meaning that artifacts will appear in the final image.
PNGs use what is called “lossless” compression.Lossless means that as the file is saved, data is not lost.The image is re-sampled and a “nearest neighbor” (similar color) might be used when compiling the data, but data is not removed from the file.There are two types of PNG: one is a 24-bit and one is an 8-bit.When you are trying to reduce file size, you want the 8-bit PNG setting.You also may want to go further and remove colors from your PNG file.
Why not mention SVG?
SVG is a technology where images are encoded into the page.The issues with SVG are that it requires someone with the knowledge to create and implement them, it creates huge blocks of code, it does not handle sophisticated image elements well, and it can be hard to support on older browsers.
If you are using SVG, here are some tips:
*Have someone on staff or contract that can properly create/implement them.
*Ensure that the SVG images are lighter than your saved images (they can be larger).
*Ensure tags are properly implemented so you get the benefits of what would be the “alt” tag in a regular image when needed.
*An example of this would be to call in the SVG file and use an alt tag in the code.<img src=”logo.svg” alt=”Website Logo” />
*If social sharing is important for your images, you will need to supply a traditional image file that can be loaded for social sharing.
*Don’t use SVGs if you have a large or significant portion of users using old browsers. These do not handle SVG well, if at all.
SEO, mobile-first and image weight
According to Google, they will switch to mobile-first indexing, which means they are going to use your mobile site to determine your site positioning.However, at this time we don’t know how they are going to assess desktop users and page speed.Besides, slow sites still create issues for your users, so speeding it up can only benefit you in terms of site stickiness and reduced bounce rates.Remember, page speed matters for your users, and it matters most on mobile.If you are not doing your best to optimize your pages for the fastest download, you are just selling yourself short and losing users, as well aspossibly rankings.
Peter Zmijewski is the founder and CEO at KeywordSpy. His expert knowledge on Internet Marketing practices and techniques has earned him the title “Internet Marketing Guru“ He is also an innovator, investor and entrepreneur widely recognized by the top players in the industry.