Forem: Barbara Sawala

Best image CDN providers comparison

Barbara Sawala — Mon, 12 Feb 2024 09:35:35 +0000

Are you looking for an Image CDN service provider? Well, you probably came across Cloudinary, Cloudflare, Imagekit, Imgix, and Sirv. Erm...but how about Uploadcare? ;)

The choice might be overwhelming, but forget about the tables full of features. Even the best feature might be useless when it requires you to spend hours implementing it.

In this article, I will give you a bunch of reasons to integrate with Uploadcare. However, I’ll not only focus on our outstanding customer service. You’ll get to know a bit more about companies that claim to speed up the delivery of your web content.

I had a chance to speak to lots of people looking for a fast and reliable CDN solution and here’s what they’re looking for:

Take your time to grow. Start for free

According to Ahrefs data (as of Feb 12th, 2024), over 1.7K people search for the “best CDN” term monthly. Let’s face it: there’s also a group of devs looking for the “best free CDN”. Saving is ultimately the first step to investing, we get that.

Below, I compared several free plans from the most famous CDN providers:

Even if you’re OK with a complex setup (which is the case for some of the companies, e.g. Google Cloud CDN), you probably want your product to last.

If you need a CDN for longer than half a year, Uploadcare’s free plan gives you the freest bandwidth. With our PRO plan, as well as a polished generous free plan, we are way ahead of our competitors.

What’s the catch? Usually, companies don’t change file-handling providers over time. Grow with us, scale up, pay — it’s that simple.

Become the most reliable person in the room

Toby Marsden from the Shopify UploadKit plugin said:

If something bad happens with uploads, it’s never Uploadcare.

That’s something, isn't it? However, by the end of the day, no review/magician from customer service can fool you when the product doesn’t do the job.

You’re 'hiring' to get a job done and there are several KPIs people usually take into account when looking for a CDN provider.

I googled and researched the best-performing articles on how to pick the best CDN provider. It’s not a surprise that you want your product to:

Be fast
Have a large network
Be secure
Solve problems

Here’s the table with some basic metrics for Uploadcare and its competitors:

The more edge locations the faster the delivery. Add the World’s best server uptime and top-rated customer support and you have all the ingredients for fast and reliable content delivery.

Build in a team

Of all Uploadcare's testimonials, there’s one thing that surely stands out. Everyone loves a fast and supportive Customer Support team! ⭐⭐⭐⭐⭐ Uploadcare's CS answers questions over calls, email, on Stack Overflow, and sometimes even on Twitter!

Responses are always personal, relevant, and timely. All the requests are answered within 24 hours, and it’s always free, even if you need help with integration.

5 more reasons to choose Uploadcare

Take advantage of the fastest image resize algo

It’s our innovative algorithm that utilizes AI and it powers our on-the-fly image processing. Our image resize algorithm (for x86 processors) is the fastest in the world! Alex, our engineer, and the creator, made it open source and it’s called Pillow-SIMD. It was forked from Pillow (initially PIL) lib but soon it became the biggest toad in the puddle.

We resize images on Intel processors faster than Intel does!

Choose the tech stack that fits your project, not the other way round

We’re integrated with all major programming stacks:

4 File Uploader wrappers
8 API clients to choose from (for Upload and REST APIs)
Mobile software developments kits that support both iOS (Swift) and Android
Next.js and Webpack for image processing and proxy pattern implementation Check our integrations page for more info.

Get rid of stress with foolproof storage

A few times, we helped to restore tons of accidentally deleted data. Our infrastructure is bulletproof, it is backed up with tests, figures, and real-life situations we’ve encountered while working on it for over 10 years.

Save with the highest AI compression

How to make your image-heavy website load faster? We offer the maximum possible image compression with no visible quality loss.

We’re building a tool that compares Uploadcare’s image compression with our competitors. As an example, here is a picture that our colleague Renata took in 2021 when she was climbing Elbrus:

The file was originally 1.8 MB, and below is a table showing the results of its compression by us and some of our competitors.

