The Only Library You Need for React / Next.js Image Optimization and File Uploading

Summary

Highlights

• Understanding the pivotal role of media in web performance and user experience. 🌟
• Exploring ImageKit, a robust solution for media delivery and optimization. 🤖
• Real-time transformations and compression features for diverse use cases. 🔄
• Implementing lazy loading to improve page speed and user interaction. 📈
• Leveraging ImageKit’s free tier and myriad features to optimize projects efficiently. 💡

Key Takeaways

• Optimizing media is as crucial as optimizing JavaScript and CSS! 🎯
• ImageKit is a game-changer for media management in React/Next.js. 🚀
• Real-time media transformation with ImageKit makes optimization seamless. 🛠️
• Lazy loading and placeholders enhance user experience significantly. 🌍
• ImageKit offers easy integration with popular frameworks and a free tier to get started. 📚

Overview

Chapters

• 00:00 - 00:30: Introduction to Web Development Optimization In this chapter, the focus is on web development optimization, specifically targeting media such as images and videos. These elements significantly impact user experience and website performance. The speaker notes that while many developers concentrate on optimizing JavaScript and CSS, often reducing their sizes substantially, media optimization remains a challenging yet crucial area.
• 00:30 - 01:00: Focusing on Media Optimization The chapter titled 'Focusing on Media Optimization' discusses the common misconception among developers and website owners regarding website speed. Many assume that slow server response times and high load times indicated by tools like Google’s PageSpeed Insights are the predominant issues. However, the focus might be misplaced if the server is not inherently slow or the application design isn't flawed. Optimizing media, rather than just focusing on server speed, might be more impactful.
• 01:00 - 01:30: Examples of Performance in Big Websites In this chapter, the focus is on analyzing the performance of major websites. The author begins by examining x.com, noting slow server response times and a performance rating of 50%. The chapter continues with analysis of other popular sites, mentioning that YouTube has a performance rating of 40% and Reddit 52%. This highlights the prevalent performance issues even among prominent websites.
• 01:30 - 02:00: User Expectations vs. Performance Analysis The chapter 'User Expectations vs. Performance Analysis' discusses the performance scores of popular websites like Yahoo (55), Udemy (47), and React's official site (63% for its mobile version). Despite varied scores, these websites share a common strength in media optimization. The chapter encourages the reader to consider website performance from a regular user's perspective, using IKEA's website as an example, rather than from a developer's perspective.
• 03:00 - 03:30: Optimization Challenges with Dynamic Content The chapter discusses the perception and reality of website performance from a user's perspective versus a technical analysis. It highlights a scenario where a user experiences acceptable loading times for images and videos, making them content with the site's performance. However, upon technical inspection using developer tools like the console, issues such as poor performance metrics might be revealed. The chapter uses Pexels.com as an example to illustrate these optimization challenges with dynamic content.
• 03:30 - 04:00: HTML Tags and Resizing Issues The chapter discusses the balance between website loading speed and content delivery, emphasizing that while the initial load might not be the swiftest, images are visible almost immediately after loading. It highlights the over-reliance of some web developers on analyzers, stressing the importance of proper code splitting, efficient data fetching, and deployment on reliable servers. Moreover, it advises focusing on optimizing images and videos to enhance performance.
• 04:00 - 04:30: Using Next.js for Image Optimization The chapter discusses the challenges of image optimization in dynamic websites where content changes frequently and users can upload various images and videos. It highlights typical optimization issues faced with standard HTML image and video tags and suggests solutions using Next.js for effective image management.
• 04:30 - 05:00: The Limitation of Next.js and CDN Usage The chapter discusses the limitations faced when using Next.js in conjunction with a Content Delivery Network (CDN). It highlights a specific issue where resizing an image or video frame does not reduce the actual file size. Despite attempts to adjust dimensions via width and height, the content size remains unchanged, demonstrating a significant challenge in managing large file sizes effectively.
• 05:00 - 05:30: Introduction to ImageKit The chapter introduces ImageKit and discusses the challenges of creating different versions of images and videos for various screen sizes, especially when dealing with dynamic content or numerous images. It suggests that for those using Next.js, a built-in solution can be utilized by replacing the traditional image tag with the Next.js Image component and specifying the width and height.
• 05:30 - 06:30: ImageKit Features The chapter discusses the features of the ImageKit component, focusing on its ability to resize media according to specified dimensions, resulting in smaller file sizes. However, a challenge noted is that all images are served directly from the server, including external ones that get stored there as well. It suggests that for a large number of images, using a Content Delivery Network (CDN) would be more efficient, but requires writing a custom loader to display those images.
• 06:30 - 07:30: Using ImageKit with Next.js This chapter discusses using ImageKit with Next.js, focusing on overcoming limitations in video solutions and React applications. ImageKit is introduced as a comprehensive media delivery and management platform, not limited to media storage. It supports image and video uploads and offers a user-friendly free tier for new projects, providing real-time image optimization for website integration.
• 09:30 - 11:00: Image Manipulation Techniques In the chapter 'Image Manipulation Techniques', the focus is on modifying images through techniques such as compression adjustment, instant transformations by altering image URLs, cropping, applying shapes, and effects, as well as adding text. These manipulations enable showing low-quality images for slow networks and altering appearances without changing the underlying image file.
• 12:30 - 15:00: Lazy Loading and User Experience The chapter discusses the concept of lazy loading and its impact on user experience. It highlights the importance of using lazy loading placeholders to enhance user experience. The text also touches upon the ability to protect images from unauthorized requests and the advantage of integrating various cloud storage options, such as AWS or Google Cloud, with ImageKit to access and utilize advanced features for stored images.
• 15:00 - 16:30: Video Optimization with ImageKit In this chapter, the focus is on optimizing videos using ImageKit with Next.js. It begins by guiding the reader to consult the documentation for integration with various languages and frameworks, specifically choosing Next.js for demonstration. It outlines the initial setup, which includes installing the 'imagekitio-next' library via npm. Then, it explains how to access your public and private keys from the ImageKit dashboard and securely store them in the .env file located in the root folder of your project.
• 16:30 - 18:00: Uploading Images using ImageKit This chapter discusses the process of uploading images using ImageKit. Initially, the speaker shows the dashboard that includes default examples and mentions the option to upload files directly on the dashboard. The focus then shifts to uploading images in applications using ImageKit. The speaker also briefly shows the developer options, highlighting the ImageKitId that appears on image URLs.
• 18:00 - 19:30: Custom Upload Component and UX Enhancements The chapter begins with an instruction to copy and paste some keys, a preparatory step in the process of setting up the necessary configuration for displaying images within a project.
• 19:30 - 21:00: Conclusion The Conclusion chapter discusses the specifics of using external images in a Next.js application. It highlights the initial restriction of Next.js on external image usage and provides a solution by writing the URL endpoint. It mentions that the details are similar to using the Next.js Image component, with the main difference being the use of a path instead of a source. Finally, it suggests the direct usage of the developed component in the application.

