The Difference Between Webflow vs Squarespace

Choose The Right Format

If you’ve been dealing with slow pages, choosing the right format is what separates you from having buttery loading times. 

Before tying together your website with appealing, on-brand imagery, make sure you’ve chosen the best file type to go with your needs. The different usable file types are as follows:

• PNG – This format produces higher quality images, but is also very large file size. We wouldn’t recommend using PNG’s as product images. It was created as a lossless, but it can also be lossy. (We’ll get to explaining the difference between lossless and lossy as you scroll ahead). Complex designs, infographics, images with lots of text in them, and logos can ideally be PNGs. PNGs give you beautiful, crisp lines, allowing you to zoom in and not lose any quality. They also support transparent backgrounds, making it ideal for logos.
• JPEG – This popular format uses lossy and lossless optimization. Unlike with PNGs, there’s a good balance between quality and file size. In eCommerce, JPEGs will be your best bet for your product images, especially if there are several. You shouldn’t have to sacrifice image quality and JPEGs provide the best quality for the smallest file size.
• GIF – This format only uses 256 colors. They are of low quality and can only be used for simplistic images, such as icons and decorative images. It’s also the best choice for animated images. It only uses lossless compression. Never use GIFs for large product images. Use GIFs for thumbnails and decorative images only. Or you could get creative and make custom Instagram stickers for promoting your brand on your IG stories.

PRO TIP: Opt for the 24-bit PNGs instead of the “8 bit” since the former offers better quality and a much more versatile array of colors. But be wary of using too many decorative images since too many of them can affect your load times.

Know The Difference Between Lossy & Lossless Optimisation

You must save your visitors from a less than perfect user experience. To do so, one must optimize images to ensure faster load times. Using a plug-in or script, optimizing images is the process of decreasing image file size. The goal here is to speed up the load time of the page. As you’ve read through the last section, Lossy and lossless compression are two methods that were referred to a lot.

Lossy optimization restores the large file to its original form with minor loss of some unnoticeable data, while lossless compression restores the large file to its original form without any loss of data.

Identify Your Images & Make Alt Texts Your Best Friend

While Google can identify text extremely well, it is still a bit iffy in terms of images. So you must make sure your nomenclature is intact and easy to understand. Alternative text, commonly known as alt tags gives search engines a basic idea of what each image is about. However, they are not visible to your average visitor. Alternative text is a big win for website accessibility since it also helps visually impaired visitors navigate your site with audio-based software. And improving your website’s accessibility is a great way to improve your search rankings. Be sure not to stuff it with keywords. Use plain, understandable language with one targeted keyword. So it is imperative to fill in the Alternative Text field when you’ve added an image to your site.

Now, let’s say we are an exciting new gym, coming soon to your neighborhood. We are trying to find images for our website. We downloaded a stock image off Unsplash and it was named “photo-1534438327276-14e5300c3a48.jpg”. Now obviously, this needs to be renamed. We’d rename it to something simple like “choquer_gym_weight_training_1”. Once we upload it to our hypothetical gym’s website, we have to make sure to fill out the alt text, which would be: ‘Choquer Fitness Weight Training’. Given the example, this should help you understand how to rename and alt tag your images efficiently.

Using SVGs Can Make The Biggest Difference

Another good method would involve the use of SVGs, or ‘scalable vector formats’, with the other images you have on your site. SVG works great for logos, icons, text, and simple images. Here’s why:

• SVGs are known to be super scalable on browsers as well as photo editing tools.
• You can actually see the difference in quality on a small SVG against a bulkier PNG and JPEG equivalent in terms of gradients. The SVG’s gradient is extremely smooth, while banding can be seen on JPEG & PNG’s. (BEWARE: SVG’s don’t work with Illustrator gradient meshes)
• Google indexes SVGs, the same way it does PNGs and JPGs, so you don’t have to worry about SEO.
• SVGs can be your trump card since they are traditionally (not always) smaller in file size than PNGs or JPGs. This can result in faster load times.

Make Sure To Optimize Your Thumbnails

Every good eCommerce site will use well-optimized thumbnail images, especially on home and category pages. The goal is to quickly showcase products without taking up too much space and cluttering your webpage. Thumbnails are great, but can sometimes backfire if not optimized well. In turn, your page load speeds end up taking a hit. If they prevent your home and category pages from loading quickly, you could lose a potential lead. So make your thumbnail file sizes as small as possible. Remember that the collective impact of your thumbnails will have a noticeable impact on your page’s load time.

PRO TIP: Chance your alt attribute text and ensure not to duplicate text that you would use for the larger variants of the same image. In fact, make sure your alt texts are very different for each size of the same image.