The highest compression means lower bandwidth usage. In other words, we compress, and you save. In this case, a figure is worth a thousand words, so we trust the numbers to speak for us.

Your files are safe

We’re safe. We’re GDPR and HIPAA-compliant. Safety is the core of all our actions. With us, any project you create is secure.

Control who can upload files and when they can do that. Control who can request files and when. Validate the source before accepting requests with our secure webhooks. They sign each webhook payload with a custom secret determined by you.

You set the rules, we execute them.

8 tips for SEO image optimization

Barbara Sawala — Fri, 26 Jan 2024 11:53:19 +0000

Not only do your website visitors appreciate images, but you can also use them for SEO. If SEO image optimization is done properly, you can get more high-quality traffic and a higher rank in search results.

Google has been factoring page speed into its desktop search rankings since 2010, and began to do the same for mobile searches with its so-called Speed Update in 2018. Images make up a large share of page weight, and if they're unoptimized and thus slow to load, they can hurt your chances of attracting organic traffic to your website.

Another important factor that affects the search rankings is the bounce rate, which measures the percentage of visitors who leave a site after viewing one page. The bounce rate is intimately connected with page speed. If a site loads slowly, more users will abandon it, increasing the bounce rate. If there are a lot of such users, Google’s algorithm will decide that the page isn’t useful and will thus demote its position in the search results.

Largest Contentful Paint (LCP)

As for directly measuring the actual speed of a webpage, one of the metrics you need to pay attention to is called Largest Contentful Paint (LCP). This metric measures the time to render the largest and most visible content item on the screen, which is a pretty good proxy for measuring when a site visitor considers the site to be more or less loaded.

Here are the criteria for LCP:

0-2 sec – green zone, fast loading
2-4 sec – orange zone, middle level
more than 4 seconds – red zone, slow loading

To ensure search engines favor your website, aim to keep your site in the green zone and avoid the red zone. Here's a simple SEO optimization guide for your images:

Choose the correct image format

Balancing quality and size is crucial when selecting a file type for your images. Small, poor-quality images can deter potential customers, while high-quality, high-resolution images can slow down your site significantly.

The most commonly used formats are JPEG, PNG, and GIF, supported by all browsers. However, emerging formats like SVG, WebP, AVIF, and even JPEG XL are worth considering for their advanced features and improved compression.

Here are some suggestions:
WebP, a modern image format from Google, offers both lossy and lossless compression, balancing quality and size efficiently. It has full browser support, making compatibility concerns no longer an issue.

JPEG remains the go-to format for online marketplaces and large photographs, thanks to its favorable size-to-quality ratio.

PNG is ideal for images requiring transparency, such as logos or images with multiple layers. It can sometimes provide better file sizes than JPEG, especially for smaller images or graphics with limited color palettes.

For vector images like logos and icons, SVG is highly recommended. These are extremely data-efficient because they’re just a series of numbers that tell computers how to create geometrical shapes. Thus, SVG files are scalable and can be manipulated with CSS or JavaScript without quality loss, making them often a good choice for web use.

AVIF, the AV1 Image File Format, represents the forefront of image compression technology, offering superior compression without compromising on quality. While it is supported by the majority of modern browsers, ensuring fallbacks for unsupported browsers is crucial.

Embracing Dynamic Web Technologies

What happens if you already have a huge library of images in an unadvisable format?

The landscape of web technologies, especially image formats and compression techniques, is constantly evolving. You can spend some time researching and manually converting each image, or use a purpose-built service. For example, the Adaptive Delivery pipeline from Uploadcare can deliver each image to the end user’s device in the appropriate format automatically.

Staying informed about developments like AI-based compression, responsive image techniques, and the use of CDNs can significantly enhance your website's performance and SEO.

Resize images appropriately

For marketplaces where dozens of product images are shown on one page, the optimal SEO image size is 70 KB or less. Illustrations in articles or other sections of sites (besides the product catalog) can be larger, but it’s still better to try saving as many bytes as possible.

You can use two methods simultaneously:

Optimize the file size of images.
Optimize the way images are presented by using thumbnails.

How to decrease the file size of images

