What kind of format should I use for images on my photo grid webapp?

I am doing this online course for CSS grid. here

And in the 8th video the author did a simple photo grid website.

Hence that got me thinking, what kind of picture format I should use in this kind of app?
Before I just assume that everything is jpg or jpeg.

Is there a standard when it comes to this? Also a lot of the high res images are taking up too much data to load, some 1080p images can be as big as 1MB. I think this is really bad for loading your website is it?

How do you guys deal with issues like this? How can I shrink the images without losing too much quality of it?

Thanks in advance.

My 2 cents.

JPGs file size are smaller than PNG, for a given image dimension. That said, JPG is lossy compression and PNG isn’t.

Plus, PNG has the added advantage of having transparency capability (alpha channel)… again, at an increase in file size.

If you don’t need transparency, you can use JPG format.

If you really want optimized images, read on…

Now, on to the matter of file sizes… the problem with Bootstrap img, img-responsive classes is they just resize the photo on the display device. But the original file size is still downloaded to the user, regardless of device/connection type. Thus, a 300K image downloaded to the desktop and displayed at 1200px will still be a 300K download on a mobile device displayed on 320px.

The way I personally deal with this issue is using an ImageResizing library. But this is for .NET server

There may be similar solutions for nodejs, or php servers.

Basically, I can append a width parameter on my JPG/PNG files and the server will serve a resized version of the photo.

Example: The original PNG file is 5MB large. Note the URL of the image file.

But using the same image, I can tell the web server (in my html code, to serve a 300px wide of the same image), like so:

And the server will send to the device, a smaller version of the same image automatically. So for a desktop, I can instruct the server to send an 800px or 1200px version, or whatever nnn pixel version I want. For example, in my admin program, I would use a small ?width=50 for thumbnail versions to be shown in the admin.

1 Like

There are essentially two ways to minimize the file size of photographic images:

  • You just plain make them smaller in terms of the resolution (like for thumbnails, which are commonly 150 to 320 pixels wide) manually with an image editor (and not via CSS), or
  • You can apply more JPEG compression (there should be a “quality” or “compression” slider in your image editor)
  • Or you can combine both methods, and apply more JPEG compression to thumbnail-sized images

You should only load high-res image files on demand, like when there’s a button for the user to click so they can view a high-res version, which you can do via JavaScript. However, keep in mind that the image files straight out of a digital camera are usually way too high-resolution to display on a typical monitor and the only reason to keep them at that resolution is for large prints to hang on your wall. Unless the user has a 4K monitor, there’s no way they’re going to be able to see the entire image (straight out of the camera), so you should make a smaller-resolution file for most users anyway—1920x1080 is a good medium-res resolution for display that won’t take too long for anyone to download.

If you’re using Gulp.js with Node.js, you can use the ‘gulp-imagemin’ package which can compress/minify images without losing any visual quality. Highly-recommended tool that can save you some further kilobytes.

Also keep in mind that the JPG format is better for photographic images, while the PNG format is better for vector graphics (line art, shapes, and application screenshots on your computer which tend to have lots of whitespace and solid colors), so make sure your format matches the content.

1 Like

@astv99 @owel

thanks for the suggestion!