Need help with image resizing (re: slow site)
-
I'm trying to figure out why I'm having speed issues with my site, and using google speed test to help me knock out some of the issues.
One of issues deals with image resizing. I have a responsive design and so even though on the home page the normal width is 580 of the blog area, the full post can go up to 1170. So I size all of my images to 1170 wide and let CSS resize them depending on the size of the browser. (The images on the most recent post are a little bigger than this because I was testing something.)
I was wondering what the best practice was in regard to what I'm trying to do.
Also feel free to check out my site and let me know of any other feedback / advice you have. Thanks !:)
-
Thanks a lot Keri,
These days with the online competition being so strong we should pay more attention to the website architecture, usability, visual impact, speed and technical problems. SEO it's so complex that you'll find yourself overwhelmed by the number of critical issues that needs to be addressed and fixed. Don't focus just on the content try to enhance every aspect of your page from to . Optimizing pictures takes only a few moments and you can use automated functions in Photoshop.
-
Another area to help with the images is to host them on a content distribution network.
Amazon is not the cheapest, but its the easiest for low volume.
A few stats:
I host about 4000 images on Amazon S3.
My bill is about 4 bucks a month.
You can put your images in a few areas (west coast vs east coast etc)....
This will help get your images closer to your audience, but it will not help you with the "last mile"
I had a customer uploading 7 MB images in Wisconsin using dial up....
can't help them...
I'm alos moving to Cloud Front, amazon Content Distribution Network...
Also, you use chrome to determine what's causing the delay.. many times, images are just part of a larger problem...
-
Hi Rick,
To the best of my knowledge, smushit compresses what it can while keeping the quality exactly the same. Saving for the web will lower the quality to "looking good on screen" from "good enough to print and hang on your wall". I also looked at the most recent post about Noah standing, and saw that the original size was 1900 pixels wide -- you certainly want to resize that to the 1170 wide before uploading it.
Being a photographer with a portfolio, Coltaire can give you a lot more details than I can, and help guide you with settings to use in Photoshop to get pictures that still look great on the web but aren't bigger than they need to be.
-
Thanks for the kind words.
As I mentioned sometimes I like to do full width posts which are 1170 wide so if I use 800x600 the images won't show up correctly on full screen. -
Rick, you have a wonderful son and the story of your website left me without words and I don't know if I can give you a good response at this moment... Try resizing them to 800x600, the size accommodates a lot of user screens / mobile traffic.
Have a wonderful day
-
Yes, i use catching. But like I said, saving it for 640 wouldn't work for me since I want image to show up bigger than that if the screen is 1170. I'm assuming the images wouldn't be able to be resized any bigger than 640 without looking stretched.
-
I never used that tool and I think it's ok to use it in some situations but you have a lot more control of the file saving for web in PS, lot more options and the quality loss is insignifiant.
Take a look at my Portfolio page. All of my files are 640x480px/72dpi/50-60quality/jpegs.
Also are you using any caching / minifing plugins?
-
I'm using smushit to make the file size smaller, but I need to be able to at least have 1170 for full width posts (like this one.) I don't think I need to use save for web if I'm using smush it do I?
Does having css resize the images cause a site to slow down a lot?
-
I think that your images are very big and are slowing down your page speed and affect your rankings. Why don't you try to scale and reduce the quality using the "Save for web" feature in PS, it's fast and you have the option to compare with the original file when saving? 800x600 , 640x480 px are large enough to be properly visualized, Think about the different screen resolutions your visitors have. I avoid using pictures larger than 100kb and my average picture quality when saved for web is 60%. Hope it helps.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Competitor's new site ranking with out much keywords - How?
Hi all, One of our competitors have recently redesigned their website with new content. Now I can see much less keywords in the content. And page title also changed away from keywords. Still this is ranking at good position. How? Previously they used to have much landing pages with related keywords which some of them are missing now. Still I wonder why this website is ranking high? Thanks
Web Design | | vtmoz0 -
We use bigcommerce platform and want to access the bigcommerce server to change the way our product images display
Hi We use bigcommerce and want to chage the way we display multiple images for our products. At the moment in bigcommerce you switch between images by clicking the next image, we want the images to change when we hover the curser over the image. Does anyone know how to do this ? Regards Adrienne
Web Design | | CostumeD0 -
Help with error: Not Found The requested URL /java/backlinker.php was not found on this server.
Hi all, We got this error for almost a month now. Until now we were outsourcing the webdesign and optimization, and now we are doing it in house, and the previous company did not gave us all the information we should know. And we've been trying to find this error and fix it with no result. Have you encounter this issue before? Did anyone found or knows a solution? Also would this affect our website in terms of SEO and in general. Would be very grateful to hear from you. Many thanks. Here is what appears on the bottom of the site( www.manvanlondon.co.uk) Not Found The requested URL /java/backlinker.php was not found on this server. <address>Apache/2.4.7 (Ubuntu) Server at 01adserver.com Port 80</address> <address> </address> <address> </address>
Web Design | | monicapopa0 -
Help with Schema.org on Ecommerce Products
I’m looking for ways of using schema.org with products that have pricing options. There appear to be two main problems 1) Whilst colour, width, height and depth are all catered for, size appears to be missing – how can we mark up products that are available in sizes that aren’t necessarily covered by width/height/depth (e.g. shoe size). Also, what if the product is available in different finishes – technically, these could not properly be described as colours so how could we mark them up? 2) There doesn’t seem to be any particularly good way of marking up pricing options that are displayed on the same product detail page. For e.g. if a pricing option table is used like this: | ID | Colour | Price 001-red | Red | £3.99 001-green | Green | £4.49 001-blue | Blue | £4.99 | I can mark up each row as an offer, and give each offer a price and sku or mpn, but then I can’t use itemprop=”color” to describe exactly what the option is. Would I just use itemprop=”name” in this case and abandon color altogether (even though it’s technically supposed to be describing the colour of the product and not the name of the offer)? I suppose another way I could approach it would be to mark up each row as an individual product, and assign each one an offer with the details as described above but then the containing page would effectively look like a separate product – which it isn’t. Any help or advice on this would be very much appreciated
Web Design | | paulbaguley0 -
HELP! IE secure page display issue on new live site
For some reason IE 7, 8, & 9 do not display the following page: https://www.jwsuretybonds.com/protools.htm All they show is the Norton seal. It shows properly in all other browsers without issue (including IE 10+), but the earlier versions flash the page for a split second, then hides everything. Can someone shed some light on this? This is a new live site we just launched minutes ago and these browsers account for 12% of our overall traffic. UGH I hate you microsoft!!! Thanks all 🙂
Web Design | | TheDude0 -
Text in Images vs. Alt tags
Hi on my homepage i h ave multiple images They have the appropriate alt text for each image, but the text which the image displays is not written into the page and styled using CSS rather than placing text within an image. Is this a issue worth correcting, or is it sufficient to have just alt text for each image. Any major pros from having putting the text in the image into the CMS using appropriate CSS styling to achieve the same effect.
Web Design | | monster990 -
CSS styling help needed
I'm hoping that to someone experienced this is a quick fix, but it may be a pain and a rat's nest of code. Five or so years ago, I designed my brother's website at https://www.argentdata.com/index.html. I built it off of the Mollio theme (http://www.mollio.org/), and used templates in Dreamweaver, so it's not in a CMS. It's not a work of art, and there are some issues with it, but it's served him fairly well. Longer-term it needs a redesign, but right now I'm asking about just one aspect of the existing design. There are two parts to the site - the plain HTML site, and the osCommerce store that's under the purchase tab. If you go to http://www.argentdata.com/catalog/ you'll see that the osCommerce store is full width, while the navigation header copied over from the main site is 1200 pixels wide and centered. If you're on a wide monitor, it looks weird. What he'd like to do: Make the main site align to the left, both the content and navigation, and make the navigation left aligned for the osCommerce portion. He figures this is the easier way to do things, rather than try to muck with osCommerce CSS (that also has some merged CSS from the Mollio theme) and get it to center. Does anyone have a fairly simple solution that can make the navigation bar look good on osCommerce? Either the above of making everything left aligned, or some other solution simple we haven't thought of? Thanks!
Web Design | | KeriMorgret0 -
Critique a site I'm working on please
Hi guys, I have a list of things to do on this website that is longer than my arm but thought I would gather a few more thoughts on the site before moving on further with it. The site is here. It went live a couple of days ago for live testing. I have a news section coming very soon at theworkplacedepot.co.uk/news - it is in live testing now. One glaring issue for me is that some of the products simply aren't "buyable". What I mean by that is that the options are too vague and too vast - as an outsider I wouldnt have a clue what I was buying! Other issues: The banner at the bottom of the HP is a test - its design will be changing. The sitemap has some issues and will be addressed. There is no area yet to "log-in". However, critique for me pretty please! 🙂
Web Design | | MattJanaway0