Four things you need to know when working with images

In web development images can be a tricky subject or any file upload really. That’s why there are a lot of services to abstract out these issues. In this article I will review four things you want to take note of when dealing with images in your websites and web applications. Uploading an image and displaying it can seem like a pretty straight forward task but there are hidden unknowns you might not have considered.

Images vary in size

Photo by Blake Weyland on Unsplash

Images come in various sizes. This can be an issue for you. Smaller images tend to be great but they don’t scale well. Large images look great when scaled but they take long to upload and render. Finding the balance can be tricky and it is really depends on what you need the image for in your application. For example say the user wants to upload a profile picture; this doesn’t need to be large. So you can set limits of maybe 2Mb. This ensures the image being uploaded isn’t to large. However if you are creating a image gallery you might need to accept larger sizes of images. This is fine except rendering these images might take some time. So lets list some things you should consider:

  • What is your server max upload size
  • Do you plan to limit the file upload size and how would you do it
  • How much images does you application render, how would it speed be affected
  • What is the image uploaded being used for. eg. list view, avatar, gallery, blog post
  • How many images can you save. What is the size of your sever space

You should learn to resize your images

Photo by Szilvia Basso on Unsplash

You can solve some of the above issues by resizing your images after you upload them. Resizing allows you to decrease the dimensions and size of your image. It is great for creating thumbnails that can be used when previewing your images especially when you have to load multiple images at the same time.

Large images might still take a while to upload but you can resize the uploaded image to different sizes depending on where you might need them. This is a great way to operate when you are creating a file manager or image gallery. If you have to display a range of images its best that they are not being rendered at the full image size. You should be using a lower quality thumbnail and then when the user clicks on the image they can see the full image. At least this is one way to go about it.

Images can be displayed in different ways

Photo by Xin on Unsplash

How should you display your image. Primarily you can display your image using an image tag or has a background div. They both have their advantages and disadvantages. Lets look at what each can do. To display and image easily we will do something like this

<img src="https://app.wftutorials.com/uploads/2020/05/6xx3om.png"/>

Above our src holds the link to our image. So we can see the results below.

We can also control how this image is displayed. Lets change the width and the height.

<img src="https://app.wftutorials.com/uploads/2020/05/6xx3om.png" width="100px" height="150px"/>

This will result in a smaller image. You will notice that since we set the height to 150px our image looks different as shown below.

Weird looking chart

We can also display the image as an background to a div element. Lets see how we can do this.

<div class="card-img" style="background-image: url('https://app.wftutorials.com/uploads/2020/05/6xx3om.png')"></div>

The code above will render the image as a background to the div with class card-img. So what does this CSS class entail. Lets look at it.

.card-img {
    width: 100%;
    height: 150px;
    max-height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0.25rem;
    margin: 0 auto;
    border: 5px solid #fff;
    background-color: #fff;
}

The result looks a bit weird but that is only because the image shows only within the dimensions you suggested for the div.

Image with set dimensions

How does this help. If you notice we have an oddly shaped picture above. Displaying the image as a background div can be use to maintain aspect ratio without having to display the entire image. Instead only part of the image will show and we can control how this happens using background-position: center. Pretty neat right. Of course you can always resize the image based on the kind of thumbnails you want but this is a simpler solution to get the same effect without resizing.

Images need to be stored somewhere

Photo by JOSHUA COLEMAN on Unsplash

Images need to be saved some where in your application. So they can be reference later. How do you plan to do this. Will you save the image under its uploaded name. Will you change the name. Can you edit the image later. Will all the images stay in the same folder. Where will the thumbnails go.

These are all questions that need to be answered when saving your images. How will you store them in your database. Will you use the full path or just the filename. How will you deal with duplicate images.

Conclusion

You have a lot of think about now when working with your images.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s