Images should be compressed without visible loss of quality; each picture should remain clear and sharp. An image’s file size can be reduced when exporting a picture in Photoshop (File > Export > Save for Web), simply by lowering the quality.

Here are your options:

Select WebP format.
Slightly reduce the quality (down to 60-80%).
Resize the image dimensions

Or, if you want an automated solution, feel free to explore Uploadcare’s compression capabilities.

Increase page load speed with thumbnails

Your visitors may not be interested in a full-size view of all the images on the page, so you can use thumbnail previews for the default display. They can always view an image in full size by clicking on the thumbnail.

It’s especially important to optimize the size of images for viewing on mobile devices. The amount of mobile traffic already exceeds desktop worldwide, and search engines, first of all, check if the site is optimized for mobile. Data-heavy pictures lead to low site loading speed on mobile phones. This can negatively affect the ranking of the page in the mobile SERP.

It may take you quite a while to resize every picture but remember, it’s necessary because every extra second of page load time costs you traffic. Again, if you want to speed up the process, you can use Uploadcare, which can do all the dirty work automatically.

Set up lazy loading

Lazy loading is a method of saving bandwidth and increasing load times by waiting until a user scrolls close to an image before loading it.

Lazy loading helps if:

There are many large images on the page;
Pictures make up the bulk of the content, for example, if you have a lot of product images, photo stocks, or articles with a lot of illustrations;
You’d like to improve your PageSpeed Score;
There are many visitors from mobile devices (e.g., more than 50%).

You can manually configure lazy loading by using the loading attribute or get a special solution to enable lazy loading for you. To learn more, please check out our guide on the lazy loading technique in the Uploadcare blog.

Use adaptive images

Adaptability is not a luxury, but a necessity. Images should be correctly displayed on any device: from smartphones to high-resolution retina displays. To do this, the picture size should correspond to the resolution of the device from which the user views it.

For example, let’s say you place a photo on your site with a resolution of 800x400 pixels:

One user accesses the site from a smartphone, and the photo looks nice.
Another user is using an iMac with a retina display. On such a display, the picture will be displayed with a significant loss of quality. To solve this problem, you need to create several versions of the image for screens with different resolutions. As always, there is more than one approach to handle this.

You can ask your designer to manually create several versions of each image on your website or, if you prefer automated solutions, try using Adaptive Delivery instead. The system will analyze the user context and serve the pictures according to the screen size on the fly.

File names are important

To produce a relevant image in response to a user’s request, search engines use all available text elements.

Google and Bing's robots are very attentive to the name of the uploaded file. The name should match the content of the image. If the photo shows a chocolate cake, then it’s worth replacing the set of letters and numbers automatically generated by the camera with a descriptive name:

Wrong: DSC4567.jpg

Right: chocolate_cake_with_cream.jpg

Rename all your image files before uploading them. If possible, use a keyword in the name. The name should be small and simple and contain at least one keyword that describes the content of the image.

Photo optimization for marketplaces

If you insert a huge number of pictures on your marketplace, you can try this method also.

Let's say you sell Nike men's sneakers. Instead of the automatically generated photo name, make an extended file name with a keyword.

Identify how users search for items on your site. What words do they type when searching? People who are looking for Nike Air Max sneakers can type a search query in many different ways:

Nike air max men's sneakers
men's air max Nike sneakers
men's Nike air max
Nike air max
etc. See which patterns prevail (just check it in the analytics) and find the best image SEO keywords. Then use them as a basis when creating titles for pictures. If you have someone else who handles that side of the business, it’s a good idea to write down some guidelines so they can take care of it themselves.

Don’t forget to optimize 'title' and 'alt' tags

Search engines recommend always filling in the title and alt tags. This is especially important for pages whose content consists mostly of images. The title tag gives additional information about the graphic content. It’s necessary to add an alternative image caption because:

If the picture doesn’t load, the browser will show a caption and the viewer will at least understand what should’ve been there;
It’s useful for ranking. Use keywords in attributes. This will help search robots to offer a better response to a user request for an image search;
The text is accessible to screen readers for visitors with visual impairments;
An alternative description can be an anchor for an internal link if the image is a link to another page of the site.

