Question posted in 
I’m wondering if it’s considered bad practice if I resize a logo or any image with CSS or should I do it with an image manipulating program before putting it on the site?
I’m wondering if it’s considered bad practice if I resize a logo or any image with CSS or should I do it with an image manipulating program before putting it on the site?
3
Answers
I would reccomend you using webp or svg if possible. Otherwise, the lighter the file the faster it loads, that will take effect in the site performance and therefore in your speed score, which will affect to your google positioning. (check https://developers.google.com/speed/pagespeed/insights/ for more info)
So, in short: You should resize with photoshop and then resize with css to adapt it to screen
Edit: Use the smallest size possible without loosing quality in 4k and resize with svg.
if you use .png or .jpg format, the size is better to double as shown on web page, example: the logo shown on web page is 200x60px, then on Photoshop resize the logo to 400x120px, then save as .png or .jpg. You do this is for logo clear and sharp display on retina screen.
as @LiLPandemio said, the better choice is using .svg format, this is vector format, modern browser support, Pixel-independent, transparent support, you do not need worry about size.
Is okay to resize a Logo from "Big to Small" Size to prevent your user to see pixelated images like a 50x50px image to 150x150px.
The best Option for Logos is to use .svg (Vectors), where you can set a Responsive size using css or html for example:
Those 2 examples are using a responsive image with a responsive size. It will help you to make a beautiful website, SEO Optimizes and best of all: Bets user experience not only for logos but icons as well.