I don't know how to handle pictures on my website?
Hey there, I'm working on a side project: a website to feature a large number of classic cars. I have around 3000+ cars on it, and the picture handeling is a MESS! I'm trying to validate my website with Google Page Speed, and I have crazy numbers for time load and several recommendations regarding picture format. How do you deal with that on your websites??
What did wonders for handling images on Makerlog was using a paid service like Imgix to do on-the-fly image processing. It's expensive, but wow it's convenient.
Another approach is to compress them pre or on upload. On upload makes sense if the content is user generated. Pre makes sense only if you're adding them manually.
Now that you say it: I've already used Imgix, that solution is dope!! I need to reconnect on that!!
The thing is that I'm not confortable with a pre-treatment on these pictures, I have around 3000 of them: I can't handle them one by one manually.
So I'll give a try with Imgix!!
This is a free app (for Mac) that you can use to compress images pre-upload: https://imageoptim.com/mac. I'm sure there are other tools out there that do something similar.
One thing to keep in mind is the size of the image (like pixel dimensions). They should only be as big as they need to be on the website.
You can also use Cloudflare's free plan to make sure everything is on a CDN.
What's your build process? What is your site running on? There's usually some way to compress images during the building process. We can probably help more if we know how your site is built.
Thank you for your answer Jordan, also very great insights here!
I'm gonna have a look on imageoptim, that could potentially work for my case!
I don't know how to have a general idea about the size of the picture I should use? Do I need to create 3 different size images: thumbnail, mobile, desktop? What should be their ideal sizes: in pixel and weight?
I'm already using cloudflare: I've setup the free mode, which seems to be working quite well?! Do the pictures are lighter while using their CDN?
So, my build process seems to be quite archaic⦠I have my hosting at www.o2switch.fr which is quite good! And I'm building everything on sublime text, without any framework, using html, css; php, mysql. I'm hard coding everything, which is quite boring, but is the only way I know. I don't know how to use any console or terminal :)
I don't know how to have a general idea about the size of the picture I should use? Do I need to create 3 different size images: thumbnail, mobile, desktop? What should be their ideal sizes: in pixel and weight?
You'll need to pull up your website and figure out (via the developer inspector in your browser) the largest size that the image is visually at any given size.
For example, on the homepage of your personal website, look at the image in the "Education" section at the bottom. Looks like the largest size that image gets visually-speaking is about 950px wide (when the browser window is at 990px wide). But the actual image file is 1398px wide. You could resize that file down to 950px wide and get a much smaller image size. Combine that with some kind of compression and it'll probably be a fraction of what it currently is.
I'm already using cloudflare: I've setup the free mode, which seems to be working quite well?! Do the pictures are lighter while using their CDN?
I don't think the Cloudflare free plan does any image optimization for you (although their paid plans do). A CDN just ensure faster load times of what's there.
@jrdnbwmn This is exactely the answer I was looking for!! Thank you for that!!
- piio.co
- upscalepics.com
- uppy.io
- imagify.io
- Kraken.io.
- Cloudinary.
- CloudFlare.
- Fastly.
- Uploadcare.
- Thumbor.
- OpenCV.
- FFMPEG.
- css-ig.ne
Image Optim is my main tool for mac. I read recently that tinypng has a developer API.
That might be handy?
Please sign in to leave a comment.