Here are several simple rules for alt tags:

Add an alt tag for each picture (especially for product photos).
It’s better if the caption is short, and written in simple language.
If you have serial numbers for the items, use them in the alt tags.
Use keywords that describe the image in alt.

Add illustrative captions to images

A caption is a text that describes an image and is written under it. Image captions have a good effect on optimizing SEO. The text adjacent to the picture plays a significant role. This text is used by robots to search for images.

Here’s what can be mentioned in a caption:

A description of the image, especially if it’s incomprehensible at first glance or the explanation is important for the text;
Additional useful information;
A keyword.

Use a CDN

The user's distance from your web server affects the response time. Hosting your content across multiple, geographically dispersed servers makes your pages load faster for everyone.

A Content Delivery Network (CDN) is a collection of web servers distributed in various locations to deliver content to users more efficiently. The choice of a server for delivering content to a specific user is usually based on the criterion of network proximity. For example, the system selects the server with the fewest number of "jumps," or the server with the fastest response time.

CDNs reduce the geographical distance between the user and the content, thereby reducing download time. If you’d like to learn more about using a CDN, feel free to also read this guide: 7 Reasons to Use a CDN for Your Images.

Conclusion

Proper SEO image optimization isn’t exactly a complex matter; however, it may require a significant amount of work: you need to register alt and title for all files, change file formats, check the size of the files, set up lazy loading, and fill in the URL correctly — all this takes time if you do it on your own. But it’s worth it since your efforts will be rewarded by better organic traffic flow.

Best practices for managing user-generated content

Barbara Sawala — Fri, 05 Jan 2024 17:21:36 +0000

If you see branded content that doesn’t come from a brand itself, it’s probably user-generated content or UGC. UGC is any type of content — from comments to pictures with purchased items and videos with reviews — this content is typically shared on social networks, websites, or forums. It is not produced by the brand itself but by its users or customers.

In this article, I'm not going to focus on how to encourage users to create such content. It is about user-generated content management. I’ll tell you how to upload, moderate, host, and deliver such content so that it doesn’t harm your customer experience or web performance.

Why is UGC important?

Fact: over 99.9% of online shoppers report checking reviews during their shopping experience once in a while. In 2018 this was “just” 97%. UGC works as social proof and helps businesses build trustful relationships with their audience

Whatever form UGC takes, it usually works much better than traditional advertising. Here’s why: It’s authentic. 90% of consumers say authenticity is important when deciding which brands they like and support, and, according to them, user-generated content is way more authentic than brand-created content.

As of March 2023, 43 percent of surveyed U.S. adults said they regularly read online reviews of local businesses, and 34 percent said they always did. If the user sees that your product has solved similar problems for another party, they’ll trust you much more than after viewing your landing page.

Hey, I’m experiencing the same problem!

It helps you make sales. The same research shows that 79% of people say UGC highly influences their purchasing decisions.

On top of that, such content doesn’t require lots of time or money investments from the brand. Usually, it’s created organically; you just need to gently push your audience in the right direction by creating a user-friendly flow on your website.

Whether your site consists of content that users create, or you just plan to add a comment section to your blog, keep reading to discover the best practices of managing UGC right.

Wait, is UGC management a big deal?

When you post content to your website, you have complete control over it. You can post it just the way you need it — in a suitable resolution, compliant with your brand book, optimized for search engines, and so on.

When you open up your website to user-generated content, you lose this control. And if you don’t adjust everything right, your website can turn into a mess, becoming a go-to place for scammy link builders.

UGC Challenges

Here are the most common challenges you can encounter after allowing user-generated content:

Some users can post irrelevant or offensive content.
Bots can spam your website.
Users can upload files that are too large or in the wrong formats, which can harm your website’s load speed.
Users can post images of different sizes and styles, leading to a lack of consistency throughout the website.
The content published by users won’t be properly optimized for search engines, harming overall website performance.
Users can publish NSFW content