Summary & Quick Pointers

• Rename images so that it makes more sense to you. No keyword stuffing. No fluff.
• Use GIFs if you need animated imagery.
• Shrink down decorative images as much as you can. For borders or simple shapes, make them PNG-8 or GIFs.
• If all fails and you can’t seem to compress a JPEG more than what you already have, try SVGs.
• Focus on image dimensions instead of its quality. So don’t worry about Dots Per Inch (DPi) or Pixels Per Inch (PPi) since they only affect an image's print quality, but not how it’s displayed on the web.

No product is for everyone even when they’re free. Surfing the web, you may notice there is an abundance of ways to build a website. Some services you pay professionals for, like a web design agency, other services offer complimentary web hosting.  No matter what phase you’re in with your company’s website, whether you’re just starting out or even thinking about migrating some content from a free website builder to another platform, discussing these pitfalls of free website builders will inform you of the caveats of these enticing platforms.

Are Free Website Builders Too Good to be True?

When something is free, a common instinct is to think: what’s wrong with it?

The same goes for free website builders. Like all products, these platforms are not for everyone. For example, if you’re a student needing a mockup website for a project or a hobbyist that doesn’t intend to grow their business, then they may be fine.

Consider that free website builders start as complementary, but when other features are desired, they quickly become more expensive. Do you need to post high-definition website images or videos? Do you want to have your own custom domain name without the web builder tool mentioned? Do you want to perform secure booking and credit card transactions on your website? Do you want to rank high on Google? If any answer is yes,  or eventually yes, then it’s worth paying for a professionally built website. In the end, these platforms run a business too, and they want you to eventually pay for them. It’s imperative to keep that in mind when signing up for these services. 

Discussed here are numerous pitfalls of free website builders that will affect long-term aspects of your website. 

Slower Shared Servers 

You understand that a slower server means slower speed, but how does this affect your website otherwise? There might not be an immediate concern on the surface, but there are some key issues with shared servers that come with reduced bandwidth. 

Users are Accustomed to Fast Information

In our modern era, most people have become accustomed to fast loading speeds. Slow web pages on free website builders are proven to drive people away, as load times have a direct relationship to bounce rates. Did you know that at least 32% of users bounce if your load time is 7 seconds or more? Research suggests people expect load times to be below 3 seconds and that upwards of 40% will click away if it takes longer. These numbers directly hinder your sales, subscriptions and any type of call to action on your website.

If any of these terms were confusing to you, check out our blog post outlining common SEO terms.

Negatively Affects Search Engine Optimization (SEO)

Laggy load times also hinder your ability to rank on Google and other search engines. Google uses web crawlers to identify, index and rank your site. Slow pages are assorted at the bottom of Google’s stack, which means your pages might never get identified.

From an even more technical standpoint, SEO coding on free website builders can be unfriendly to Google. Some builders don’t allow you to update or change image alt text, meta descriptions, or even headers to pages. If you’re unable to make these critical changes, your site will remain in the dark for future customers. Various web builders feature plugins and widgets to help SEO, but these often can make the site run even slower, further punishing your Google rankings.

Security Vulnerabilities

Do you have sensitive information collected on your website? Another problem with shared servers is they can leave your website open to breaches and hackers. A shared server hosts other websites as well as yours. Your website is at risk even if one of them is hacked on the server. Ensuring you have a private server will negate this problem. 

Lack of Website Freedom & Expansion

It’s difficult to expand a website if it’s not directly owned. Sometimes, the website’s code belongs to the free website builder. If you’re ever interested in making additional functionalities to your website, you’re often limited to their tools and systems. It’s possible to migrate a website off their platform, but it can be difficult and time-consuming. Sometimes the site may need to be rebuilt from scratch when migrating to a private server, costing you additional resources. 

If you didn’t pay for your domain, you're likely using an unprofessional domain name. When your website says ‘yourbusiness.webbuildername.com’, it can be viewed negatively by visitors and future customers. It’s often an easy fix to pay for and change your domain, but keep in mind that it isn’t free. 

Free Website Builder Support is Limited

Customer support is usually provided with free website builders but it’s likely stretched thin. Let’s suppose your site goes down at a crucial sales period. Your customers are perplexed, impatient and going to competitor sites while your own team is struggling to reach someone who can help. You or a member on your team in this scenario would be on hold for a support agent - assuming you can even phone them - or on email and chat diagnosing the issue. 

This pain point can easily be avoided by having a professional web design agency build your site, like Choquer Creative. Let us know if you’re leaning towards asking us for help on continually building, designing, and developing your company’s website.