The Only Library You Need for React / Next.js Image Optimization and File Uploading Transcription

• 00:00 - 00:30 Hi friends, today I’m gonna talk  about one of the most challenging   parts of web development when it comes  to optimization and user experience. And this part is media. Images and videos on our websites play  a crucial role in overall performance, But, I think many developers tend to focus more on   optimizing their JavaScript and  CSS assets than on their media. They mostly focus on reducing Javascript  bundle sizes from 120 kilobytes
• 00:30 - 01:00 to 100 or decreasing server response  times from 600 milliseconds to 500.   But that might not be the most important problem. They open their consoles,  see this tiny turtle icon,   or analyze their websites on  Google’s PaseSpeed Insights,   and immediately think that their website  is too slow, or their code is terrible. I’m not saying it’s not important, but if  you are not using a slow server or your   application is terribly designed,  you probably don’t need to worry.
• 01:00 - 01:30 Let me give you some examples  from some of the biggest websites. Let’s visit x.com. There are some slow server response  times. And if you analyze the website,   you’ll see that the performance is 50%.  Youtube is 40%, Reddit is 52%,
• 01:30 - 02:00 Yahoo is 55, Udemy 47,  Even the mobile version of  React’s official website is 63%. But, there is one thing all  these websites have in common. They all do a great job with media optimization. Let’s think of it from a  regular user's perspective;   forget that you are a developer and  imagine you want to visit IKEA’s website.
• 02:00 - 02:30 And it wasn’t super fast, but I can see  all the images and videos immediately. So, as a regular user, if I can  see the content fast enough,   I mean in a couple of seconds,  I don’t expect anything else. But if you open the console  or analyze the website, you   will see that the performance is not good at all. Or let’s visit Pexels.com.
• 02:30 - 03:00 It’s not the fastest opening website but  it’s good enough. And after the loading,   I can see all the images almost instantly. So, what I’m saying is that some of the web  developers often rely too much on these analyzers. If you split your code, fetch data properly, and  deploy your application to a reliable server,   try to focus on your content and optimize  images and videos as much as possible.
• 03:00 - 03:30 But it’s not always easy because  if your website is not static,   if content changes frequently, or if users  can upload and display different images   and videos like in most web applications,  you might have some optimization problems. Let’s talk about the regular  image and video HTML tags.  I’ll add the source image and video.
• 03:30 - 04:00 And of course, the sizes are too big. The image is almost 8, and the   video is almost 50 megabytes. Even if I give a different size,   here is gonna be the same. Let’s add a width and height.  Refresh the page. And they are still the same.  Because we're only resizing the  frame, not the actual image or video.
• 04:00 - 04:30 So what we should do here is, we should create  different versions of the image and video for each   screen size and use the correct source for each. But again, this is not possible if your content   is dynamic or if you have many images. So we have to find a different solution.  If you are using Next.js, there is an  awesome built-in solution for images.  Just replace your image tag with the Next.js  Image component and give your width and height.
• 04:30 - 05:00 And right now, the file size is smaller. Because the Image component resizes the   media according to given dimensions. But, the problem is that this component   serves all images directly from the server.  Even if you use an external image,  it’s gonna store that on the server.  And if you use a single server with thousands  of images, it’s better to use a CDN.  But when using a CDN, you’ll need to write  a different loader to display the images.
• 05:00 - 05:30 And there is no solution for videos, and it  cannot be used in pure React applications.  So, for all your projects, you may  need a single and reliable solution. This is why I started using ImageKit. ImageKit is not just a media storage solution;   it’s a complete media delivery  and management platform. You can upload your images and videos. And it has a generous free tier. So  you can test it for your next project. When you display images on your website,  ImageKit optimizes them in real-time.
• 05:30 - 06:00 And, you can modify this compression level. If the user’s network is slow,  you can show low-quality images. You can also transform images instantly  by just changing the image URL. You can crop, give a shape,  and apply other effects. You can write any text. And again, you are just  changing the URL to do that.
• 06:00 - 06:30 And most importantly, you can use lazy loading  placeholders for the best user experience. It’s also possible to hide your  images from unauthorized requests. And the best thing is you can use  different cloud options together. So even if you store your images in a  different storage like AWS or Google Cloud,   ImageKit is gonna access them so, you’ll be  able to use all these features for those images.
• 06:30 - 07:00 Let’s open the documentation  and see how to use it. As you can see, you can use it with  most of the languages and frameworks. Let’s choose Next.js. We already have our application. I’ll skip here. We are gonna need this library. Let’s install.  npm install imagekitio-next After that, I’m gonna open the dashboard   and get my public and private keys Let’s pass them to our env file.  In the root folder, I’ll create  my env file, and paste them here.
• 07:00 - 07:30 Right now, I can open my dashboard. There are some default examples,   but you can also upload your files here. Of course, I’ll show you how to upload   images in your application using  ImageKit, but I just wanted to show   you how to do that on the dashboard. Let’s open the developer options.  As you can see, this is the ImageKitId,  which will appear on the image URLs.
• 07:30 - 08:00 Let’s copy and paste these keys. And now we are ready to display our images. Firstly, I’m gonna add this Imagekit URL  to the Next.js configuration because,
• 08:00 - 08:30 by default, Next.js doesn’t allow  us to use any external images. After doing that, we’ll be able to  display the images using this component. We’ll write here the URL endpoint. And the other details are similar  to Next.js Image component;  instead of the source, we’ll be using the path. You can directly use this component here,
• 08:30 - 09:00 but each time you have to write  this endpoint again and again. To prevent this, Inside the source folder,  I’ll create my component. And define our endpoint. And return it just like that. Of course, these items will be dynamic,   so let’s take them as props  and use them in our component.
• 09:00 - 09:30 Now, instead of using the Next  Image, let’s import our component. I’ll change my source, and as  you can see, the image is here.  You can also add the full image URL  instead of just passing the path.
• 09:30 - 10:00 Here, it says we can use ImageKitProvider to  prevent writing urlEndpoint for each image,   but I think it’s better to use it like this  because since ImageKit uses context API,   the component should be a client component, and  we don’t want to change our server components. Okay, let’s look at the image manipulation. The only thing you should do is write here  the transformation array and give your sizes.
• 10:00 - 10:30 You can also give the sizes like that,   but we can add different options  inside the transformation array. By the way, if you are re-sizing your images  in this way, the parent should be relative. Just like that. We can also reduce the image quality.
• 10:30 - 11:00 And we can give here any percentage. And now the image size is even smaller. Let’s see how to crop images. I’ll write cropMode: "extract" and I’ll add  the positions that I want to start cropping. Let’s change the quality so we can see better. Actually, let me open the image in a new tab.
• 11:00 - 11:30 As you can see, the x and  the y positions are here. If I make it 50, it’ll start  cropping after 2050 pixels. 60 and this is how it works Let’s rotate our image.90 degrees. Just like that.
• 11:30 - 12:00 By the way, you can give these options  independently using different objects,   in this case it’ll rotate first and after resize. Right now, I’ll try to add text to my image. To do that, I’m gonna be using a  text layer. This type can be a text,   image, or video. Let’s do the text. Here is gonna be the input. Let’s  say LamaDev. I’ll add the font size,
• 12:00 - 12:30 And finally, I’ll end my layer. I can also change the position.  So I’ll say layer x 150 pixels   and layer y 200 pixels. And make sure  that you write them before the ending. You can also add an image. To do that,   just change the layer type and  the input, which is the image URL.
• 12:30 - 13:00 What about the lazy loading? Let me add here some high quality images. And they are gonna be vertical  so we can scroll down. If you don’t use lazy loading, all these images  will be loaded together when you visit the page.
• 13:00 - 13:30 But if you use it, images will be loaded only when  you scroll down. And it increases our page speed. Let’s see. And this is what we want. We can also use blurred image placeholders. This is really important for the user experince. Let’s visit unsplash.com As you can see, it shows placeholders  instead of showing a single color.
• 13:30 - 14:00 And it’s really easy to do that with ImageKit. I’ll just say low quality  image placeholder (lqip). Active will be true and the  quality, let’s say 20 percent. And now, I’ll slow down my  connection so we can see better.  
And perfect.
• 14:00 - 14:30 We can also optimize the videos. Let’s create a Video component. We are gonna do exactlly the same thing, but this  time we’ll be using the ImageKit Video Component. Let’s call our component on the homepage. I’ll add the source,
• 14:30 - 15:00 sizes and the player controls. And the video is here and it’s  size is much smaller right now. By the way they are not vertical,  because here is should be display. Okay. Finally, let’s see how to upload images. It’s really easy; we’ll just  use this upload component;
• 15:00 - 15:30 it’s gonna render a file input,  and we’ll be able to upload files. So let’s create our component. And use them inside. But to upload files to our media  library, we need our private key. But since this component is a client  component, we shouldn’t reveal the secret key.
• 15:30 - 16:00 To prevent this, ImageKit requires a backend  server. So we’ll send an authentication request,   and we’ll get that request in the API, make the  verification, and if everything is okay, it’s   gonna send an access token. Using that token and  this client component, we’ll upload our images. So, let’s create our API endpoint.
• 16:00 - 16:30 Of course, you can change the  name, let’s say upload-auth. Let’s add the GET request fuction. Now, we are ready to use the Upload  component on the client side. Firstly we’ll need this public  Id and the URL endpoint.
• 16:30 - 17:00 Let’s define them here. As you can see, the file input is here. But we can’t upload any images because we are   not authenticated. We have to  send an authentication reques. To do that let’s create here a  function called authenticator.  I’ll say try catch
• 17:00 - 17:30 And here, we are gonna make the api request.  Remember the end point is api/upload-auth If the verification goes  wrong, we’ll throw an error. If everything is okay, we’ll get the data. And remember it includes the  signature,expire and the token, Let’s return them.
• 17:30 - 18:00 And we can use this function here. You can give any file name but don’t have  to because if you write useUniqueFileName,   it’s gonna generate a  different name for each file. If there is an error, we can  handle it using this function.
• 18:00 - 18:30 If it’s successful, we can see the  final image using this function, We can also keep track of the  progress using onUploadProgress. Let’s see.
• 18:30 - 19:00 Okay, there is a typo here.  And here is gonna be http The progress is here, and after the successful  uploading process, we can see the image. So what you can do here? You can create  a useState hook, that includes the error   success and the progress states.  You can show them somewhere here. You can also, get rid of this file  input and show a custom element.
• 19:00 - 19:30 So I’ll say display none. And  create here a custom upload button. And when we click on this button, we’ll  actually click on this upload component. To do that we can use the  useRef hook, and call this here.
• 19:30 - 20:00 And whenever we click on this button,  we’ll call the ref and run a click event. Of course, the hook should  be inside the component. Just like that. It’s that easy, guys! You can upload, optimize,   and transform your images and videos with just  one library. You don’t need anything else.
• 20:00 - 20:30 As I said, ImageKit provides a free tier.  You can upload thousands of images for free. You can find the link in the description. And I  highly recommend you check the API documentation;   you’ll find here tons of different features and   their implementations. Again, the  link will be in the description. And that’s all. I hope you liked it.  If you learned something new today,   please like the video. Don’t forget to follow Lama  Dev’s social media accounts.
• 20:30 - 21:00 I hope I’ll see you in the next tutorial. Goodbye.