Now let’s take a closer look at each of these challenges and describe some of the most common user-generated content management mechanics:

Have a content policy
Provide an easy way to upload and edit visuals
Make sure the uploaded content is optimized
Take care of content moderation
Filter malicious content
Don’t forget about SEO
Organize your storage
Provide privacy
Ensure a proper security level

Have a content policy

So, you’ve decided to open up your website to user-generated content — for example, product testimonials or comments on blog posts. The first thing you need to do is create a UGC content policy.

This page can include:

Types of content that aren’t allowed like: spam, malware, irrelevant links, offensive content, and private information.
Your guidelines for photos and videos. Examples: The image resolution should be 640 x 480 pixels minimum; do not publish pictures or videos in which people are identifiable without their permission.
Rules for communicating with other users. Eg. no hateful or offensive comments; do not reveal someone’s personal information.

A UGC policy will help users understand what you expect from the content they post. Plus, it will act as your guide for all questionable matters during content moderation. To create this page, you might need to consult with lawyers. Here, I found an article with examples of what you should consider when drafting T&C for a website or an app that has user-generated content.

Provide an easy way to upload and edit visuals

If you want to allow your users to post images and videos to your site, you need to provide them with an easy way to upload and edit them.

For example, if your users need to upload a profile photo, it would be nice if the uploader on your website allowed users to crop images to a square in a few clicks. Remember: It’s in your best interest to have your users create content for you, so make sure that the uploading and editing process is easy and smooth.

The fastest and easiest way to solve this issue is to integrate a ready-made file uploader. Uploadcare File Uploader is a good choice because it provides a built-in image editor with lots of possible image transformations. Besides cropping, users can resize, rotate, adjust quality, blur some areas, or even add a watermark to a photo.

Smart, object-oriented cropping

An easy-to-use file uploader will help you get more user-generated content: when users can smoothly upload and edit their visuals, they’ll more likely hit the “publish” button.

Another useful Uploadcare feature I want to recommend is the smart crop. Let’s say you let your users write product testimonials and back them up with product photos.

It will happen that some photos taken by users will include an irrelevant background that distracts from what’s important. With smart crop, you can teach your system to analyze images, detect the most important object in each photo, and crop the rest automatically.

Make sure the uploaded content is optimized

Another problem is that users don’t usually bother about the size and format of the files they upload. That’s why sometimes they can, for example, add too large images or use outdated image formats. And if your site contains a lot of unoptimized images, its load speed and overall performance will suffer killing your sales on the way.

Even if you’ve specified the maximum file size and required formats, some users probably won’t pay attention to it, and some don’t even know how to crop images.

The good news is, that your users don’t have to know how to do it and you can still enjoy a perfectly optimized website. With Uploadcare, you can shrink all images uploaded by the users automatically. Just tick the checkbox in the settings.

It also lets you automatically convert all the uploaded photos to WebP/AVIF format — the best format for publishing photos on the web, and automatically convert GIF files to video format, which is also better for SEO. It will optimize all the pictures and videos independently to each end user's screen. How cool is that?

Take care of content moderation

Sooner or later, you’ll have to deal with spammy content posted by bots. Thus, any website owner who accepts UGC needs to take care of content moderation.

For this, you can either hire content moderators or you can monitor it yourself. It depends on the amount of UGC you receive and the time you can commit to your blog/forum etc.

It is important to review your user-generated content regularly. If we’re talking about a large marketplace that receives a lot of UGC every day, it’s best to automate the process. How?

Use a CAPTCHA on content submission to fight back against bots. One of the most popular systems you can try is Google’s reCAPTCHA.
Allow your users to help you with moderation by adding a "Report a violation" link to user-generated content.
Validate the types of files you want to accept.
Apply various checks after (e.g., virus checking).
Alternatively, you can also use Uploadcare’s object and face recognition tool to automate your moderation process. This tool helps you define a general class of objects in a photo: it can detect a car, a person, a vegetable, or any other object you need.

The latter three are possible to do with Uploadcare. You can set up a project to only upload certain types of files, detect infected or malicious files, detect everything that’s not a desired object for your website, and prevent people from adding such photos to your site.

