Hosting a Laravel app with Digital Ocean and Cloudfare

@Laralex :O

Thanks for the explanation, I guess that makes sense. I guess I would just see the most popular screensizes and do that, and maybe add 100px just in case maybe.

A 5k image is like 4-16MB - the one I have, does that mean for one Image I'm going to have some 30MB? I'm sacred of the hosting pricing xd

I'll check that out.

So I store the app on Digital Ocean, but images on CDN? It seems like there will be quite a few moving parts to this I think.

@aurelianspodarec I believe you wont store these images with their original formats and quality. Specially in our application we convert all the images to .webp and while uploading we lower the quality of the image to 80 (0-100) which leads to like 70% size save. CDNs are used for multiple purposes, mainly in our sphere for storing assets which are loaded in your application (css, js and images). if 5k image is originally 4-16MB, after quality change to 80 and .webp format conversion it will be much, much, much smaller size. You can try that out. I personally think that you don't care for the user's agent. You care for the container width&height which you display the image in.

@Laralex I was thinking to use TinyPNG to reduce the quality of the image. With webp I guess I just tried it and I had the image, but not sure how big of a deal this is, how would you open that in some software like photoshop or alike? Since this is a service for designers and they should be able to easily save the images and use them free of charge. I can't seem to open that in https://www.photopea.com/ not sure if that's how photoshop works but I think that might be an issue, since they should be able to put this on figma etc... which I just tried it on figma and it copies pasted normally.

Not sure, I think it seems a fine format to use? One of the competitors has something like this: internet1png?lossless=true&q=75&crop=top,left&fit=crop&auto=format&w=1400

Which I suppose he's doing it like you said in terms of quality, 100, 75, 50, 25 and on his thumbnail they have internet1png?lossless=true&q=75&crop=top,left&fit=crop&auto=format&w=450 which it seems only the width is reduced, so I suppose that would ultimately also reduce the size.

Hmmm. Am I on the right thinking pattern here?

Why would he use png instead of webp? It seems webp is 20-30% better from what I just read, but just trying to wrap my head around this as I don't want to find myself in a place where I mislooked something.

Hmmm, I was looking at this https://caniuse.com/webp and I'm not sure about the support for safari.

My target audience are designers/dev so no need to support some outdated garbage like IE.

Hmm. Not sure. Trying to see pros and cons of webp and jpg or for that matter png

@aurelianspodarec You can store as whatever format you want if you have enough space. But you don't have. Since this is a service for designers I wouldn't use any API for image conversion, resize etc.. whether its paid or not. It doesn't look professional, especially since the clientele will be designers and devs.

@Laralex At some point, I hope I can earn money and invest it back, now just going to have to put my own money for a few months but hopefully the space won't be a problem when this takes off, but it could mean 1-2years to cover the hosting or whatever. Just not sure about paying some £200 or £300 a month right now, but hmmm, the first 2-3months I won't pay that much, as it will take a while to upload these images but it'll start to add up quickly.

What do you mean by the API? What I'm trying to do is I don't want to send a 5k image for a 300px wide thumbnail etc... if that's what you mean? I might misunderstand you here.

@aurelianspodarec No. I misunderstand you. :D Anyway, just make sure your spendings are reasonable and you will have at least 95% ROI (return of investment) monthly if you will pay £300/mo. Because otherwise you will reach one point where you will be spent £1000 for literally nothing and you can't get them back even if you start making money at this point.

@Laralex Well, I'm all for it but like you say, they do indeed need to be reasonable xd

So I don't know. Just learning more about storage, what do you think about what I wrote to Snapey as well? :D

@Snapey So from what I understand:

1. Use srcset, perhaps the Spatie Media Library to help with that ( I've seen competition also uses srcset so makes sense, and I just read about it.
2. Host the app itself via Laravel Forge and Digital Ocean
3. Use S3 Bucket to store the images so is that like CDN? It should be cheaper, faster and more performant, and the cost seems to be low indeed - I think.

I'm bit confused though.

I will need to then pay for the storage and requests.

I have no idea what to put here https://imgur.com/a/nlUhrAu - but the price at 210USD is a bit uff, and that's just for storage.

BUT, I won't have that much data at launch, so if I put 10k images instead of 100k, the price goes down to $30USD, and I'll most likely have 10k images the first few weeks.

So I suppose in general this is prob the cheapest option since you pay what you use as well right.

But is my idea correct here?

I want to start deploying this now, even tho my app isn't fully finished as I know it can take some time to understand how this works, but I feel like I need to set up digital ocean with forget, and then S3 bucket as the first step right, hosting wise, then add the spatie functionality and connect this stuff. Then it should be done I think.

@Snapey Oh no, wait... I read some of the stuff there wrong. So i think this is what It would be more likely right https://imgur.com/a/KzkQm0T

So its barery 8USD for what I want, compared to some $110 on digital ocean

@aurelianspodarec sorry it's a while since i did any estimates of s3 usage. Its always going to be based on your traffic levels and that's impossible for me to guess at

@Snapey What would be a small/mid traffic usage for sites you've built like?

I mean, I put random numbers, but I feel like it would be between 10usd and 100usd at maxxx. So I think nothing to worry with that. But it seems like its cheaper than digital ocean I think.

So would you say I need to use Laravel Forge, host the app on digital ocean, images on s3 and that's it, and no cloudfare but spatie instead?