Ensure a proper security level

When you open up your website to UGC, there’s always a risk of malware, unauthorized server access, attacks on users’ data, hosting of illegal files, and so on. Here are the best practices for file upload security that will help prevent vulnerabilities:

Restrict uploading of certain file types. For example, set up your uploader so that it doesn’t accept executable files (.exe, .bat, .app, etc.). These file types are capable of executing commands and running malicious code.
Set a maximum file size and limit the number of uploads. This will help you prevent a potential service outage if someone decides to bring your site down by flooding it with large files.
Store files outside the webroot. This will prevent you from having security problems as well as data losses during migrations.
Set up SSL encryption. This will secure data passed between the web server and browser.
Ensure compliance. The upload form should be compliant with the GDPR, EU-US Privacy Shield, and other regulatory standards recommended for your niche and country.

Uploadcare provides all these features out of the box, as well as some advanced security features like HIPAA compliance, data encryption, access control, and backups.

Don’t forget about SEO

If you allow users to post content on your site, you need to make sure that your website automatically puts the right HTML tags and uses the correct markup.

Why is this important? See, the main goal of search engine robots is to make sure that the information on a website corresponds to a user’s search query. To find out if your content is relevant and adds value to the user, search bots need to understand what your page is about. Keywords and tags are what help bots understand your content better and show it to users who need it.

A high-performing website is also valuable to streamline your backlink efforts with partner brands since the more valuable your content is, the more eager they would be to provide backlinks.

That’s why you need to use the right HTML tags throughout the entire website: metadata, headings, subheadings, etc. Find the full list of recommendations for HTML here: HTML Living Standard.

Another thing you can do to help search engine bots better understand the context of your page is to provide structured data. Structured data is a standardized format for classifying the page content. For example, if there are reviews on your page, you can use a review schema to structure the content.

Here’s what it’ll look like:
<div itemprop="review" itemscope itemtype="https://schema.org/Review"> <span itemprop="name">Value purchase</span> - by <span itemprop="author">Lucas</span>, <meta itemprop="datePublished" content="2011-03-25">March 25, 2011 <div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating"> <meta itemprop="worstRating" content = "1"/> <span itemprop="ratingValue">4</span>/ <span itemprop="bestRating">5</span>stars </div> <span itemprop="reviewBody">Great microwave for the price. It is small and fits in my apartment.</span> </div>
By adding this markup, you not only give search bots more context but also allow them to showcase this information via Rich Snippets. If you provide structured data, ratings and other info can appear in the SERPs. All the schemas for structured data are gathered on Schema.org.

Organize your storage

One more factor you need to take care of is where you’re going to host all the content that users upload to your site. Saving user’s files on the same server where all your important website files are stored isn’t a good idea. If some malicious software slips through, it can bring your entire website down.

The most optimal way to host UGC is to use separate cloud storage, and Uploadcare can provide you with it. Plus, the Object Recognition feature can not only detect what’s in the picture but it will also assign labels to each photo, helping you organize your assets, sort them out into folders, and quickly let you find the content afterward.

Have a privacy policy and align with it

Say a user wants to share a photo of a meal in your restaurant. But here’s the thing: in the background of the photo, some people accidentally happened to be in the frame. Does this mean the user can’t publish the photo, and you lose a great piece of UGC?

That’s right: you can’t publish a photo if there are people in it who didn’t give their permission. What you can do is simply blur their faces. You can allow users to blur areas in the photo manually, or you can adjust your system to do it automatically in certain cases. With Uploadcare, it won’t take you longer than a few minutes.

Wrapping up

Sounds like a lot of work, right? Well, it is a lot of work if you do it manually or build a solution from scratch: from an uploading solution to a moderation system. But if you decide to integrate a media handling tool, you’ll be able to get most of those preparations done by the end of the day.

Uploadcare has everything you need to upload, moderate, deliver, and store UGC. If you want to make sure it’s the solution you’re looking for, you can give it a spin using the free plan, or you can schedule a demo and our expert will show you around.